/* This is the logo link clickable area */
#logo-zone {
	top: 18px;
	left: 11px;
	height: 21px;
	width: 20px;
}

/* Show in Large desktops and laptops OR Landscape tablets and medium desktops*/
@media (min-width: 280px) 
{
	.bgimg {
		background: url('../../Resources/Bg/bg_abstract1.jpg?n=0') no-repeat center center fixed;
		background-size: 100% 100%;
		height: 100%;
		width: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}

	/*.login-container
	{
		margin-right: 6%;
	}*/
}

/* Portrait tablets and small desktops */
@media (min-width: 280px) and (max-width: 991px) 
{
	#divAdv {
        display: none;
	}
  	/*.bgimg 
    {
    	background-image: none;
    }*/
}

html, body {
	height: 100%;
	width: 100%;
}

.absoluteBtmRight {
	position: absolute;
	bottom: 0px;
	right: 0px;
}

.btn-mobile-size {
    height: 50px;
    min-width: 90px;
}

@media (max-width: 880px) {
	.page-sidebar,
	.page-sidebar.sidebar-fixed:before {
		width: 100%;
	}
}

.no-data {
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	/*border: 3px solid #dbe4ed;  Border color is optional */
}

/* DataTable Button CSS */
.dataTables_filter label {
	width: 100%;
}

	.dataTables_filter label .form-control {
		width: 100%;
	}
/*
#tableProfile table {
	width: 100% !important;
}

#tableProfile .dataTables_length {
	top: auto;
}
*/
.dataTables_tableButtons .dt-buttons {
	display: flex;
	flex-direction: column;
}

.dataTables_tableButtons .dt-buttons button:hover {
	background-color: #5db2ff;
	color: white;
}

.dataTables_tableButtons .dt-buttons button {
	font-size: 13px;
	padding-left: 11px;
	padding-right: 11px;
	margin-bottom: 1px;
	margin-top: 1px;
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: 400;
	line-height: 1.42857143;
	color: #333;
	white-space: nowrap;
	text-decoration: none;
	background-color: transparent;
	cursor: pointer;
	border: none;
}

.tableButtonList {
	min-width: 120px;
	left: auto;
	right: 0;
}

.dataTables_tableButtons {
	border: 1px solid #d5d5d5;
	padding: 0px;
	font-size: 13px;
	color: #333;
	display: none
}

.dataTables_divToggle {
	padding: 6px 12px;
	padding-bottom: 4px;
}

.DTTT.btn-group {
	position: absolute;
	right: 64px;
}

.dataTables_filter label .form-control {
	width: 100%;
}

.dataTables_filter label {
	width: 100%;
}

.dt_btn {
	display: inline-block;
	width: 100%;
	height: 100%;
}

.dataTables_length label select {
	border-radius: 0px;
}

div.dataTables_length select {
	width: auto;
}

.dataTables_length label {
	margin-bottom: 0px;
}

/* ==========================================================================
   UI Font: Inter
   Overrides the Beyond theme's Open Sans / Roboto base fonts without editing
   vendor files. Inter is primary; Open Sans / Roboto kept as fallbacks.
   Icon fonts (Font Awesome, typicons, weather-icons, glyphicons) are NOT
   touched here, so all icons keep rendering correctly.
   ========================================================================== */
:root {
	--ui-font: 'Inter', 'Open Sans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	/* Inter legibility fix: cv05 = lowercase l with tail, cv08 = capital I with serifs,
	   so "I" vs "l" are visually distinct. Inherits app-wide from :root. Icon fonts
	   are unaffected (they don't carry these feature tags). NOTE: font-feature-settings
	   does not merge across declarations — add future features (e.g. "tnum") HERE. */
	font-feature-settings: "cv05" 1, "cv08" 1;
}

/* Base text — cascades to most inherited elements (tables, forms, sidebar, navbar text) */
body {
	font-family: var(--ui-font);
}

/* Headings (Beyond hard-sets Open Sans on h1–h6) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--ui-font);
}

/* Form controls & buttons (ensure consistency where a family is hard-set) */
input, select, textarea, button,
.form-control, .btn,
.navbar, .page-sidebar,
.dropdown-menu, .widget-title {
	font-family: var(--ui-font);
}

/* Decorative numeric spots Beyond renders in Roboto — keep them on-brand */
.databox .databox-header,
.databox .databox-number,
.timeline > li > .timeline-panel .timeline-header .timeline-title,
.profile-container .profile-header .profile-stats .stats-col .stats-value {
	font-family: var(--ui-font);
}

/* ==========================================================================
   GRID STANDARD  [BEGIN]
   Applies app-wide to every Bootstrap .table-bordered grid (ASP.NET GridView
   etc.). Horizontal row separators ONLY (no vertical lines) + an elegant soft
   blue hover. Overrides Bootstrap's forced rule
   `.table-bordered td,.table-bordered th{border:1px solid #ddd!important}` and
   the default grey hover `.table-hover>tbody>tr:hover{background:#f5f5f5}`.
   Tune the whole look from the variables below. Documented in UI-STANDARDS.md.
   ========================================================================== */
:root {
	--grid-head-bg:   #f8fafc;   /* header row background */
	--grid-head-line: #e3e7ec;   /* line under the header  */
	--grid-line:      #eef1f5;   /* line between body rows */
	--grid-hover:     #f0f6fe;   /* soft blue row hover    */
	--grid-row-pad-y: 8px;       /* vertical cell padding for normal grids — subtly taller rows; tune to taste */
}

/* 1. Remove every vertical (left/right) and outer side border */
.table-bordered,
.table-bordered > thead > tr > th, .table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th, .table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th, .table-bordered > tfoot > tr > td,
.table-bordered td, .table-bordered th {
	border-left: 0 !important;
	border-right: 0 !important;
	border-top: 0 !important;
}
.table-bordered { border: 0 !important; }

/* 2. Header cells vs body rows. Headers are <th> — targeting `th` works for BOTH
      DataTables (real <thead>) AND plain GridView headers (rendered as <th> in
      the browser's implicit <tbody>, no <thead>). Body cells are <td>. */
.table-bordered th {
	border-bottom: 1px solid var(--grid-head-line) !important;
	background-color: var(--grid-head-bg) !important;
	font-size: 12px;
	font-weight: 600;
	color: var(--grid-head-text);
}
.table-bordered > tbody > tr > td {
	border-bottom: 1px solid var(--grid-line) !important;
}

/* 3. Elegant hover — soft blue wash with a smooth fade (beats grey + zebra) */
.table-hover > tbody > tr {
	transition: background-color .12s ease;
}
.table-hover > tbody > tr:hover > td {
	background-color: var(--grid-hover) !important;
}

/* 4. Default: subtly taller rows. Only the VERTICAL padding of body cells is
      raised — horizontal padding from .padding-5 etc. is left intact, so column
      spacing is undisturbed. !important is required to sit above the per-cell
      padding utilities (.padding-5 / .no-padding are themselves !important).
      OPT OUT a whole grid by adding class="grid-compact" to the GridView. */
.table:not(.grid-compact) > tbody > tr > td {
	padding-top: var(--grid-row-pad-y) !important;
	padding-bottom: var(--grid-row-pad-y) !important;
	vertical-align: middle;
}
/* 4a. .grid-compact grids are simply not matched by rule 4, so they keep their
       original (tight) height and any per-cell padding exactly as before.
       Applied on e.g. tms.aspx (dense timesheet grid). */
/* GRID STANDARD  [END] */

/* ==========================================================================
   WIDGET / CARD STANDARD  [BEGIN]
   The Beyond card component: <div class="widget flat radius-bordered ...">.
   Refresh applied step by step (see UI-STANDARDS.md). Tune via the variables.
   ========================================================================== */
:root {
	--widget-radius: 12px;     /* card corner radius (Beyond default was 3px) */
	--widget-divider: #e8ebef; /* header/body separator line */
	--widget-header-min-h: 42px; /* header height (Beyond default was ~35px) */
	--widget-header-gap: 6px;    /* gap between header items (e.g. View More | More Actions) */
}

/* Step 1 — rounder corners. radius-bordered splits the radius between the
   header (top corners) and the body (bottom corners); no-header cards round
   all four on the body. */
.widget.radius-bordered .widget-header {
	border-top-left-radius: var(--widget-radius) !important;
	border-top-right-radius: var(--widget-radius) !important;
}
.widget.radius-bordered .widget-body {
	border-bottom-left-radius: var(--widget-radius) !important;
	border-bottom-right-radius: var(--widget-radius) !important;
}
.widget.no-header.radius-bordered .widget-body,
.widget.flat.no-header .widget-body {
	border-radius: var(--widget-radius) !important;
}
/* Header-less cards that omit the header WITHOUT the .no-header class (e.g. the
   announcement bar, logo box): the body is the first child, so round ALL four
   corners instead of only the bottom — otherwise they look lopsided. */
.widget.radius-bordered > .widget-body:first-child {
	border-radius: var(--widget-radius) !important;
}

/* Step 2 — header/body separator. Beyond draws an inset (96% wide, #e5e5e5)
   line via .widget-header.lined:before. Make it full-width edge-to-edge and a
   softer, cooler tone consistent with the grid lines. */
.widget-header.lined:before {
	width: 100% !important;
	left: 0 !important;
	top: auto !important;        /* anchor the line to the header bottom at any height */
	border-bottom-color: var(--widget-divider) !important;
}

/* Step 3 — slightly taller header with everything vertically centered. Flexbox
   centers the caption AND the buttons regardless of their own heights. The
   first child (caption) takes the slack so ALL other items (buttons, status
   labels, View More / More Actions) group to the RIGHT — this reproduces the
   original pull-right behaviour for any number of items (don't use
   space-between: it spreads 3+ items and pushes a middle one to the centre).
   The absolutely-positioned divider line is unaffected. */
.widget-header.lined {
	display: flex;
	align-items: center;
	gap: var(--widget-header-gap);
	min-height: var(--widget-header-min-h);
}
.widget-header.lined > :first-child {
	margin-right: auto;
}
/* WIDGET / CARD STANDARD  [END] */

/* ==========================================================================
   BUTTON STANDARD  [BEGIN]
   Rounds all Bootstrap .btn consistently (header buttons, form buttons, etc.).
   Colours are NOT touched — btn-blue / btn-primary keep their existing look.
   Button groups / split buttons (Verify, View More, More Actions) work
   automatically: Bootstrap only squares the INNER edges of a group, so this
   single radius rounds standalone buttons and the OUTER corners of groups,
   while joined inner edges and input-group fields stay square. No !important
   needed (this rule loads last; group inner-corner rules keep their precedence).
   Tune via --btn-radius (e.g. 999px for a full login-style pill).
   ========================================================================== */
:root {
	--btn-radius: 6px;   /* button corner radius (Bootstrap default was 4px) */
}
.btn {
	border-radius: var(--btn-radius);
}

/* Split / dropdown buttons (Verify ▾, View More ▾): round the group's OUTER
   corners so it reads like a single rounded button, but keep the inner seam
   square so the pieces stay joined. Explicit because Beyond leaves the dropdown
   <ul> as the group's :last-child, which breaks Bootstrap's default rounding. */
/* Reset every segment, then round only the group's OUTER corners — the first
   button's left, and the LAST real button's right (`:not(:has(~ .btn))` skips a
   trailing dropdown <ul>). Inner seams stay square. !important also overrides
   stray inline border-radius (e.g. the delete buttons' inline 2px). */
.btn-group > .btn {
	border-radius: 0 !important;
}
.btn-group > .btn:first-child {
	border-top-left-radius: var(--btn-radius) !important;
	border-bottom-left-radius: var(--btn-radius) !important;
}
.btn-group > .btn:not(:has(~ .btn)) {
	border-top-right-radius: var(--btn-radius) !important;
	border-bottom-right-radius: var(--btn-radius) !important;
}
/* Lone button in a group: round all corners (also covers browsers without :has). */
.btn-group > .btn:only-child {
	border-radius: var(--btn-radius) !important;
}
/* BUTTON STANDARD  [END] */

/* ==========================================================================
   PAGE TWEAK — Default.aspx announcement bar height  [BEGIN]
   The announcement (#divPreviewBody) and logo (#divLogoBody) boxes are kept the
   same height by a script on the page that sets an explicit height every second.
   Forcing min-height here (with !important) wins over that script, so the bar
   gets taller reliably. Both must match. Tune the one value below.
   ========================================================================== */
#divPreviewBody,
#divLogoBody {
	min-height: 42px !important;
}
/* PAGE TWEAK — Default.aspx announcement bar height  [END] */

/* ==========================================================================
   CARD INFO-HINT NOTE  [BEGIN]
   Hint lines in card bodies, e.g.:
   <p><span class="fa fa-bar-chart blue"></span> <i><small>Summary</small></i></p>
   <p><span class="glyphicon glyphicon-th-list blue"></span> <i><small>Option</small></i></p>
   Works for ANY icon glyph (Font Awesome or glyphicon) coloured .blue. Drops the
   dated italic and uses a cleaner muted tone. Targeted by the italic that follows
   the icon, so only these hint notes are affected.
   ========================================================================== */
.fa.blue + i,
.glyphicon.blue + i {
	font-style: normal;
}
.fa.blue + i small,
.glyphicon.blue + i small {
	color: #6b7280;
	font-size: 12.5px;
}
/* CARD INFO-HINT NOTE  [END] */

/* ==========================================================================
   DATABOX / STAT TILE ROUNDING  [BEGIN]
   Quick Action tiles & stat boxes (.databox.radius-bordered = colored top +
   white bottom). Round the whole tile and clip the inner sections to it so all
   four corners are rounded cleanly. Reuses --widget-radius.
   ========================================================================== */
.databox.radius-bordered {
	border-radius: var(--widget-radius) !important;
	overflow: hidden;
}
/* DATABOX / STAT TILE ROUNDING  [END] */

/* ==========================================================================
   MODAL ROUNDING  [BEGIN]
   Beyond squares modals (.modal-content border-radius:0). Round the modal and
   match the coloured header (top) + footer (bottom) corners. NO overflow:hidden
   on .modal-content on purpose, so select2 / date-picker dropdowns inside a
   modal aren't clipped. Modal buttons are plain .btn -> already rounded by the
   BUTTON STANDARD. Tune via --modal-radius.
   ========================================================================== */
:root {
	--modal-radius: 10px;
}
.modal-content {
	border-radius: var(--modal-radius) !important;
}
.modal-content > .modal-header {
	border-top-left-radius: var(--modal-radius) !important;
	border-top-right-radius: var(--modal-radius) !important;
}
.modal-content > .modal-footer {
	border-bottom-left-radius: var(--modal-radius) !important;
	border-bottom-right-radius: var(--modal-radius) !important;
}
/* MODAL ROUNDING  [END] */

/* ==========================================================================
   GRID HEADER (modern)  [BEGIN]
   Uppercase, letter-spaced, muted header labels + clean CSS sort chevrons
   (replacing the dated PNG sort_*.png images, which were pinned center-right).
   ========================================================================== */
:root {
	--grid-head-text: #64748b;   /* muted slate header label */
	--grid-sort: #2563eb;        /* active sort arrow */
}
/* (header label text styling lives in the GRID STANDARD `th` rule above, so it
   applies to both DataTables and plain GridView headers) */
/* drop the PNG sort images, draw crisp chevrons after the label instead */
.table thead .sorting,
.table thead .sorting_asc,
.table thead .sorting_desc {
	background-image: none !important;
}
.table thead .sorting::after,
.table thead .sorting_asc::after,
.table thead .sorting_desc::after {
	margin-left: 6px;
	font-size: 11px;
	font-weight: 700;
	vertical-align: middle;
}
.table thead .sorting::after      { content: "\2195"; color: #b7c0cc; }       /* up-down, faint = sortable */
.table thead .sorting_asc::after  { content: "\2191"; color: var(--grid-sort); }  /* up = ascending */
.table thead .sorting_desc::after { content: "\2193"; color: var(--grid-sort); }  /* down = descending */
/* GRID HEADER (modern)  [END] */

/* ==========================================================================
   PAGINATION (DataTables)  [BEGIN]
   Modern separated, rounded page buttons + refined-blue active + muted info.
   Overrides Beyond's joined cyan pager.
   ========================================================================== */
.dataTables_paginate .pagination > li > a,
.dataTables_paginate .pagination > li > span {
	margin: 0 3px !important;
	min-width: 34px;
	text-align: center;
	border: 1px solid #e5e7eb !important;
	border-radius: var(--btn-radius) !important;
	color: #475569 !important;
	background-color: #fff !important;
	transition: background-color .15s ease, border-color .15s ease;
}
.dataTables_paginate .pagination > li > a:hover {
	background-color: #f3f4f6 !important;
	border-color: #d1d5db !important;
}
.dataTables_paginate .pagination > li.active > a,
.dataTables_paginate .pagination > li.active > a:hover {
	background-color: #2563eb !important;   /* refined blue */
	border-color: #2563eb !important;
	color: #fff !important;
	text-shadow: none !important;
}
.dataTables_paginate .pagination > li.disabled > a,
.dataTables_paginate .pagination > li.disabled > a:hover {
	color: #aab2bd !important;
	background-color: #fff !important;
	border-color: #eef0f2 !important;
}
.dataTables_info {
	color: #6b7280 !important;
	font-size: 12px !important;
}
/* PAGINATION (DataTables)  [END] */

/* ==========================================================================
   GRID + FOOTER (unboxed)  [BEGIN]
   No surrounding box on the grid (cleaner / more elegant). The table + the
   info/pagination footer still read as one continuous grid — the footer is just
   divided off by a subtle line, and the table spans full width. Top search/
   length controls are rounded and given breathing room. Uses :has (modern).
   ========================================================================== */
.dataTables_wrapper table.table {
	margin-bottom: 0 !important;
}
/* table spans full width (drop the Bootstrap col padding around it) */
.dataTables_wrapper [class*="col-"]:has(> table),
.dataTables_wrapper [class*="col-"]:has(> .table-responsive) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* footer (info + pagination): Beyond's .DTTTFooter draws a #ddd border + grey
   gradient bg that boxed it as a separate panel — flatten it so it blends. */
.DTTTFooter {
	border: 0 !important;
	background: transparent !important;
	background-image: none !important;
	margin: 0 !important;
	padding: 10px 2px 0 !important;
}
/* fallback for grids whose footer row isn't .DTTTFooter */
.dataTables_wrapper > .row:last-child {
	margin: 0;
}
/* drop the last body row's bottom line so the table meets the footer cleanly */
.table-bordered > tbody > tr:last-child > td {
	border-bottom: 0 !important;
}
/* top controls (search / length): breathing room, no box */
.dataTables_wrapper > .row:first-child {
	margin: 0;
	padding: 0 2px 8px;
}
/* clean, rounded search + length controls (kills the doubled border 
/* ==========================================================================
   GRID TOOLBAR (search + export)  [BEGIN]
   Search input (fully rounded on all sides) and export button sit side-by-side
   with a small gap. Both share the same 34px height and border style.
   Export button is fully rounded, subtle background, blue icon on hover.
   ========================================================================== */

/* Vertically center the search icon (::before pseudo-element on the label) */
.dataTables_filter label:before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
}

/* Pin the search input height and match export button */
.dataTables_filter input.form-control {
    height: 34px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    box-sizing: border-box;
}

/* Export button: fully rounded, same height, 8px gap */
.dataTables_filter + .dataTables_tableButtons {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    padding: 0 12px !important;
    height: 34px !important;
    box-sizing: border-box;
    border: 1px solid var(--grid-head-line) !important;
    border-radius: var(--btn-radius) !important;
    background-color: #f8fafc !important;
    color: #2563eb !important;
    transition: background-color .15s ease, color .15s ease;
}
.dataTables_filter + .dataTables_tableButtons:hover {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
}
.dataTables_filter + .dataTables_tableButtons .dataTables_divToggle {
    padding: 0;
    line-height: 1;
}
/* GRID TOOLBAR (search + export)  [END] */

/* ==========================================================================
   FORM INPUTS  [BEGIN]
   Rounds all .form-control inputs to match button radius. Soft blue focus ring.
   input-group outer corners also rounded (date-picker fields etc.).
   ========================================================================== */
body .form-control {
    border-radius: var(--btn-radius) !important;
    border-color: var(--grid-head-line) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body .form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    outline: none !important;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn {
    border-top-left-radius: var(--btn-radius) !important;
    border-bottom-left-radius: var(--btn-radius) !important;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn {
    border-top-right-radius: var(--btn-radius) !important;
    border-bottom-right-radius: var(--btn-radius) !important;
}
/* FORM INPUTS  [END] */

/* ==========================================================================
   SELECT2  [BEGIN]
   Aligns Select2 v4 single + multiple select with .form-control height (34px),
   border colour, radius, and focus ring. Dropdown panel gets matching border.
   ========================================================================== */
.select2-container--default .select2-selection--single {
    height: 34px !important;
    border-color: var(--grid-head-line) !important;
    border-radius: var(--btn-radius) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px !important;
    padding-left: 10px !important;
    color: #333 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
}
/* Compact grid rows: restore the page-specific tight Select2 height.
   Same-specificity rule placed later beats the 34px rule above. */
.grid-compact .select2-container--default .select2-selection--single {
    height: 26px !important;
    line-height: 26px !important;
    border-radius: 3px !important;
}
.grid-compact .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px !important;
    padding-left: 4px !important;
}
.grid-compact .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 24px !important;
}
.select2-container--default .select2-selection--multiple {
    border-color: var(--grid-head-line) !important;
    border-radius: var(--btn-radius) !important;
    box-shadow: none !important;
    min-height: 34px !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    outline: none !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    outline: none !important;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.select2-dropdown {
    border-color: #2563eb !important;
    border-radius: var(--btn-radius) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10) !important;
}
.select2-container--open .select2-dropdown--below {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.select2-container--open .select2-dropdown--above {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #2563eb !important;
}
/* SELECT2  [END] */

/* ==========================================================================
   DROPDOWN MENUS  [BEGIN]
   Rounds Bootstrap .dropdown-menu, adds soft shadow, slight item indent.
   ========================================================================== */
.dropdown-menu {
    border-radius: var(--btn-radius) !important;
    border-color: var(--grid-head-line) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10) !important;
    padding: 4px 0 !important;
}
.dropdown-menu > li > a {
    border-radius: calc(var(--btn-radius) - 2px);
    margin: 0 4px;
}
/* DROPDOWN MENUS  [END] */

/* ==========================================================================
   NOTIFICATIONS  [BEGIN]
   Softens Bootstrap's saturated alert colours to modern light-bg + coloured
   left-accent style. All four types covered.
   ========================================================================== */
.alert {
    border-left-width: 4px !important;
    border-radius: var(--widget-radius) !important;
    padding: 12px 16px !important;
}
.alert-success {
    background-color: #f0fdf4 !important;
    border-color: #86efac !important;
    border-left-color: #16a34a !important;
    color: #166534 !important;
}
.alert-danger {
    background-color: #fef2f2 !important;
    border-color: #fca5a5 !important;
    border-left-color: #dc2626 !important;
    color: #991b1b !important;
}
.alert-warning {
    background-color: #fffbeb !important;
    border-color: #fcd34d !important;
    border-left-color: #d97706 !important;
    color: #92400e !important;
}
.alert-info {
    background-color: #eff6ff !important;
    border-color: #93c5fd !important;
    border-left-color: #2563eb !important;
    color: #1e40af !important;
}
.alert strong { color: inherit !important; }
.alert .close { color: inherit !important; opacity: 0.4 !important; }
.alert .close:hover { opacity: 0.8 !important; }
/* NOTIFICATIONS  [END] */

/* ==========================================================================
   TIMELINE PANEL (Career Progression cards)  [BEGIN]
   Rounds the cards, softens shadow, vertically centres header content.
   ========================================================================== */
.timeline > li > .timeline-panel {
    border-radius: var(--widget-radius) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07) !important;
}
.timeline > li > .timeline-panel .timeline-header {
    border-top-left-radius: var(--widget-radius) !important;
    border-top-right-radius: var(--widget-radius) !important;
}
.timeline > li > .timeline-panel .timeline-header > .row {
    display: flex !important;
    align-items: center !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.timeline > li > .timeline-panel .timeline-header .timeline-title {
    padding: 0 0 0 10px !important;
    display: block;
}
.timeline > li > .timeline-panel .timeline-header .widget-buttons {
    height: auto !important;
    margin-top: 0 !important;
}
.timeline > li > .timeline-panel .timeline-body:last-child,
.timeline > li > .timeline-panel .timeline-footer:last-child {
    border-bottom-left-radius: var(--widget-radius) !important;
    border-bottom-right-radius: var(--widget-radius) !important;
}
/* TIMELINE PANEL (Career Progression cards)  [END] */

/* ==========================================================================
   DATABOX (KPI / summary cells)  [BEGIN]
   Beyond theme gives databox a flat square look with border-radius: 3px on
   radius-bordered. Override to match our widget radius, and apply to ALL
   databox variants so no radius-bordered class is required.
   ========================================================================== */
.databox {
    border-radius: var(--widget-radius) !important;
    overflow: hidden;   /* clips children cleanly; box-shadow still shows */
}
/* Left icon cell — round left corners only */
.databox .databox-left {
    border-top-left-radius: var(--widget-radius) !important;
    border-bottom-left-radius: var(--widget-radius) !important;
}
/* Right text cell — round right corners; also round left when it's the only cell */
.databox .databox-right {
    border-top-right-radius: var(--widget-radius) !important;
    border-bottom-right-radius: var(--widget-radius) !important;
}
.databox .databox-right:only-child,
.databox .databox-right[style*="width: 100%"],
.databox .databox-right[style*="width:100%"] {
    border-radius: var(--widget-radius) !important;
}
/* Vertical shortcut tiles (Quick Actions on default page): more aggressive
   rounding so they look like modern app icons. Top half clips to rounded top,
   bottom half clips to rounded bottom via overflow:hidden on parent. */
.databox.databox-vertical {
    border-radius: 20px !important;
}
.databox.databox-vertical .databox-top {
    border-radius: 20px 20px 0 0 !important;
}
.databox.databox-vertical .databox-bottom {
    border-radius: 0 0 20px 20px !important;
}
/* DATABOX (KPI / summary cells)  [END] */



/* Quick Action — vertically centre label in white area */
[id$="divQuickAction"] .databox.databox-vertical .databox-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 0 4px !important;
}
[id$="divQuickAction"] .databox-bottom .databox-text {
    padding: 0 !important;
    margin: 0 !important;
}

/* Quick Action — fix vertical centering (consolidated override) */
[id$="divQuickAction"] .databox.databox-vertical .databox-bottom {
    height: 30px !important;
    min-height: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
}
[id$="divQuickAction"] .databox.databox-vertical .databox-bottom .databox-text {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* ==========================================================================
   QUICK ACTION TILES (Default.aspx)  [BEGIN]
   Always 4 per row. On mobile: tiles shrink equally to fit.
   On desktop: tiles grow up to 120px then stop (empty space is fine).
   Icon area is always square via aspect-ratio.
   Scoped to [id$="divQuickAction"] — all other databoxes unaffected.
   ========================================================================== */

/* Flex row — no wrap so 4 always stay on one line */
[id$="divQuickAction"] .widget-body > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    margin: 0 !important;
    padding: 8px 6px;
    align-items: flex-start;
}
/* Each <a> grows equally but caps at 90px on large screens */
[id$="divQuickAction"] .widget-body > .row > a {
    flex: 1 1 0;
    min-width: 0;
    max-width: 96px;
    text-decoration: none !important;
}
/* Reset Bootstrap col */
[id$="divQuickAction"] .widget-body > .row > a > [class*="col-"] {
    width: auto !important;
    padding: 0 !important;
    float: none !important;
}

/* Tile fills the <a> wrapper — flex column so top+bottom stack properly */
[id$="divQuickAction"] .databox.databox-vertical {
    width: 100% !important;
    height: auto !important;          /* override Beyond's fixed height: 100px */
    min-width: 0 !important;
    max-width: none !important;
    margin-bottom: 0 !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 7px rgba(0,0,0,0.07), 0 0 1px rgba(0,0,0,0.04) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Icon area: fixed 80px height, flex-centred */
[id$="divQuickAction"] .databox.databox-vertical .databox-top {
    flex: 0 0 70px !important;
    width: 100% !important;
    height: 70px !important;
    border-radius: 14px 14px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Label area: fixed 30px below icon area */
[id$="divQuickAction"] .databox.databox-vertical .databox-bottom {
    flex: 0 0 26px !important;
    height: 26px !important;
    background: #fff !important;
    border-radius: 0 0 14px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
}
[id$="divQuickAction"] .databox.databox-vertical .databox-bottom .databox-text {
    display: inline !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pastel top colours */
[id$="divQuickAction"] .databox-top.bg-green     { background-color: #dcfce7 !important; }
[id$="divQuickAction"] .databox-top.bg-blueberry { background-color: #dbeafe !important; }
[id$="divQuickAction"] .databox-top.bg-pink      { background-color: #fce7f3 !important; }
[id$="divQuickAction"] .databox-top.bg-gold      { background-color: #fef3c7 !important; }
[id$="divQuickAction"] .databox-top.bg-sky       { background-color: #e0f2fe !important; }
[id$="divQuickAction"] .databox-top.bg-magenta   { background-color: #fdf4ff !important; }
[id$="divQuickAction"] .databox-top.bg-orange    { background-color: #fff7ed !important; }
[id$="divQuickAction"] .databox-top.bg-yellow    { background-color: #fefce8 !important; }
[id$="divQuickAction"] .databox-top.bg-primary   { background-color: #eff6ff !important; }
[id$="divQuickAction"] .databox-top.bg-danger    { background-color: #fef2f2 !important; }
[id$="divQuickAction"] .databox-top.bg-success   { background-color: #f0fdf4 !important; }
[id$="divQuickAction"] .databox-top.bg-info      { background-color: #f0f9ff !important; }

/* Matching icon colours */
[id$="divQuickAction"] .databox-top.bg-green     .databox-icon > * { color: #16a34a !important; }
[id$="divQuickAction"] .databox-top.bg-blueberry .databox-icon > * { color: #2563eb !important; }
[id$="divQuickAction"] .databox-top.bg-pink      .databox-icon > * { color: #db2777 !important; }
[id$="divQuickAction"] .databox-top.bg-gold      .databox-icon > * { color: #d97706 !important; }
[id$="divQuickAction"] .databox-top.bg-sky       .databox-icon > * { color: #0284c7 !important; }
[id$="divQuickAction"] .databox-top.bg-magenta   .databox-icon > * { color: #9333ea !important; }
[id$="divQuickAction"] .databox-top.bg-orange    .databox-icon > * { color: #ea580c !important; }
[id$="divQuickAction"] .databox-top.bg-yellow    .databox-icon > * { color: #ca8a04 !important; }
[id$="divQuickAction"] .databox-top.bg-primary   .databox-icon > * { color: #2563eb !important; }
[id$="divQuickAction"] .databox-top.bg-danger    .databox-icon > * { color: #dc2626 !important; }
[id$="divQuickAction"] .databox-top.bg-success   .databox-icon > * { color: #16a34a !important; }
[id$="divQuickAction"] .databox-top.bg-info      .databox-icon > * { color: #0284c7 !important; }

/* Icon size */
[id$="divQuickAction"] .databox-icon > .typcn:before,
[id$="divQuickAction"] .databox-icon > .fa:before,
[id$="divQuickAction"] .databox-icon > i:before {
    font-size: 20px !important;
}
[id$="divQuickAction"] .databox-icon > .typcn { margin-top: 0 !important; }
/* QUICK ACTION TILES (Default.aspx)  [END] */

/* ==========================================================================
   OVERVIEW BOXES (Default.aspx)  [BEGIN]
   4 boxes always equal height (tallest wins). View More pinned to bottom.
   ========================================================================== */

/* Make the 4-col row a flex row so all cols stretch to equal height */
[id$="divHomeOverview"] .widget-body > .row {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: wrap;
}
/* Each col becomes a flex column */
[id$="divHomeOverview"] .widget-body > .row > [class*="col-"] {
    display: flex !important;
    flex-direction: column !important;
}
/* Inner widget stretches to fill col height */
[id$="divHomeOverview"] .widget-body > .row > [class*="col-"] > .widget {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}
/* widget-body fills remaining widget height; padding-bottom reserves space for absolute View More */
[id$="divHomeOverview"] .widget-body > .row > [class*="col-"] > .widget > .widget-body {
    flex: 1 1 auto !important;
    padding-bottom: 36px !important;
}
/* OVERVIEW BOXES (Default.aspx)  [END] */

/* ==========================================================================
   SIDEBAR MENU — FA7 ICON FIX  [BEGIN]
   Beyond theme sets font-weight:normal on .menu-icon which blocks FA7 solid
   icons (they require font-weight:900). Override here per style variant.
   ========================================================================== */
.page-sidebar .menu-icon.fa-solid   { font-weight: 900 !important; }
.page-sidebar .menu-icon.fa-regular { font-weight: 400 !important; }
.page-sidebar .menu-icon.fa-brands  { font-weight: 400 !important; }
/* SIDEBAR MENU — FA7 ICON FIX  [END] */

/* ==========================================================================
   GLOBAL — UNDERLINE TABS  [BEGIN]
   Applies to every ul.nav-tabs app-wide (was scoped to #ulProfileTab only;
   widened so any current or future tab bar picks up the design automatically
   with no extra class/markup needed).
   Desktop: tabs stretch equally to fill full width.
   Mobile (<768px): tab bar scrolls horizontally, no squishing.
   CSS-only — no rebuild needed.
   ========================================================================== */

/* Tab bar container */
ul.nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-bottom: 1px solid #e8ebef !important;
    padding: 0 !important;
    scrollbar-width: none !important;
    background: #fff !important;
    margin: 0 !important;
}
ul.nav-tabs::-webkit-scrollbar { display: none !important; }

/* Each tab item — desktop: grow equally to fill full width */
ul.nav-tabs > li {
    float: none !important;
    flex: 1 1 auto !important;
    flex-shrink: 0 !important;
    margin-bottom: -1px !important;
    border: none !important;
    text-align: center !important;
}

/* Tab link — inactive */
ul.nav-tabs > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 10px !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 8px 8px 0 0 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    background: transparent !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    transition: color .15s, border-color .15s !important;
}

/* Hover */
ul.nav-tabs > li > a:hover {
    color: #2563eb !important;
    border-bottom: 2px solid #93c5fd !important;
    background: #f8fafc !important;
    text-decoration: none !important;
}

/* Active — bold blue underline */
ul.nav-tabs > li.active > a,
ul.nav-tabs > li.active > a:hover,
ul.nav-tabs > li.active > a:focus {
    color: #1d4ed8 !important;
    font-weight: 700 !important;
    border-bottom: 3px solid #1d4ed8 !important;
    background: #eff6ff !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    outline: none !important;
}
ul.nav-tabs > li.active > a i {
    color: #1d4ed8 !important;
}

/* Normalise icon colour — kill Beyond's tab-yellow/blue/red etc. tinting */
ul.nav-tabs > li[class*="tab-"] > a,
ul.nav-tabs > li[class*="tab-"] > a i {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    color: inherit !important;
}

/* Mobile: icon above, short text below. All tabs equal width.
   flex:1 1 0 (zero basis) forces truly equal columns regardless of content. */
@media (max-width: 767px) {
    ul.nav-tabs .tab-detail {
        display: none !important;
    }
    ul.nav-tabs {
        overflow-x: visible !important;
    }
    ul.nav-tabs > li {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    ul.nav-tabs > li > a {
        flex-direction: column !important;
        gap: 3px !important;
        padding: 8px 2px !important;
        font-size: 9px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }
    ul.nav-tabs > li > a i {
        font-size: 17px !important;
    }
}
/* GLOBAL — UNDERLINE TABS  [END] */

/* ==========================================================================
   REUSABLE — SOFT COLOR CARD HEADERS  [BEGIN]
   Drop-in "soft-*" modifier classes for any .widget-header: light tinted
   background + bold dark-toned caption text + vivid icon badge. Pure class-
   based — no ID, no per-page CSS, no ClientIDMode concern (classes are never
   mangled by ASP.NET, unlike server-control `id`s).

   Usage on any current or future page:
     <div class="widget-header soft-cyan">
         <span class="widget-caption">
             <span class="icon-badge"><i class="fa-solid fa-plane"></i></span>Label text
         </span>
     </div>

   Color bank (pick any one modifier class): soft-cyan, soft-indigo,
   soft-amber, soft-orange, soft-green, soft-rose, soft-purple, soft-blue,
   soft-red, soft-teal, soft-slate.

   Originally built for Default.aspx Overview cards (Leave=cyan, Holiday=
   indigo, Birthday=amber, Clock In/Out=orange); generalized here so any
   future screen can reuse it by just adding a class.
   CSS-only — no rebuild needed.
   ========================================================================== */

/* Taller header + true vertical centering of icon+text (overrides Beyond's
   float/line-height based centering, which only works at the default 35px height) */
.widget-header[class*="soft-"] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 46px !important;
    padding: 0 12px !important;
}
.widget-header[class*="soft-"] .widget-caption {
    float: none !important;
    line-height: normal !important;
    display: inline-flex;
    align-items: center;
}
/* Edit-pencil links inside a soft-* header (e.g. Profile.aspx Basic/Overtime/
   Deduction sections) — override the hardcoded "white" icon class, which is
   invisible against the new light background; color set per-variant below. */
.widget-header[class*="soft-"] > a i {
    color: inherit !important;
}

/* Icon badge shape/shadow — shared by every soft-* variant, color set per variant below */
.widget-header .icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    margin-right: 7px;
    font-size: 13px;
    color: #fff !important;
    vertical-align: middle;
    box-shadow: 0 2px 5px rgba(0,0,0,.18);
}

/* Bold caption text on any soft-* header */
.widget-header[class*="soft-"] .widget-caption {
    font-weight: 700 !important;
}

/* --- Color bank --- */
.widget-header.soft-cyan   { background-color: #c4eefa !important; color: #0891b2 !important; }
.widget-header.soft-cyan .widget-caption   { color: #0891b2 !important; }
.widget-header.soft-cyan .icon-badge       { background-color: #06b6d4 !important; }

.widget-header.soft-indigo { background-color: #dde1fb !important; color: #4338ca !important; }
.widget-header.soft-indigo .widget-caption { color: #4338ca !important; }
.widget-header.soft-indigo .icon-badge     { background-color: #6366f1 !important; }

.widget-header.soft-amber  { background-color: #fde9b8 !important; color: #b45309 !important; }
.widget-header.soft-amber .widget-caption  { color: #b45309 !important; }
.widget-header.soft-amber .icon-badge      { background-color: #f59e0b !important; }

.widget-header.soft-orange { background-color: #ffdcc9 !important; color: #c2410c !important; }
.widget-header.soft-orange .widget-caption { color: #c2410c !important; }
.widget-header.soft-orange .icon-badge     { background-color: #f4511e !important; }

.widget-header.soft-green  { background-color: #dcfce7 !important; color: #15803d !important; }
.widget-header.soft-green .widget-caption  { color: #15803d !important; }
.widget-header.soft-green .icon-badge      { background-color: #22c55e !important; }

.widget-header.soft-rose   { background-color: #fce7f3 !important; color: #be185d !important; }
.widget-header.soft-rose .widget-caption   { color: #be185d !important; }
.widget-header.soft-rose .icon-badge       { background-color: #ec4899 !important; }

.widget-header.soft-purple { background-color: #ede9fe !important; color: #6d28d9 !important; }
.widget-header.soft-purple .widget-caption { color: #6d28d9 !important; }
.widget-header.soft-purple .icon-badge     { background-color: #8b5cf6 !important; }

.widget-header.soft-blue   { background-color: #dbeafe !important; color: #1d4ed8 !important; }
.widget-header.soft-blue .widget-caption   { color: #1d4ed8 !important; }
.widget-header.soft-blue .icon-badge       { background-color: #3b82f6 !important; }

.widget-header.soft-red    { background-color: #fee2e2 !important; color: #b91c1c !important; }
.widget-header.soft-red .widget-caption    { color: #b91c1c !important; }
.widget-header.soft-red .icon-badge        { background-color: #ef4444 !important; }

.widget-header.soft-teal   { background-color: #ccfbf1 !important; color: #0f766e !important; }
.widget-header.soft-teal .widget-caption   { color: #0f766e !important; }
.widget-header.soft-teal .icon-badge       { background-color: #14b8a6 !important; }

.widget-header.soft-slate  { background-color: #e2e8f0 !important; color: #334155 !important; }
.widget-header.soft-slate .widget-caption  { color: #334155 !important; }
.widget-header.soft-slate .icon-badge      { background-color: #64748b !important; }

/* --- Same soft-* classes, extended to stat cards (.databox-right + .databox-stat),
   e.g. Profile.aspx Gross Earning / Deduction / Net Pay. Usage:
     <div class="databox-right soft-green bordered">
         <span class="databox-number">MYR 0.00</span>
         <div class="databox-text">Label</div>
         <div class="databox-stat radius-bordered"><i class="stat-icon fa fa-plus"></i></div>
     </div>
   --- */
.databox-right[class*="soft-"] .databox-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.18);
}
.databox-right[class*="soft-"] .databox-stat .stat-icon {
    color: #fff !important;
    font-size: 13px;
}

.databox-right.soft-cyan   { background-color: #c4eefa !important; }
.databox-right.soft-cyan .databox-number, .databox-right.soft-cyan .databox-text   { color: #0891b2 !important; }
.databox-right.soft-cyan .databox-stat    { background-color: #06b6d4 !important; }

.databox-right.soft-indigo { background-color: #dde1fb !important; }
.databox-right.soft-indigo .databox-number, .databox-right.soft-indigo .databox-text { color: #4338ca !important; }
.databox-right.soft-indigo .databox-stat  { background-color: #6366f1 !important; }

.databox-right.soft-amber  { background-color: #fde9b8 !important; }
.databox-right.soft-amber .databox-number, .databox-right.soft-amber .databox-text { color: #b45309 !important; }
.databox-right.soft-amber .databox-stat   { background-color: #f59e0b !important; }

.databox-right.soft-orange { background-color: #ffdcc9 !important; }
.databox-right.soft-orange .databox-number, .databox-right.soft-orange .databox-text { color: #c2410c !important; }
.databox-right.soft-orange .databox-stat  { background-color: #f4511e !important; }

.databox-right.soft-green  { background-color: #dcfce7 !important; }
.databox-right.soft-green .databox-number, .databox-right.soft-green .databox-text { color: #15803d !important; }
.databox-right.soft-green .databox-stat   { background-color: #22c55e !important; }

.databox-right.soft-rose   { background-color: #fce7f3 !important; }
.databox-right.soft-rose .databox-number, .databox-right.soft-rose .databox-text   { color: #be185d !important; }
.databox-right.soft-rose .databox-stat    { background-color: #ec4899 !important; }

.databox-right.soft-purple { background-color: #ede9fe !important; }
.databox-right.soft-purple .databox-number, .databox-right.soft-purple .databox-text { color: #6d28d9 !important; }
.databox-right.soft-purple .databox-stat  { background-color: #8b5cf6 !important; }

.databox-right.soft-blue   { background-color: #dbeafe !important; }
.databox-right.soft-blue .databox-number, .databox-right.soft-blue .databox-text   { color: #1d4ed8 !important; }
.databox-right.soft-blue .databox-stat    { background-color: #3b82f6 !important; }

.databox-right.soft-red    { background-color: #fee2e2 !important; }
.databox-right.soft-red .databox-number, .databox-right.soft-red .databox-text     { color: #b91c1c !important; }
.databox-right.soft-red .databox-stat     { background-color: #ef4444 !important; }

.databox-right.soft-teal   { background-color: #ccfbf1 !important; }
.databox-right.soft-teal .databox-number, .databox-right.soft-teal .databox-text   { color: #0f766e !important; }
.databox-right.soft-teal .databox-stat    { background-color: #14b8a6 !important; }

.databox-right.soft-slate  { background-color: #e2e8f0 !important; }
.databox-right.soft-slate .databox-number, .databox-right.soft-slate .databox-text { color: #334155 !important; }
.databox-right.soft-slate .databox-stat   { background-color: #64748b !important; }

/* --- A third, more refined recipe: white card + colored left accent stripe +
   small soft tinted icon circle (icon colored, not solid) + muted label +
   bold colored value. Loosely inspired by BpoHub's bordered summary cards,
   but softer/more premium-looking rather than a literal copy.
   Usage:
     <div class="soft-stat soft-green">
         <div class="soft-stat-label"><span class="soft-stat-icon"><i class="fa-solid fa-plus"></i></span>Label</div>
         <div class="soft-stat-value">MYR 0.00</div>
     </div>
   --- */
.soft-stat {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    padding: 12px 14px;
}
.soft-stat .soft-stat-label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    color: #8a94a6;
    margin-bottom: 6px;
}
.soft-stat .soft-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 6px;
    font-size: 10px;
}
.soft-stat .soft-stat-value {
    position: relative;
    z-index: 1;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

/* Decorative two-tone curvy shape, bottom-right corner only — two overlapping
   circles at different sizes/opacity (per soft-* color below), sitting behind
   the text (z-index:0 vs label/value's z-index:1). Pure CSS, no markup change. */
.soft-stat::before,
.soft-stat::after {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}
.soft-stat::before { width: 74px; height: 74px; right: -25px; bottom: -29px; }
.soft-stat::after  { width: 42px; height: 42px; right: -10px; bottom: -14px; }

/* Opt-out: add class "no-shape" alongside soft-stat/soft-* to turn the
   two-tone corner circles off for a specific card, e.g.:
   <div class="soft-stat soft-green no-shape"> — background/icon/label/value
   styling is unaffected, only the decorative shape is removed. */
.soft-stat.no-shape::before,
.soft-stat.no-shape::after {
    content: none;
}

/* Smaller still on narrow screens, so it doesn't overwhelm the shrunk card */
@media (max-width: 767px) {
    .soft-stat::before { width: 52px; height: 52px; right: -18px; bottom: -20px; }
    .soft-stat::after  { width: 30px; height: 30px; right: -7px; bottom: -9px; }
}

.soft-stat.soft-cyan   { background: #e2f6fd; }
.soft-stat.soft-cyan .soft-stat-icon  { background: rgba(6,182,212,.12); color: #0891b2; }
.soft-stat.soft-cyan .soft-stat-value { color: #0891b2; }
.soft-stat.soft-cyan::before { background: rgba(6,182,212,.10); }
.soft-stat.soft-cyan::after  { background: rgba(6,182,212,.20); }

.soft-stat.soft-indigo { background: #eef0fd; }
.soft-stat.soft-indigo .soft-stat-icon  { background: rgba(99,102,241,.12); color: #4338ca; }
.soft-stat.soft-indigo .soft-stat-value { color: #4338ca; }
.soft-stat.soft-indigo::before { background: rgba(99,102,241,.10); }
.soft-stat.soft-indigo::after  { background: rgba(99,102,241,.20); }

.soft-stat.soft-amber  { background: #fef4db; }
.soft-stat.soft-amber .soft-stat-icon  { background: rgba(245,158,11,.14); color: #b45309; }
.soft-stat.soft-amber .soft-stat-value { color: #b45309; }
.soft-stat.soft-amber::before { background: rgba(245,158,11,.10); }
.soft-stat.soft-amber::after  { background: rgba(245,158,11,.22); }

.soft-stat.soft-orange { background: #ffede4; }
.soft-stat.soft-orange .soft-stat-icon  { background: rgba(244,81,30,.12); color: #c2410c; }
.soft-stat.soft-orange .soft-stat-value { color: #c2410c; }
.soft-stat.soft-orange::before { background: rgba(244,81,30,.10); }
.soft-stat.soft-orange::after  { background: rgba(244,81,30,.20); }

.soft-stat.soft-green  { background: #edfdf3; }
.soft-stat.soft-green .soft-stat-icon  { background: rgba(34,197,94,.12); color: #15803d; }
.soft-stat.soft-green .soft-stat-value { color: #15803d; }
.soft-stat.soft-green::before { background: rgba(34,197,94,.10); }
.soft-stat.soft-green::after  { background: rgba(34,197,94,.20); }

.soft-stat.soft-rose   { background: #fdf3f9; }
.soft-stat.soft-rose .soft-stat-icon  { background: rgba(236,72,153,.12); color: #be185d; }
.soft-stat.soft-rose .soft-stat-value { color: #be185d; }
.soft-stat.soft-rose::before { background: rgba(236,72,153,.10); }
.soft-stat.soft-rose::after  { background: rgba(236,72,153,.20); }

.soft-stat.soft-purple { background: #f6f4fe; }
.soft-stat.soft-purple .soft-stat-icon  { background: rgba(139,92,246,.12); color: #6d28d9; }
.soft-stat.soft-purple .soft-stat-value { color: #6d28d9; }
.soft-stat.soft-purple::before { background: rgba(139,92,246,.10); }
.soft-stat.soft-purple::after  { background: rgba(139,92,246,.20); }

.soft-stat.soft-blue   { background: #edf4fe; }
.soft-stat.soft-blue .soft-stat-icon  { background: rgba(59,130,246,.12); color: #1d4ed8; }
.soft-stat.soft-blue .soft-stat-value { color: #1d4ed8; }
.soft-stat.soft-blue::before { background: rgba(59,130,246,.10); }
.soft-stat.soft-blue::after  { background: rgba(59,130,246,.20); }

.soft-stat.soft-red    { background: #fef0f0; }
.soft-stat.soft-red .soft-stat-icon  { background: rgba(239,68,68,.12); color: #b91c1c; }
.soft-stat.soft-red .soft-stat-value { color: #b91c1c; }
.soft-stat.soft-red::before { background: rgba(239,68,68,.10); }
.soft-stat.soft-red::after  { background: rgba(239,68,68,.20); }

.soft-stat.soft-teal   { background: #e5fdf8; }
.soft-stat.soft-teal .soft-stat-icon  { background: rgba(20,184,166,.12); color: #0f766e; }
.soft-stat.soft-teal .soft-stat-value { color: #0f766e; }
.soft-stat.soft-teal::before { background: rgba(20,184,166,.10); }
.soft-stat.soft-teal::after  { background: rgba(20,184,166,.20); }

.soft-stat.soft-slate  { background: #f0f3f7; }
.soft-stat.soft-slate .soft-stat-icon  { background: rgba(100,116,139,.14); color: #334155; }
.soft-stat.soft-slate .soft-stat-value { color: #334155; }
.soft-stat.soft-slate::before { background: rgba(100,116,139,.10); }
.soft-stat.soft-slate::after  { background: rgba(100,116,139,.20); }
/* REUSABLE — SOFT COLOR CARD HEADERS  [END] */

/* ===== INFO CENTER [BEGIN] ===== */

/* Info list layout — remove bullets, flex rows */
[id$="divInfoCenter"] ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
[id$="divInfoCenter"] ul li {
    padding-bottom: 3px;
    line-height: 1.5;
}

/* Icon per li via ::before (ClientIDMode=Static IDs) */
[id$="divInfoCenter"] ul li::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 13px;
    display: inline-block;
    width: 20px;
    text-align: center;
    vertical-align: middle;
    margin-right: 3px;
}
#lblInfoPosition::before { content: "\f133"; color: #16a34a; } /* fa-calendar */
#lblInfoSuperior::before { content: "\f508"; color: #9333ea; } /* fa-user-tie */
#lblInfoRole::before     { content: "\f3ed"; color: #2563eb; } /* fa-shield-halved */
#lblInfoApproval::before { content: "\f0e0"; color: #0284c7; } /* fa-envelope */
#lblInfoVersion::before  { content: "\f005"; color: #d97706; } /* fa-star */
#lblInfoRelease::before,
#lblInfoNotification::before { display: none; }

/* Profile column — center vertically, shift right */
[id$="divInfoCenter"] .row > .col-xs-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 0 0 !important;
}

/* List column — shift right */
[id$="divInfoCenter"] .row > .col-xs-9 {
    padding-left: 10px;
}



/* ===== INFO CENTER [END] ===== */



/* ===== REUSABLE - SOFT TINT BADGES [BEGIN] =====
   Same color bank as the soft-* widget headers. Usage on any page:
   <span class="badge-soft soft-blue">CODE</span>
   <span class="badge-soft soft-green">Active</span>                          */
.badge-soft {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    padding: 3px 9px;
    border-radius: 6px;
    vertical-align: middle;
    white-space: nowrap;
}
.badge-soft.soft-cyan   { background-color: #c4eefa; color: #0891b2; }
.badge-soft.soft-indigo { background-color: #dde1fb; color: #4338ca; }
.badge-soft.soft-amber  { background-color: #fde9b8; color: #b45309; }
.badge-soft.soft-orange { background-color: #ffdcc9; color: #c2410c; }
.badge-soft.soft-green  { background-color: #dcfce7; color: #15803d; }
.badge-soft.soft-rose   { background-color: #fce7f3; color: #be185d; }
.badge-soft.soft-purple { background-color: #ede9fe; color: #6d28d9; }
.badge-soft.soft-blue   { background-color: #dbeafe; color: #1d4ed8; }
.badge-soft.soft-red    { background-color: #fee2e2; color: #b91c1c; }
.badge-soft.soft-teal   { background-color: #ccfbf1; color: #0f766e; }
.badge-soft.soft-slate  { background-color: #e2e8f0; color: #334155; }
.badge-soft.soft-outline { background-color: #fff; color: #64748b; border: 1px solid #e2e8f0; }
/* Larger variant for form/page status badges (e.g. MyLeave application status,
   Emergency). Add alongside: <span class="badge-soft badge-soft-lg soft-amber"> */
.badge-soft.badge-soft-lg {
    font-size: 12.5px;
    padding: 5px 12px;
    border-radius: 7px;
}
/* ===== REUSABLE - SOFT TINT BADGES [END] ===== */

/* ===== TENANT SELECTION [BEGIN] ===== */

/* Search input: rounded, soft-blue focus ring */
#company-search {
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    height: 38px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#company-search:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

/* Note + search + list share one white inner widget box (PaySimulate pattern) */
#divCompanyList {
    margin-top: 10px;
}

/* Company rows (injected by JS): name/detail/badges left, period + headcount
   in a left-aligned column starting near the middle of the row */
#divCompanyList .tenant-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color .12s ease;
}
/* Inset hairline separator (pseudo-element keeps it straight under rounded rows) */
#divCompanyList .tenant-row::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    border-bottom: 1px solid #f1f5f9;
}
#divCompanyList .tenant-row:last-child::after {
    display: none;
}
#divCompanyList .tenant-row-main {
    flex: 0 0 52%;
    min-width: 0;
}
#divCompanyList .tenant-row-title {
    font-size: 13px;
}
#divCompanyList .tenant-row-detail {
    margin-top: 3px;
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#divCompanyList .tenant-dot {
    color: #cbd5e1;
    margin: 0 5px;
}
#divCompanyList .tenant-row-sub {
    display: flex;
    align-items: center;
    gap: 4px 6px;
    flex-wrap: wrap;
    margin-top: 5px;
}
#divCompanyList .tenant-row-facts {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    font-size: 12px;
    color: #64748b;
    text-align: left;
}
#divCompanyList .tenant-row-facts i {
    font-size: 11px;
    color: #94a3b8;
    margin-right: 5px;
}
#divCompanyList .tenant-row:hover {
    background-color: #eff6ff;
}

/* Right chevron cue, slides on hover (flex item, not ::after) */
#divCompanyList .tenant-chevron {
    flex: none;
    font-size: 12px;
    color: #cbd5e1;
    transition: color .12s ease, transform .12s ease;
}
#divCompanyList .tenant-row:hover .tenant-chevron {
    color: #3b82f6;
    transform: translateX(2px);
}

/* Small screens: facts drop below the name, laid out inline */
@media (max-width: 767px) {
    #divCompanyList .tenant-row {
        flex-wrap: wrap;
        gap: 8px 12px;
    }
    /* Zero flex-basis: long names shrink and wrap inside instead of
       pushing the chevron onto its own line */
    #divCompanyList .tenant-row-main {
        flex: 1 1 0;
    }
    #divCompanyList .tenant-row-facts {
        order: 3;
        width: 100%;
        flex: none;
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }
    /* Fixed period column so period + headcount line up across rows */
    #divCompanyList .tenant-row-facts > span:first-child {
        flex: 0 0 175px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Company Group Access rows: green tint to stand out */
#divCompanyList .tenant-row-group {
    background-color: #f0fdf4;
}
#divCompanyList .tenant-row-group:hover {
    background-color: #dcfce7;
}
#divCompanyList .tenant-row-group .tenant-chevron {
    color: #86efac;
}
#divCompanyList .tenant-row-group:hover .tenant-chevron {
    color: #22c55e;
}
#divCompanyList .tenant-row-group .tenant-row-title b,
#divCompanyList .tenant-row-group .tenant-row-title b i {
    color: #15803d;
}

/* Show More: dashed soft-blue outline, fills on hover */
#btnShowMore {
    border-radius: 8px;
    border: 1.5px dashed #93c5fd;
    color: #2563eb;
    background-color: #fff;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease;
}
#btnShowMore:hover,
#btnShowMore:focus {
    background-color: #eff6ff;
    border-style: solid;
    border-color: #3b82f6;
    color: #2563eb;
}

/* ===== TENANT SELECTION [END] ===== */

/* ==========================================================================
   REUSABLE — WORKFLOW PROGRESS CARDS (flow-*)  [BEGIN]
   Rendered by modFlow.GetWorkflowProgress (App_Code\modFlow.vb) into the
   divFlow container on workflow forms (MyLeave, MyProfile, MyClaim, FormEmp,
   PurReqForm, OtReqForm). Soft pastel status cards + arrow connectors +
   bottom-right swoosh accent. Colors follow the soft-* bank above.

   Status variants:
     flow-approved  green  (approved / submitted)
     flow-pending   amber  (current approver; soft glow + hourglass)
     flow-rejected  red
     flow-upnext    slate  (later steps not yet reached)

   Mobile (<=767px): cards stack full-width and the connector arrow rotates
   to point downward. CSS-only — no rebuild needed.
   ========================================================================== */

.flow-steps {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
/* Segment = connector arrow + its card; wraps to a new line as one unit
   so an arrow is never left dangling at the end of a row */
.flow-seg {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.flow-step {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    padding: 5px 9px 9px;
    min-width: 175px;
    flex-shrink: 0;
}
.flow-step p {
    margin: 0;
    position: relative; /* keeps text above the swoosh */
    line-height: 1.35;
}
/* Note: selectors below include .flow-step so their margins beat the
   ".flow-step p { margin: 0 }" reset above (higher specificity) */
.flow-step .flow-label {
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
}
.flow-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 14px;
    flex-shrink: 0;
}
.flow-name {
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap; /* long names widen the box instead of wrapping */
}
.flow-step .flow-date {
    font-size: 11px;
    color: #8b8f98;
    margin-top: 2px;
}
/* Swoosh accent: right side only, low, tapers out near the middle */
.flow-wave {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 58%;
    height: 28px;
}
.flow-arrow {
    color: #b0b0b0;
    font-size: 14px;
    flex-shrink: 0;
}

/* --- Variants --- */
.flow-approved { background-color: #f0fdf4; border: 1px solid #d1f0dd; }
.flow-approved .flow-label { color: #16a34a; }
.flow-approved .flow-ic    { background-color: #dcfce7; color: #16a34a; }
.flow-approved .flow-name  { color: #15803d; }
.flow-approved .flow-wave .w1 { fill: #bbf7d0; }
.flow-approved .flow-wave .w2 { fill: #86efac; }

.flow-pending { background-color: #fffdf5; border: 1.5px solid #f59e0b; animation: flowglow 1.6s infinite; }
.flow-pending .flow-label { color: #d97706; }
.flow-pending .flow-ic    { background-color: #fde9b8; color: #d97706; }
.flow-pending .flow-name  { color: #b45309; }
.flow-pending .flow-wave .w1 { fill: #fde9b8; }
.flow-pending .flow-wave .w2 { fill: #fcd34d; }

.flow-rejected { background-color: #fef2f2; border: 1px solid #f5d5d5; }
.flow-rejected .flow-label { color: #dc2626; }
.flow-rejected .flow-ic    { background-color: #fee2e2; color: #dc2626; }
.flow-rejected .flow-name  { color: #b91c1c; }
.flow-rejected .flow-wave .w1 { fill: #fecaca; }
.flow-rejected .flow-wave .w2 { fill: #fca5a5; }

.flow-upnext { background-color: #f8fafc; border: 1px solid #e5eaf0; }
.flow-upnext .flow-label { color: #64748b; }
.flow-upnext .flow-ic    { background-color: #e2e8f0; color: #64748b; }
.flow-upnext .flow-name  { color: #64748b; }
.flow-upnext .flow-wave .w1 { fill: #e2e8f0; }
.flow-upnext .flow-wave .w2 { fill: #cbd5e1; }

/* Pulsing glow for the step awaiting action (replaces blinking-status) */
@keyframes flowglow {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, .65); }
    70%  { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* Narrow screens: stack vertically, arrow points down to the next approver */
@media (max-width: 767px) {
    .flow-steps {
        flex-direction: column;
        align-items: stretch;
    }
    .flow-seg {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .flow-step {
        min-width: 0;
        width: 100%;
    }
    /* On narrow screens the box can't grow sideways, so let long names wrap */
    .flow-step .flow-name {
        white-space: normal;
    }
    .flow-arrow {
        align-self: center;
        transform: rotate(90deg);
        margin: 0;
    }
}

/* ===== WORKFLOW PROGRESS CARDS [END] ===== */

/* ==========================================================================
   REUSABLE — EQUAL-HEIGHT ROW  [BEGIN]
   Add "row-eq-height" beside "row" to make side-by-side widget columns the
   same height (e.g. OtReqForm Option | Workflow). The inner white
   .widget-body stretches to fill. Bootstrap column widths still apply;
   stacking on mobile is unaffected.
   ========================================================================== */
.row-eq-height {
    display: flex;
    flex-wrap: wrap;
}
.row-eq-height > [class*="col-"] {
    display: flex;
    flex-direction: column;
}
.row-eq-height > [class*="col-"] > .widget {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.row-eq-height > [class*="col-"] > .widget > .widget-body {
    flex: 1;
}
/* Column with several stacked widgets (e.g. MyClaim General Info over
   Workflow): add "col-fill-last" to the column so only the LAST widget
   stretches to fill the leftover height; the others keep natural height */
.row-eq-height > .col-fill-last > .widget {
    flex: 0 0 auto;
}
.row-eq-height > .col-fill-last > .widget:last-child {
    flex: 1 1 auto;
}
/* ===== EQUAL-HEIGHT ROW [END] ===== */