/*============================
 [Table of CSS]

1. General
2. Table
3. Helper Class
4. Bootstrap Classes
5. Header
6. Sidebar
7. Content
8. Dashboard
9. Login
10. Nav tabs
11. Focus Label
12. Notifications
13. UI Kit
14. Error
15. Lock Screen
16. User Logo
17. Arabic
18. Responsive
19. temp
========================================*/

/*-----------------
    0a. Enterprise Design Tokens — Fylix-aligned (cx-* system)
-----------------------*/

:root {
    /* ── Surfaces ── */
    --cx-bg:                  #F8FAFC;         /* page background base (Fylix: #f8fafc) */
    --cx-surface:             #FFFFFF;          /* card / panel background */
    --cx-surface-muted:       #F1F5F9;          /* inset / alternate row */
    --cx-border:              #E2E8F0;          /* standard border */
    --cx-border-subtle:       #F1F5F9;          /* dividers — matches Fylix card border */

    /* ── Typography ── */
    --cx-text-primary:        #0F172A;          /* near-black — Fylix heading/body */
    --cx-text-secondary:      #2E2F38;          /* secondary labels — Fylix table header text */
    --cx-text-muted:          #64748B;          /* muted — Fylix KPI card label */
    --cx-text-disabled:       #94A3B8;          /* disabled state */
    --cx-text-inverse:        #FFFFFF;          /* text on dark bg */

    /* ── Brand (Fylix navy/blue palette) ── */
    --cx-brand:               #5797B2;          /* Fylix primary brand blue */
    --cx-brand-dark:          #134960;          /* Fylix medium navy — hover/pressed */
    --cx-brand-darker:        #071B24;          /* Fylix primary dark navy — sidebar bg */
    --cx-brand-hover:         #134960;
    --cx-brand-active:        #071B24;
    --cx-brand-tint:          #DCF4FF;          /* Fylix cyan tint — table headers, icon bg */

    /* ── Sidebar (CxHealth brand-aligned) ── */
    --cx-sidebar-bg:          var(--brand-navy-dark);      /* deep brand navy #172554 */
    --cx-sidebar-hover:       var(--teal-glow-lg);      /* rgba(30,58,138,0.25) */
    --cx-sidebar-sub:         rgba(15, 26, 64, 0.60);    /* deeper navy for submenu */
    --cx-sidebar-text:        rgba(255,255,255,0.55);    /* soft white inactive text */
    --cx-sidebar-text-active: #FFFFFF;
    --cx-sidebar-accent:      var(--brand-navy);   /* #3b82f6 brand blue accent */

    /* ── Status / Clinical (muted — not traffic-signal vivid) ── */
    --cx-status-normal:       #2E6B51;          /* muted sage green text */
    --cx-status-normal-bg:    #EEF5F1;          /* neutral green-grey surface */
    --cx-status-normal-border:#B5CCBF;
    --cx-status-abnormal:     #8A6234;          /* muted warm brown-amber text */
    --cx-status-abnormal-bg:  #F5F0E5;          /* neutral warm beige surface */
    --cx-status-abnormal-border:#C9B98C;
    --cx-status-critical:     #8B4040;          /* muted dusty rose-red text */
    --cx-status-critical-bg:  #F6EDED;          /* barely-pink neutral surface */
    --cx-status-critical-border:#CCAAAA;

    /* ── Elevation / Shadow (Fylix-style subtle) ── */
    --cx-shadow-xs:           0 1px 2px rgba(15,23,42,0.04);
    --cx-shadow-sm:           0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    --cx-shadow-md:           0 4px 8px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04);
    --cx-shadow-lg:           0 10px 20px rgba(15,23,42,0.06), 0 4px 8px rgba(15,23,42,0.04);

    /* ── Shape (Fylix) ── */
    --cx-radius-xs:           4px;
    --cx-radius-sm:           8px;             /* Fylix button / input radius */
    --cx-radius-md:           12px;            /* Fylix card radius */
    --cx-radius-lg:           16px;

    /* ── Table header (Fylix cyan tint pattern) ── */
    --cx-table-header-bg:     #DCF4FF;          /* Fylix table header background */
    --cx-table-header-text:   #2E2F38;          /* Fylix table header text color */
    --cx-table-header-size:   11px;
    --cx-table-header-spacing:0.6px;

    /* ── Transitions ── */
    --cx-transition:          0.15s ease-in-out;
    --cx-transition-slow:     0.25s ease-in-out;
}

/*-----------------
	0. CSS Custom Properties (Brand Palette)
-----------------------*/

:root {
	--rpm-sidebar-bg:          #1e4a8c;   /* sidebar background */
	--rpm-sidebar-hover-bg:    #2d5faa;   /* sidebar item hover background */
	--rpm-sidebar-sub-bg:      #163d78;   /* submenu background */
	--rpm-sidebar-text:        rgba(232, 231, 231, 0.9);
	--rpm-sidebar-text-active: #ffffff;
	--rpm-sidebar-accent:      #E09227;   /* orange left-border accent */
	--rpm-header-shadow:       0 2px 6px rgba(0, 0, 0, 0.08);
	--rpm-transition-fast:     0.18s ease-in-out;
}

/*-----------------
	1. General
-----------------------*/

html {
	height: 100%;
}
body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: 14px;
	color: var(--cx-text-primary);
	overflow-x: hidden;
	height: 100%;
	background-color: var(--cx-bg);
	background-image: radial-gradient(circle, rgba(87,151,178,0.04) 1px, transparent 1px);
	background-size: 20px 20px;
	font-feature-settings: "tnum" 1, "kern" 1;
}

body.signout {
	background: url(../img/body_bg.png) right 44% #224f99e3;
	background-size: 142%;
}

.en .slimScrollBar {
	right: 1px;
	left: inherit;
}

a:hover,
a:active,
a:focus {
	text-decoration: none;
	color: var(--brand-navy);
	outline: none;
}
.form-control {
	border-radius: 0;
	box-shadow: none;
	padding: 0.469rem 0.75rem;
	border-color: #eaeaea;
	font-size: 14px;
	min-height: 40px;
}
.form-control:focus {
	border-color: var(--brand-navy);
	box-shadow: none;
	outline: 0 none;
}

.form-group-columns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
}

span.count {
    display: none;
}

.form-group-actions {
	text-align: center;
}

.form-group-actions .form-group {
	margin: 0px 10px 20px;
	display: inline-block;
}

.form-group-actions .form-group button {
    min-width: 130px;
}

.form-group-columns .form-group + .form-group {
	margin-left:10px; 
}

#follwUpDiv .form-group-columns .form-group + .form-group {
	margin-left:150px; 
}

#follwUpDiv .form-group-columns {
	width: 80%;
	margin: 0 auto;
}

.form-group-columns .form-group {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-width: 460px;
}

.page-header__head {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 15px;
}

.page-header__title {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.form-group-columns .form-group button {
	width: 100%;
}

a {
	color: var(--brand-navy);
}
input,
button,
a {
	transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
}
input,
button {
	outline: none;
}
input[type="file"] {
	height: auto;
	padding: 6px 0.75rem;
}
input[type=text],
input[type=password] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

[type="date"].form-control {
  background:#FAFBFC url("../img/calendar.svg") 97% 50% no-repeat ;
}
[type="date"]::-webkit-inner-spin-button {
  display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

textarea.form-control {
	resize: vertical;
}
.navbar-nav > li {
	float: left;
}
.form-group {
	margin-bottom: 20px;
}
.display-block {
	display: block;
}
.btn.rounded {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}
.btn.focus,
.btn:focus {
	box-shadow: inherit !important;
}
.list-group-item {
	border: 1px solid #eaeaea;
}

.toggle-password {
	right: 0px;
	margin: -29px 5px 10px 20px;
	position: absolute;
}

.eye-icon {
	background: url("../img/eye.svg") no-repeat;
	width: 27px;
	height: 27px;
	cursor: pointer;
}

.eye-icon.eyeicon-slash {
	background: url("../img/eye-crossed.svg") no-repeat;
}

.hide {
	display: none;
}

label.asterik:after, p.asterik:after {
    content: "*";
    color: red;
    padding: 0px 2px;
    font-size: 11pt;
    font-weight: 700;
}

.alert.alert-success, .alert.alert-danger {
	text-align: center;
}

.pageSubtitle{
	font-size: 15px;
    font-weight: normal;
    color: var(--brand-navy);
    padding-bottom: 6px;
    border-bottom: 2px solid var(--brand-navy);
}
.form-row {
	display: flex;
}
.en .form-row .form-group:first-child {
    margin-right: 105px;
}

.en .form-row {
	margin-right: 5px;
}

.ar .form-row .form-group:first-child {
    margin-left: 105px;
}
.ar .form-row {
	margin-left: 5px;
}

/*-----------------
	2. Table
-----------------------*/

.table, table.dataTable>tbody>tr.child ul.dtr-details {
	width: 100% !important;
}

/* ── DataTables: Fylix header pattern ── */
table.dataTable thead th,
table.dataTable thead td {
    background-color: var(--cx-table-header-bg);
    color: var(--cx-table-header-text);
    font-size: var(--cx-table-header-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--cx-table-header-spacing);
    border-bottom: 1px solid var(--cx-border);
    padding: 14px 12px;
}

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    background-color: var(--cx-table-header-bg);
}

/* ── DataTables: body rows ── */
table.dataTable tbody td {
    padding: 12px 12px;
    vertical-align: middle;
    color: var(--cx-text-primary);
    font-size: 13px;
    border-bottom: 1px solid var(--cx-border-subtle);
}

/* ── Row hover ── */
table.dataTable tbody tr:hover > td {
    background-color: var(--cx-surface-muted);
}

/* ── Suppress Bootstrap 5 striped zebra ── */
table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    --bs-table-bg-type: transparent;
}

/* ── Border cleanup ── */
table.dataTable.table-bordered,
table.dataTable.table-bordered th,
table.dataTable.table-bordered td {
    border-color: var(--cx-border);
}

/* ── Pagination ── */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: var(--cx-text-inverse) !important;
    border-radius: var(--cx-radius-sm);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--cx-brand-tint);
    border-color: var(--cx-border);
    color: var(--brand-navy) !important;
    border-radius: var(--cx-radius-sm);
}

/* ── Status pill badges ── */
.cx-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.cx-badge-critical {
    background: var(--cx-status-critical-bg);
    color: var(--cx-status-critical);
    border: 1px solid var(--cx-status-critical-border);
}
.cx-badge-abnormal {
    background: var(--cx-status-abnormal-bg);
    color: var(--cx-status-abnormal);
    border: 1px solid var(--cx-status-abnormal-border);
}
.cx-badge-normal {
    background: var(--cx-status-normal-bg);
    color: var(--cx-status-normal);
    border: 1px solid var(--cx-status-normal-border);
}

/*-----------------
	3. Helper Class
-----------------------*/

/* ── Brand utility classes ── */
.text-brand-teal   { color: var(--brand-teal); }
.text-brand-navy   { color: var(--brand-navy); }
.text-brand-navy-dark { color: var(--brand-navy-dark);}
.bg-brand-teal     { background-color: var(--brand-teal); }
.bg-brand-navy     { background-color: var(--brand-navy); }
.bg-brand-navy-dark     { background-color: var(--brand-navy-dark); }
.border-brand-teal { border-color: var(--brand-teal); }
.border-brand-navy { border-color: var(--brand-navy); }
.border-brand-navy-dark { border-color: var(--brand-navy-dark); }

.m-r-5 {
	margin-right: 5px !important;
}
.m-r-10 {
	margin-right: 10px !important;
}
.m-l-5 {
	margin-left: 5px !important;
}
.m-t-0 {
	margin-top: 0 !important;
}
.m-t-10 {
	margin-top: 10px !important;
}
.m-t-20 {
	margin-top: 20px !important;
}
.m-t-30 {
	margin-top: 30px !important;
}
.m-t-50 {
	margin-top: 50px !important;
}
.m-b-10 {
	margin-bottom: 10px !important;
}
.m-b-20 {
	margin-bottom: 20px !important;
}
.m-b-30 {
	margin-bottom: 30px !important;
}
.w-40 {
	width: 40px;
}

.min-w-170 {
	min-width: 170px;
}

.p-t-30 {
	padding-top: 30px !important;
}
.block {
	display: block !important;
}

.pos_rel {
	position: relative;
}
.text-ellipsis {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.text-muted-light {
	color: #aaa;
}
.card-box {
	background-color: #fff;
	border-radius: 4px;
	margin-bottom: 30px;
	padding: 20px;
	position: relative;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}
.card-title {
	color: #333;
	font-size: 16px;
	margin-bottom: 20px;
}
.page-title {
	color: #565656;
	font-size: 21px;
	font-weight: normal;
	margin-bottom: 20px;
}
.page-sub-title {
	color: #565656;
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 20px;
}
.cal-icon:after {
	background: transparent url("../img/calander.png") no-repeat scroll 0 0;
	bottom: 0;
	content: "";
	display: block;
	height: 19px;
	margin: auto;
	position: absolute;
	right: 15px;
	top: 0;
	width: 17px;
}
.cal-icon {
	position: relative;
	width: 100%;
}

.blur {
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-o-filter: blur(3px);
	-ms-filter: blur(3px);
	filter: blur(3px);
}
.btn {
	font-size: 0.875rem;
}

.success, .warning {
	display: block;
	text-align: center;
	background-image: url(../img/success.svg);
	height: 130px;
	background-repeat: no-repeat;
	background-size: 48%;
	background-position: center;
	margin: -9px 0px 10px;
}
 .warning {
	background-image: url(../img/warning.svg);
 }
 
.form-group.tel_no label {
 	display: block;
}

.form-group.tel_no .code{
	width: 16%;
	display: inline-block;
	padding: 4px
	
}
.en .form-group.tel_no .code{
    margin-right: 4px;
}

.form-group.tel_no .telNo{
	width: 82%;
	display: inline-block;
}
.count {
	position: absolute;
    top: 0px;
    background: var(--brand-navy);
    color: var(--cx-text-inverse);
    padding: 2px 8px;
    margin-left: -10px;
    border-radius: 7px 0px 0px;
}

/*-----------------
	4. Bootstrap Classes
-----------------------*/
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.vaildation input:valid {
	border-color: #0DAC0D; /* green input*/
}
.vaildation input:invalid {
	border-color: #9F190E; /* red input */
}

.form-control {
	border: 1px solid var(--cx-border);
	background: var(--cx-surface-muted);
	border-radius: var(--cx-radius-sm);
}

.btn-primary, .ui-dialog-buttonset .ui-button.btn-primary:hover, .ui-dialog-buttonset .ui-button.btn-primary:focus {
	background-color: var(--brand-navy);
    border-color: var(--brand-navy);
    border-radius: var(--cx-radius-sm);
    min-width: 100px;
    padding: 10px;
    color: var(--cx-text-inverse);
    font-weight: 500;
    transition: background-color var(--cx-transition), border-color var(--cx-transition);
}

.btn-primary:hover, .btn-primary:focus {
	background-color: var(--cx-brand-hover);
	border-color: var(--cx-brand-hover);
}

a:not([href]):not([tabindex]).btn-primary {
	color: #FFF;
}

.icons_rtc {
	right: 7px;
	position: absolute;
	top: 2px;
}

.btn {
	font-weight: 500;
}

.btn-secondary, .ui-dialog-buttonset .ui-button.btn-secondary:hover, .ui-dialog-buttonset .ui-button.btn-secondary:focus {
	background-color: var(--cx-surface);
    border-color: var(--brand-navy);
    border-radius: var(--cx-radius-sm);
    color: var(--brand-navy);
    min-width: 100px;
    padding: 10px;
    font-weight: 500;
    transition: background-color var(--cx-transition), border-color var(--cx-transition);
}

.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--cx-brand-active);
    border-color: var(--cx-brand-active);
}

.content.col {
    margin: 0px 15px;
}

.modal-content {
	border: none;
}

.modal-content button.close {
	top: 3px;
	right: 3px;
	background: url(../img/close.svg);
	z-index: 1001;
	position: absolute;
	width: 21px;
	opacity: 1;
	height: 21px;
}

.modal-header {
	background: var(--brand-navy);
	padding: 10px;
}

.modal-title {
	margin: 0 auto;
	color: #FFF;
}

.modal-footer {
	padding: 10px 0px 0px;
	border-top: none;
}

dd {
	margin-right: 0px;
}
.content_title {
	color: var(--brand-navy);
	font-weight: bold;
	font-size: 17px;
	border-bottom: 1px solid var(--brand-navy);
	padding-bottom: 10px;
	margin-bottom: 10px;
	margin-top: 0px;
}

.page_title {
	color: #43425D;
	font-size: 28px;
	padding: 5px 0px;
	margin: 0px 0px 10px 0px;
	font-weight: normal;
}

.ui-autocomplete {
	max-height: 300px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 1000 !important;
} 
.ui-autocomplete {
	max-height: 300px;
	overflow-y: auto; /* prevent horizontal scrollbar */
	overflow-x: hidden; /* add padding to account for vertical scrollbar */
	z-index:1000 !important;
}

.ui-widget-overlay {
	background: #000000c9;
	opacity: 0.6;
}

.ui-dialog .ui-dialog-titlebar-close {
	border: none;
	margin: -17px 0 0 0;
	padding: 0px;
	background: none;
	outline: none;
}

.ui-dialog .ui-dialog-buttonpane {
	margin-top: 0px;
	border: none;
}

.ui-button .ui-icon.ui-icon-closethick, .ui-button:hover .ui-icon.ui-icon-closethick {
	background: url(../img/close.svg);
	width: 21px;
	height: 21px;
}

.smallDialog {
	
}

.mediumDialog {
	min-width: 450px
}

.nav-tabs {
	border-bottom:none;
}

.content .nav-tabs .nav-link {
	border: none;
	padding: 10px 0px;
    margin: 0px 7px;
}

.content .nav-tabs .nav-item.show .nav-link, .content .nav-tabs .nav-link.active {
	border-bottom: 2px solid var(--brand-navy);
}

.content .nav-tabs .nav-link:focus, .content .nav-tabs .nav-link:hover, .content .nav-tabs .nav-link:focus,.content .nav-tabs .nav-link:hover {
    border-bottom: 2px solid var(--brand-navy);
}

.tab-content {
	padding-top: 5px;
}
/*-----------------
	5. Header
-----------------------*/

.header {
	background-color: #FFF;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1000;
	height: 50px;
	box-shadow: var(--cx-shadow-sm);
	border-bottom: 1px solid var(--cx-border-subtle);
}
.header .header-left {
	float: left;
	height: 50px;
	padding: 0 20px;
	position: relative;
	text-align: center;
	width: 230px;
	z-index: 1;
}
.logo {
	align-items: center;
	display: flex;
	height: 50px;
	justify-content: center;
}

a.logo:hover {
	text-decoration: none;
}
.logo span {
	color: #FFF;
	font-size: 18px;
	font-weight: 500;
	margin-left: 10px;
}

.logo img {
	height: 8rem;
	margin-top: 1rem;
}

.header .navbar-nav .badge {
	position: absolute;
	right: 7px;
	top: 4px;
}
.header .dropdown-menu > li > a {
	position: relative;
}
.header .dropdown-toggle:after {
	display: none;
}
.header .has-arrow .dropdown-toggle:after {
	display: inline-block;
}
.en .lang-dropdown .dropdown-menu {
	text-align: right;
	right: 0;
	left: auto;
}

.en .dropdown.lang-dropdown {
	border-left: 1px solid #CCC;
}

.ar .dropdown.lang-dropdown {
	border-right: 1px solid #CCC;
}

.lang-dropdown .dropdown-menu .flag {
	padding: 5px 0px;
	margin: 0px 3px;
}

.page-title-box {
	border-radius: 0;
	height: 50px;
	margin-bottom: 0;
	padding: 14px 20px;
}
.page-title-box h3 {
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	margin: 0;
}
.user-menu {
	margin: 0;
	position: relative;
	z-index: 99;
}
ul.user-menu li {
	margin: 8px 0px;
}

.user-menu.nav > li > a {
	color: #000;
	font-size: 16px;
	line-height: 35px;
	padding: 0 12px;
	height: 35px;
	display: inline-block;
	transition: background-color var(--cx-transition);
}

.user-menu.nav > li > a:hover,
.user-menu.nav > li > a:focus {
	background-color: rgba(0, 0, 0, 0.05);
	border-radius: 4px;
}
.user-img {
	display: inline-block;
	position: relative;
}
.header .user-img img {
	width: 32px;
}
.user-img .status {
	border: 2px solid #fff;
	bottom: 0;
	height: 10px;
	position: absolute;
	right: 0;
	width: 10px;
}
.user-menu .user-img .status {
	bottom: 10px;
}
.user-menu .dropdown-menu {
	min-width: 136px;
}
.user-menu .bg-primary {
	background-color: #009efb !important;
}
.status {
	background-color: #ccc;
	border-radius: 50%;
	display: inline-block;
	height: 10px;
	width: 10px;
}
.status.online {
	background-color: #55ce63;
}
.status.offline {
	background-color: #f62d51;
}
.status.away {
	background-color: #faa937;
}

/*-----------------
	6. Sidebar — rules moved to sidebar.css
-----------------------*/

.mobile-user-menu {
	color: #fff;
	display: none;
	font-size: 24px;
	height: 50px;
	line-height: 50px;
	padding: 0 20px;
	position: absolute;
	right: 0;
	text-align: right;
	top: 0;
	width: 81px;
	z-index: 10;
}
.mobile-user-menu > a {
	color: var(--brand-navy);
	padding: 0;
}
.mobile-user-menu > a:hover {
	opacity: 0.9;
}
.mobile-user-menu > .dropdown-menu > a {
    line-height: 23px;
}

.mobile-user-menu .dropdown.lang-dropdown {
    display: inline-block;
}

.en .mobile-user-menu .dropdown.lang-dropdown {
	padding-left: 5px;
}

.ar .mobile-user-menu .dropdown.lang-dropdown {
	padding-right: 5px;
}

.mobile-user-menu .dropdown.lang-dropdown img {
	margin-top: -5px;
}

.profile-rightbar {
	display: none !important;
	color: #009efb;
	font-size: 26px;
	margin-left: 15px;
}
.fixed-sidebar-right {
	position: fixed;
	top: 60px;
	right: 0;
	width: 300px;
	margin-right: -300px;
	bottom: 0;
	z-index: 101;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.mobile_btn {
	display: none;
}

.header-left span {
	color: #FFF;
	font-size: 14px;
	text-transform: uppercase;
	padding: 14px 5px;
	display: block;
	text-align: center;
}

#vitalsFieldGroupDiv1 .vitalRemove, #activitiesFieldGroup1 .activitiesRemove {
	display: none;
}

/*---------- DataTable Icons ---------- */
.dtIcon {
	font-size: 16px;
    width: 14px;
    height: 14px;
    display: inline-block;
    background-image: url("../img/dticons.png");
    margin: 0px 3px;
}

.dtIcon.activate {
	background-position: -3px -0px;
}
.dtIcon.deactivate	{
	background-position: -3px -15px;
}
.dtIcon.edit {
	background-position: -3px -32px;
}
.dtIcon.view {
	background-position: -3px -49px;
}

.dataTables_filter input {
	background: url(../img/search.svg) no-repeat 2px center;
	padding: 7px 20px;
	line-height: 30px;
}

.dataTables_filter input:focus {
	background: url(../img/search-focus.svg) no-repeat 2px center;
}


/*-----------------
	7. Content
-----------------------*/

.page-wrapper {
	left: 0;
	margin-left: 230px;
	position: relative;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
	background: var(--cx-bg);
	height: 100%;
}

#page_content {
	margin: 0;
}

#page_content .content:not(.list) {
	background: var(--cx-surface);
	padding: 15px 10px;
	margin-bottom: 30px;
	border-radius: var(--cx-radius-md);
	box-shadow: var(--cx-shadow-md);
	border: 1px solid var(--cx-border-subtle);
}

/*-----------------
	8. Dashboard
-----------------------*/
select#vitalType {
	margin-bottom: 5px;
}

.dashboard-list {
	margin: 0;
    margin-top: 16px;
	padding: 0;
	list-style-type: none;
	min-height: 330px;
}

.dashboard-list li {
	display: inline-block;
	width: 33%;
	padding-right: 10px;
}

.dashboard-list li .list.content{
    padding: 12px;
    margin: 0px;
    border: 1px solid var(--cx-border-subtle);
    border-radius: var(--cx-radius-sm);
    font-size: 12px;
    color: var(--cx-text-muted);
    transition: box-shadow var(--cx-transition);
}
.dashboard-list li .list.content:hover {
    box-shadow: var(--cx-shadow-sm);
}

.dashboard-list li .list.content .user_info {
    font-size: 14px;
}

.en .dashboard-list li .list.content.NOR {
    border-left: 4px solid var(--cx-status-normal);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.en .dashboard-list li .list.content.CRI {
    border-left: 4px solid var(--cx-status-critical);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.en .dashboard-list li .list.content.ABN {
    border-left: 4px solid var(--cx-status-abnormal);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.ar .dashboard-list li .list.content.NOR {
    border-right: 4px solid var(--cx-status-normal);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.ar .dashboard-list li .list.content.CRI {
    border-right: 4px solid var(--cx-status-critical);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.ar .dashboard-list li .list.content.ABN {
    border-right: 4px solid var(--cx-status-abnormal);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.list.content .user_info span {
	float: right;
}

.list.content .row {
	margin: 0px -10px;
}

.list.content .row span {
	font-weight: bold;
}

i.vital-icons {
    display: inline-block;
    min-height: 17px;
    width: 15px;
    background-repeat: no-repeat;
    vertical-align: middle;
}

i.vital-icons.ABL {
    background-image: url(../img/normal_low.svg);
}

i.vital-icons.ABH {
    background-image: url(../img/normal_high.svg);
}

i.vital-icons.CRL {
    background-image: url(../img/crictal_low.svg);
}

i.vital-icons.CRH {
    background-image: url(../img/crictal_high.svg);
}

i.vital-icons.NOR {
    background-image: url(../img/normal.svg);
}
.dashboard-list li p {
	margin-top: 2px;
	margin-bottom: 2px;
	white-space: nowrap;
}
.dashboard-list li .col {
	padding: 0px 10px
}

.patient-counts, .followup-counts  {
	background: var(--brand-navy);
	color: #FFF;
	border-radius: 50%;
	padding: 5px;
	margin-left: 4px;
}

.ar .patient-counts, .ar .followup-counts {
	padding: 0px 5px;
	margin-right: 4px;
}

.ar .nav-tabs {
	padding-right: 10px;
}

.dashboard-list .dataTables_length, .dashboard-list .dataTables_filter {
	width: 50%;  
}

/* ── KPI Cards (Fylix pattern) ── */
.cx-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

/* Gap between KPI row and search/content area */
.cx-kpi-grid + .row,
.cx-kpi-grid + .content,
.cx-kpi-grid + div {
    margin-top: 8px;
}
.cx-kpi-card {
    background: var(--cx-surface);
    border-radius: var(--cx-radius-md);
    box-shadow: var(--cx-shadow-sm);
    border: 1px solid var(--cx-border-subtle);
    padding: 20px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.cx-kpi-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: var(--cx-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}
.cx-kpi-body {}
.cx-kpi-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--cx-text-primary);
    line-height: 1;
}
.cx-kpi-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--cx-text-muted);
    margin-top: 4px;
}
.cx-kpi-total    .cx-kpi-icon { background: var(--cx-brand-tint);           color: var(--brand-navy);           }
.cx-kpi-critical .cx-kpi-icon { background: var(--cx-status-critical-bg);   color: var(--cx-status-critical); }
.cx-kpi-abnormal .cx-kpi-icon { background: var(--cx-status-abnormal-bg);   color: var(--cx-status-abnormal); }
.cx-kpi-normal   .cx-kpi-icon { background: var(--cx-status-normal-bg);     color: var(--cx-status-normal);   }

/* main styles */
.switch input {
	position: absolute;
	top: 0;
	z-index: 2;
	opacity: 0;
	cursor: pointer;
}
.switch input:checked {
	z-index: 1;
}
.switch input:checked + label {
	opacity: 1;
	cursor: default;
}

.switch label {
	color: #fff;
	transition: opacity 0.25s ease;
	cursor: pointer;
}
.switch .toggle-outside {
	height: 24px;
	border-radius: 2rem;
	padding: 2px;
	overflow: hidden;
	transition: 0.25s ease all;
}
.switch .toggle-inside {
	border-radius: 5rem;
	position: absolute;
	transition: 0.25s ease all;
}
.CRI.switch .toggle-inside {
	background: var(--cx-status-critical);
}
.ABN.switch .toggle-inside {
	background: var(--cx-status-abnormal);
}
.NOR.switch .toggle-inside {
	background: var(--cx-status-normal);
}

.switch--horizontal {
	margin: 0 auto;
	position: relative;
}
.switch--horizontal input {
	height: 25px;
	width: 60px;
}

.en .switch--horizontal input {
	left: 58px;
}

.ar .switch--horizontal input {
	right: 58px;
}
.switch--horizontal label {
	display: inline-block;
	width: 55px;
	height: 100%;
	margin: -1px 0;
	text-align: center;
	color: #000;
	cursor: default;
}
.ar .switch--horizontal label {
	width: 65px;
}

.en .switch--horizontal label:last-of-type {
	margin-left: 10px;
}

.switch--horizontal .toggle-outside {
	background: var(--cx-bg);
	position: absolute;
	width: 50px;
}
.en .switch--horizontal .toggle-outside {
	left: 62px;
}
.ar .switch--horizontal .toggle-outside {
	right: 70px;
}
.CRI.switch--horizontal .toggle-outside {
	border: 1px solid var(--cx-status-critical);
}
.ABN.switch--horizontal .toggle-outside {
	border: 1px solid var(--cx-status-abnormal);
}
.NOR.switch--horizontal .toggle-outside {
	border: 1px solid var(--cx-status-normal);
}
.switch--horizontal .toggle-inside {
	height: 18px;
	width: 18px;
}
.en .switch--horizontal input:checked ~ .toggle-outside .toggle-inside {
	left: 2px;
}
.ar .switch--horizontal input:checked ~ .toggle-outside .toggle-inside {
	right: 2px;
}
.en .switch--horizontal input ~ input:checked ~ .toggle-outside .toggle-inside {
	left: 27px;
}

.ar .switch--horizontal input ~ input:checked ~ .toggle-outside .toggle-inside {
	right: 27px;
}

.toolbar {
	float: right;
    display: flex;
    align-items: center;
	margin-top: 0;
	padding: 4px 0;
}

.ar .toolbar{
	float: left;
}

#dashboardPatients_wrapper .dataTables_filter label,
#dashboardFPatients_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 6px;
    padding: 4px 0;
}
/* ── Patient History Timeline ── */
.timeline {
    position: relative;
    padding-left: 0;
    margin-top: 8px;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--cx-border);
    z-index: 0;
}
.timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 36px;
    position: relative;
}
.timeline-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 1;
    background: var(--cx-surface);
    border: 2px solid var(--cx-border);
    margin-right: 20px;
}
.timeline-icon-appointment  { color: #4A90D9; border-color: #4A90D9; background: #EBF4FC; }
.timeline-icon-procedure    { color: #7B68EE; border-color: #7B68EE; background: #F0EEFF; }
.timeline-icon-medications  { color: #3A7A5E; border-color: #3A7A5E; background: #EDF5F0; }
.timeline-icon-diagnosis    { color: #D4612A; border-color: #D4612A; background: #FDF2EC; }
.timeline-content {
    flex: 1;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cx-border-subtle);
}
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.timeline-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.timeline-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--cx-text-primary);
    margin: 0;
}
.timeline-doctor {
    font-weight: 600;
    font-size: 13px;
    color: var(--cx-text-secondary);
    white-space: nowrap;
}
.timeline-date {
    font-size: 12px;
    color: var(--cx-text-muted);
    margin: 4px 0 8px 0;
}
.timeline-description {
    font-size: 13px;
    color: var(--cx-text-muted);
    margin: 0;
}
.timeline-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: 8px;
}
/* Timeline event-type badges */
.tl-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.tl-badge-appointment { background: #EBF4FC; color: #2B7BC1; border: 1px solid #BEDAEE; }
.tl-badge-procedure   { background: #F0EEFF; color: #5C4EC9; border: 1px solid #C5BBEE; }
.tl-badge-medications { background: #EDF5F0; color: #2D6A4F; border: 1px solid #A7CCBB; }
.tl-badge-diagnosis   { background: #FDF2EC; color: #B85328; border: 1px solid #E8C0A0; }

/* ── Vitals configuration field spacing ── */
.vitalsConfigurations .row > [class*="col-"] {
    margin-bottom: 20px;
}
.vitalsConfigurations .form-group-columns {
    gap: 12px;
    margin-bottom: 8px;
}
.vitalsConfigurations .content_title {
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cx-border-subtle);
}
.vitalsConfigurations .content {
    height: 100%;
}

/* ── Timeline SVG icons ── */
.timeline-svg-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: none;
}
.timeline-icon-appointment .timeline-svg-icon  { filter: invert(33%) sepia(89%) saturate(467%) hue-rotate(181deg) brightness(87%) contrast(88%); }
.timeline-icon-procedure   .timeline-svg-icon  { filter: invert(39%) sepia(70%) saturate(350%) hue-rotate(220deg) brightness(80%) contrast(90%); }
.timeline-icon-medications .timeline-svg-icon  { filter: invert(33%) sepia(37%) saturate(466%) hue-rotate(101deg) brightness(78%) contrast(90%); }
.timeline-icon-diagnosis   .timeline-svg-icon  { filter: invert(40%) sepia(74%) saturate(430%) hue-rotate(357deg) brightness(87%) contrast(90%); }

/* ── Dashboard filter chips (replaces old toggle switches) ── */
.filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding: 4px 0;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--cx-border);
    background: var(--cx-surface);
    color: var(--cx-text-muted);
    transition: all var(--cx-transition);
    user-select: none;
}
.filter-chip:hover {
    border-color: var(--brand-navy);
    color: var(--brand-navy);
    background: var(--cx-brand-tint);
}
.filter-chip.active {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
}
.filter-chip.chip-critical          { border-color: var(--cx-status-critical-border); color: var(--cx-status-critical); background: var(--cx-status-critical-bg); }
.filter-chip.chip-critical.active   { background: var(--cx-status-critical); border-color: var(--cx-status-critical); color: #fff; }
.filter-chip.chip-abnormal          { border-color: var(--cx-status-abnormal-border); color: var(--cx-status-abnormal); background: var(--cx-status-abnormal-bg); }
.filter-chip.chip-abnormal.active   { background: var(--cx-status-abnormal); border-color: var(--cx-status-abnormal); color: #fff; }
.filter-chip.chip-normal            { border-color: var(--cx-status-normal-border); color: var(--cx-status-normal); background: var(--cx-status-normal-bg); }
.filter-chip.chip-normal.active     { background: var(--cx-status-normal); border-color: var(--cx-status-normal); color: #fff; }

/* ── Table status cell coloring ── */
td .cx-badge,
td.status-cell { white-space: nowrap; }

tr.row-critical td:first-child,
td.status-critical { border-left: 3px solid var(--cx-status-critical); }
tr.row-abnormal td:first-child,
td.status-abnormal { border-left: 3px solid var(--cx-status-abnormal); }
tr.row-normal td:first-child,
td.status-normal   { border-left: 3px solid var(--cx-status-normal);   }

/* ── Vital config field gap (handled by base .form-group-columns rule) ── */
.form-group-columns .mb-3 {
    flex: 1;
    min-width: 0;
    margin-bottom: 1rem !important;
}

/* ── page-header actions gap ── */
.page-header__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── form-row with Bootstrap grid columns ── */
.form-row.row {
    margin-bottom: 16px;
}
.form-row.row .col-md-2 {
    padding-top: 4px;
}

/*-----------------
	9. Login
-----------------------*/

.account-page {
	display: table-row;
	height: 100%;
	padding: 40px 0;
}
.account-title {
	font-size: 32px;
	font-weight: normal;
	margin: 0 0 40px;
	text-align: center;
}
.account-wrapper {
	display: table;
	table-layout: fixed;
	height: 100%;
	padding: 30px;
	width: 100%;
}
.account-center {
	display: table-cell;
	vertical-align: middle;
}
.account-box {
	background-color: #fff;
	border: 1px solid #eaeaea;
	margin: 0 50px;
	padding: 20px;
	width: 450px;
	border-radius: 5px;
    -webkit-box-shadow: 0px 3px 6px 0px #2a2d50;
    -moz-box-shadow: 0px 3px 6px 0px #2a2d50;
    box-shadow: 0px 3px 6px 0px #2a2d50;
}
.account-box h2 {
	font-size: 25px;
	color: var(--brand-navy);
	text-transform: uppercase;
	font-weight: 600;
}

.account-box h5 {
	font-size: 11.3px;
	color: #4D4F5C;
	font-weight: bolder;
	opacity: 0.7;
}

.form-signin {
	padding: 20px;
}

.copyright {
	font-size: 12px;
}

.account-logo {
	text-align: center;
}
.account-box .form-group {
	margin-bottom: 20px;
}
.account-box a {
	color: var(--brand-navy);
	font-weight: bold;
	padding: 0px 3px;
}
.account-box a:hover {
	color: #009efb;
}
a.langchangelink {
	cursor: pointer;
}
.login a.langchangelink {
	right: -15px;
	top: 100%;
	position: absolute;
}

#guestpage_content {
	position: relative;
}

.account-box .form-control {
	border: 1px solid #eaeaea;
	border-radius: 0;
	box-shadow: inherit;
	height: 40px;
}
.account-box textarea.form-control {
	height: 130px;
}
.account-box label {
	color: #323232;
	font-weight: normal;
}
.account-logo img {
	max-height: 50px;
	width: auto;
	margin-bottom: 25px;
}
.account-box .account-btn {
	border-radius: 50px;
	min-width: 150px;
	text-transform: uppercase;
}

/*-----------------
	10. Nav tabs
-----------------------*/

.nav-tabs > li > a {
	margin-right: 0;
	color: #888;
	border-radius: 0;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
	border-color: transparent;
	color: #333;
}
.nav-tabs.nav-justified > li > a {
	border-radius: 0;
	margin-bottom: 0;
}
.nav-tabs.nav-justified.nav-tabs-solid > li > a {
	border-color: transparent;
}
.nav-tabs.nav-tabs-solid > li > a {
	color: #333;
}
.nav-tabs.nav-tabs-solid > li > a.active,
.nav-tabs.nav-tabs-solid > li > a.active:hover,
.nav-tabs.nav-tabs-solid > li > a.active:focus {
	background-color: #009efb;
	border-color: #009efb;
	color: #fff;
}
.nav-tabs.nav-tabs-solid.nav-tabs-rounded {
	border-radius: 50px;
}
.nav-tabs.nav-tabs-solid.nav-tabs-rounded > li > a {
	border-radius: 50px;
}
.nav-tabs.nav-tabs-solid.nav-tabs-rounded > li > a.active,
.nav-tabs.nav-tabs-solid.nav-tabs-rounded > li > a.active:hover,
.nav-tabs.nav-tabs-solid.nav-tabs-rounded > li > a.active:focus {
	border-radius: 50px;
}
.nav-tabs-justified > li > a {
	border-radius: 0;
	margin-bottom: 0;
}
.nav-tabs-justified > li > a:hover,
.nav-tabs-justified > li > a:focus {
	border-bottom-color: #ddd;
}
.nav-tabs-justified.nav-tabs-solid > li > a {
	border-color: transparent;
}

/*-----------------
	11. Focus Label
-----------------------*/

.form-focus {
	display: flex;
	height: 50px;
	position: relative;
}
.form-focus .focus-label {
	font-size: 16px;
	font-weight: 400;
	opacity: 0.4;
	pointer-events: none;
	position: absolute;
	-webkit-transform: translate3d(0, 22px, 0) scale(1);
	-ms-transform: translate3d(0, 22px, 0) scale(1);
	-o-transform: translate3d(0, 22px, 0) scale(1);
	transform: translate3d(0, 22px, 0) scale(1);
	transform-origin: left top;
	transition: 240ms;
	left: 12px;
	top: -8px;
	z-index: 1;
	color: #888;
}
.form-focus.focused .focus-label {
	opacity: 1;
	font-weight: 300;
	top: -14px;
	font-size: 12px;
	z-index: 1;
}
.form-focus .form-control {
	height: 50px;
	padding: 21px 12px 6px;
}
.form-focus .form-control::-webkit-input-placeholder {
	color: transparent;
	transition: 240ms;
}
.form-focus .form-control:focus::-webkit-input-placeholder {
	transition: none;
}
.form-focus.focused .form-control::-webkit-input-placeholder {
	color: #bbb;
}
.profile-basic .cal-icon {
	width: 100%;
}
.form-focus .select2-container .select2-selection--single {
	border: 1px solid #ccc;
	height: 50px;
	border-radius: 0;
}
.form-focus .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 48px;
	right: 7px;
}
.form-focus .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: #ccc transparent transparent;
	border-style: solid;
	border-width: 6px 6px 0;
	height: 0;
	left: 50%;
	margin-left: -10px;
	margin-top: -2px;
	position: absolute;
	top: 50%;
	width: 0;
}
.form-focus .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: transparent transparent #ccc;
	border-width: 0 6px 6px;
}
.form-focus .select2-container .select2-selection--single .select2-selection__rendered {
	padding-right: 30px;
	padding-left: 12px;
	padding-top: 10px;
}
.form-focus .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #676767;
	font-size: 14px;
	font-weight: normal;
	line-height: 38px;
}
.form-focus .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #fc6075;
}
.file-size {
	color: #888;
}

/*-----------------
	12. Notifications
-----------------------*/

.notifications {
	padding: 0;
}
.notifications .drop-scroll {
	height: 290px;
	width: 400px;
}
.notifications.msg-noti .drop-scroll {
	width: 310px;
}
.notifications .notification-heading {
	margin: 0;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.45;
	color: #616161;
}
.notifications .notification-time {
	font-size: 12px;
	line-height: 1.35;
	color: #bdbdbd;
}
.notification-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.notifications ul.notification-list > li {
	margin-top: 0;
	border-bottom: 1px solid #f5f5f5;
}
.notifications ul.notification-list > li:last-child {
	border-bottom: none;
}
.notifications ul.notification-list > li a {
	display: block;
	padding: 12px;
	border-radius: 2px;
}
.notifications ul.notification-list > li a:hover {
	background-color: #fafafa;
}
.drop-scroll {
	overflow-y: scroll;
	position: relative;
}
.topnav-dropdown-header {
	border-bottom: 1px solid #eee;
	text-align: center;
}
.topnav-dropdown-header,
.topnav-dropdown-footer {
	font-size: 12px;
	height: 32px;
	line-height: 32px;
	padding-left: 12px;
	padding-right: 12px;
}
.topnav-dropdown-footer a {
	display: block;
	text-align: center;
	color: #333;
}
.user-menu.nav > li > a .badge {
	color: #fff;
	font-size: 60%;
	font-weight: 700;
	position: absolute;
	right: 3px;
	top: 6px;
}
.user-menu.nav > li > a > i {
	font-size: 16px;
	line-height: 55px;
}
.noti-details {
	color: #989c9e;
	margin: 0;
}
.noti-time {
	margin: 0;
}
.noti-title {
	color: #333;
}

/*-----------------
	13. UI Kit
-----------------------*/
.tab-content {
	padding-top: 20px;
}

.ui-widget-header {
	background: transparent;
	border: none;
}

.ui-widget-header .ui-dialog .ui-dialog-title {
	display: none;
}



/*-----------------
	14. Error
-----------------------*/

.error-box {
	background-color: #fff;
	border-radius: 5px;
	line-height: 1;
	margin: 0 auto;
	max-width: 475px;
	padding: 50px 30px 55px;
	text-align: center;
	width: 100%;
}
.error-heading {
	font-size: 3.5em;
	font-weight: bold;
}
.error-title {
	color: #2c2c2c;
	font-size: 22px;
	font-weight: normal;
	margin: 0 0 1.5rem;
}
.error-wrapper {
	background-color: #fff;
	margin: 0;
	color: #4F5155;
	-moz-box-align: center;
	-moz-box-pack: center;
	align-items: center;
	display: flex;
	justify-content: center;
	height: 100%;
}
.error-box h1 {
	font-size: 150px;
}
.error-box p {
	margin-bottom: 30px;
}
.error-box .btn {
	text-transform: uppercase;
}

/*-----------------
	15. Lock Screen
-----------------------*/

.lock-user {
	margin-bottom: 20px;
}
.lock-user img {
	margin-bottom: 15px;
	width: 100px;
}

.inputfile {
  /* visibility: hidden etc. wont work */
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.inputfile:focus + label {
  /* keyboard navigation */
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
  pointer-events: none;
}

.btn.inputfilelabel {
	display: block;
	float: none;
	clear: both;
	padding: 9px;
}

/*-----------------
	16. User Logo
-----------------------*/
.displayLogo {
    border: 1px solid lightgray;
    padding: 5px;
}

.displayLogo img{
	margin-bottom: 5px;
    max-width: 88px;
}

/*-----------------
	17. Arabic
-----------------------*/
.ar body {
	direction: rtl;
	font-family: 'Cairo', sans-serif;
}

.ar a.langchangelink {
	font-family: sans-serif !important;
}

.ar .header .header-left,.ar .dashboard-list li .col p span:first-child {
	float: right;
}

.ar [type="date"] {
	background:#FAFBFC url("../img/calendar.svg") 3% 50% no-repeat;
	direction: rtl;
	text-align: right;
}
.ar .form-group.tel_no label {
	float: none !important;
}

.ar .float-right, .ar div.dataTables_wrapper div.dataTables_filter, .ar .login a.langchangelink, .ar .modal-content button.close,
.ar .ui.fluid.dropdown > .dropdown.icon {
	float: left!important;
}

.ar .modal-content button.close, .ar .icons_rtc,.ar .ui.selection.dropdown > .dropdown.icon, .ar .ui-dialog .ui-dialog-titlebar-close,.ar .mobile-user-menu {
	right: inherit;
}

.ar .ui-timepicker-viewport {
	right: inherit !important;
}

.ar .ui.multiple.search.dropdown > .text, .ar table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before,
.ar table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before,.ar a.mobile_btn {
	left: inherit;
}

.ar .ui.label > .close.icon, .ui.label > .delete.icon { 
	margin-left: 0em;
	margin-right: 0.5em;	
}

.ar .ui.multiple.search.dropdown > .text, .ar a.mobile_btn {
	right: 0px;
}

.ar table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, .ar table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
	right: 4px;
}

.ar .mobile-user-menu {
	left: 0px;
}


.ar .ui-dialog .ui-dialog-titlebar-close {
	left: .3em;
}

.ar .ui.selection.dropdown > .dropdown.icon {
	left: 1em;
}

.ar .icons_rtc {
	left:7px;
}

.ar .count {
	margin-right: -10px;
    border-radius: 0px 7px 0px 0px;
}

.ar .page-wrapper, .ar .form-group-columns .form-group + .form-group, .ar .mini-sidebar .page-wrapper, .ar #follwUpDiv .form-group-columns .form-group + .form-group {
	margin-left: 0px;
}

.ar .form-group-columns .form-group + .form-group {
	margin-right:10px; 
}

.ar #follwUpDiv .form-group-columns .form-group + .form-group {
	margin-right:150px; 
}

.ar .page-wrapper {
	margin-right: 230px;
}

.ar .mini-sidebar .page-wrapper {
    margin-right: 60px;
}

.ar .form-group.tel_no .code{
    margin-left: 4px;
}

.ar .ui.multiple.dropdown{
	padding-right: 5px;
}


.ar table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child, .ar table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child {
	padding-left: 12px;
	padding-right: 30px;
}

.ar .page-wrapper, .ar body, .ar .ui.dropdown.multiple, .ar .ui.dropdown .menu > .item {
	text-align: right;
}

.ar .text-left {
	text-align: right !important;
}

.ar .text-right {
	text-align: left !important;
}

.ar select.form-control {
	padding: 0.300rem 0.75rem;
}
.ar .toggle-password {
	left: 0px;
	right: auto;
}

.ar #myTabContent div.dataTables_wrapper div.dataTables_filter {
	float: none !important;
	text-align: left;
}
.ar .list.content .user_info span {
    float: left;
} 
/*-----------------
	18. Responsive
-----------------------*/

/* @media (min-width: 991px) sidebar rules moved to sidebar.css */
@media only screen and (min-width: 768px) {	
	.modal-md {
		width: 500px;
	}
	.nav-tabs.nav-justified.nav-tabs-top {
		border-bottom: 1px solid #ddd;
	}
	.nav-tabs.nav-justified.nav-tabs-top > li > a,
	.nav-tabs.nav-justified.nav-tabs-top > li > a:hover,
	.nav-tabs.nav-justified.nav-tabs-top > li > a:focus {
		border-width: 2px 0 0 0;
	}
	.nav-tabs.nav-tabs-top > li, .nav-tabs.nav-tabs-solid > li {
		margin-bottom: 0;
	}
	.nav-tabs.nav-tabs-top > li > a,
	.nav-tabs.nav-tabs-top > li > a:hover,
	.nav-tabs.nav-tabs-top > li > a:focus,
	.nav-tabs-justified.nav-tabs-top > li > a,
	.nav-tabs-justified.nav-tabs-top > li > a:hover,
	.nav-tabs-justified.nav-tabs-top > li > a:focus {
		border-width: 2px 0 0 0;
	}

	.nav-tabs.nav-tabs-top > li + li > a{
		margin-left: 1px;
	}
	.nav-tabs.nav-tabs-top > li > a.active,
	.nav-tabs.nav-tabs-top > li > a.active:hover,
	.nav-tabs.nav-tabs-top > li > a.active:focus {
		border-top-color: #009efb;
	}
	.nav-tabs.nav-tabs-bottom > li, .nav-tabs.nav-tabs-bottom > li  {
		margin-bottom: -1px;
	}
	.nav-tabs.nav-tabs-bottom > li > a.active,
	.nav-tabs.nav-tabs-bottom > li > a.active:hover,
	.nav-tabs.nav-tabs-bottom > li > a.active:focus {
		border-bottom-width: 2px;
		border-color: transparent;
		border-bottom-color: #009efb;
		background-color: transparent;
		transition: none 0s ease 0s;
		-moz-transition: none 0s ease 0s;
		-o-transition: none 0s ease 0s;
		-ms-transition: none 0s ease 0s;
		-webkit-transition: none 0s ease 0s;
	}

	.nav-tabs.nav-tabs-bottom > li > a.active,
	.nav-tabs.nav-tabs-bottom > li > a.active:hover,
	.nav-tabs.nav-tabs-bottom > li > a.active:focus {
		border-bottom-width: 2px;
		border-color: transparent;
		border-bottom-color: #009efb;
		background-color: transparent;
		transition: none 0s ease 0s;
		-moz-transition: none 0s ease 0s;
		-o-transition: none 0s ease 0s;
		-ms-transition: none 0s ease 0s;
		-webkit-transition: none 0s ease 0s;
	}
	.nav-tabs.nav-tabs-solid {
		background-color: #fafafa;
		border: 0;
	}

	.nav-tabs.nav-tabs-solid > li > a {
		border-color: transparent;
	}
	.nav-tabs.nav-tabs-solid > li > a:hover,
	.nav-tabs.nav-tabs-solid > li > a:focus {
		background-color: #f5f5f5;
	}
	.nav-tabs.nav-tabs-solid > .open:not(.active) > a {
		background-color: #f5f5f5;
		border-color: transparent;
	}
}
@media only screen and (max-width: 1199.98px) {
	.invoices-view {
		width: 90%;
		float: right;
	}
}
@media only screen and (max-width: 991.98px) {
	.profile-rightbar {
		display: inline-block !important;
	}
	.chat-profile-view {
		display: none;
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		transition: all 0.4s ease;
		right: 0;
		transform: translateX(0px);
		z-index: 1041;
		width: 300px;
		position: fixed;
		margin-right: -300px;
		display: table-cell;
		top: 0;
		padding-bottom: 60px;
		margin-top: 50px;
	}
	.message-view.chat-view {
		width: 100%;
	}
	.slide-nav .page-wrapper {
		left: 225px;
		margin-left: 0;
	}
	.chat-main-row {
		left: 0;
	}
	.header .header-left {
		position: absolute;
		width: 100%;
	}
	.mobile_btn {
		display: block;
	}
	.page-title-box {
		display: none;
	}
	.ar .slide-nav .page-wrapper {
	    left: inherit;
	    right: 1186px;
	}
	.page-wrapper, .ar .page-wrapper {
		margin-left: 0;
		margin-right: 0px;
	}
	a.mobile_btn {
		color: var(--brand-navy);
		font-size: 24px;
		height: 50px;
		left: 0;
		line-height: 50px;
		padding: 0 20px;
		position: absolute;
		top: 0;
		width: 60px;
		z-index: 10;
	}
	.slide-nav .page-wrapper {
		left: 225px;
		margin-left: 0;
	}
	.invoices-view {
		width: 100%;
		float: none;
	}
	.page-wrapper {
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		transition: all 0.4s ease;
	}
}
@media only screen and (max-width: 767.98px) {
	.form-group-columns {
		display: block;
	}
	.page-header__head {
		flex-direction: column;
		align-items: flex-start;
	}
	.form-group.tel_no .telNo,.form-group.tel_no .code {
		width: 100%;	
	}
	
	.en .form-row .form-group:first-child, .ar .form-row .form-group:first-child, #follwUpDiv .form-group-columns .form-group + .form-group {
		margin-right: 0px;
		margin-left: 0px;
	}
	
	.page-header__head, .page-header__actions a, .btn-primary, .btn-secondary {
		width: 100%;
	}
	.form-group-columns .form-group + .form-group {
	    margin-left: 0px;
	}
	.profile-info-left {
		border-right: none;
		border-bottom: 2px dashed #ccc;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}
	.navbar-nav .open .dropdown-menu {
		float: left;
		position: absolute;
	}
	.notifications {
		right: -48px;
	}
	.notifications:before,
	.notifications:after {
		right: 60px;
	}
	.modal-body.card-box {
		background-color: #fff;
		border: none;
		border-radius: inherit;
		box-shadow: unset;
		margin-bottom: 0;
		padding: 15px;
	}
	.roles-menu {
		margin-bottom: 20px;
	}
	.right-action, .top-action-right, .left-action {
		text-align: center;
	}
	.top-action-left .float-left {
		float: none !important;
	}
	.top-action-left .btn-group,.top-action-right a.btn.btn-white, .left-action {
		margin-bottom: 15px;
	}
	 .form-group.tel_no .code {
		margin-bottom: 5px;
	}
	.mail-sent-time {
		float: left;
		margin-top: 10px;
		width: 100%;
	}
	.nav-tabs.nav-justified {
		border-bottom: 1px solid #ddd;
	}
	.nav-tabs.nav-justified > li > a.active,
	.nav-tabs.nav-justified > li > a.active:hover,
	.nav-tabs.nav-justified > li > a.active:focus {
		border-color: transparent transparent transparent #009efb;
		border-left-width: 2px;
	}
	.nav-tabs {
		border-bottom: 0;
		position: relative;
		background-color: #fff;
		padding: 5px 0;
		border: 1px solid #ddd;
		border-radius: 3px;
	}
	.nav-tabs .nav-item {
		margin-bottom: 0;
	}
	.nav-tabs > li > a {
		border-width: 2px;
		border-left-color: transparent;
	}
	.nav-tabs .nav-link {
		border-width: 2px;
	}
	.nav-tabs > li > a:hover,
	.nav-tabs > li > a:focus {
		background-color: #fafafa;
	}
	.nav-tabs .nav-item.show .nav-link,
	.nav-tabs .nav-link.active,
	.nav-tabs > li > a.active,
	.nav-tabs > li > a.active:hover,
	.nav-tabs > li > a.active:focus {
		background-color: #f5f5f5;
		border-color: transparent transparent transparent #009efb;
		border-left-width: 2px;
	}
	.nav-tabs > li.open:not(.active) > a,
	.nav-tabs > li.open:not(.active) > a:hover,
	.nav-tabs > li.open:not(.active) > a:focus {
		background-color: #fafafa;
	}
	.nav-tabs.nav-tabs-solid {
		padding: 5px;
	}
	.nav-tabs.nav-tabs-solid.nav-tabs-rounded {
		border-radius: 5px;
	}
	.nav-tabs.nav-tabs-solid > li > a {
		border-left-width: 0!important;
	}
	.nav-tabs-justified {
		border-bottom: 1px solid #ddd;
	}
	.nav-tabs-justified > li > a.active,
	.nav-tabs-justified > li > a.active:hover,
	.nav-tabs-justified > li > a.active:focus {
		border-width: 0 0 0 2px;
		border-left-color: #009efb;
	}
	h1 {
		font-size: 2em;
	}
	h2 {
		font-size: 1.5em;
	}
	h3 {
		font-size: 1.17em;
	}
	h4 {
		font-size: 1.12em;
	}
	h5 {
		font-size: .83em;
	}
	h6 {
		font-size: .75em;
	}
	.page-title {
		font-size: 1.2em;
		padding-top: 10px;
	}
	.card-title {
		font-size: 1.12em;
	}
	.blog-view .blog-title {
		font-size: 24px;
	}
	.widget h3 {
		font-size: 18px;
	}
	.my-video ul li {
		width: 80px;
	}
	.voice-call-avatar .call-avatar {
		width: 120px;
		height: 120px;
	}
	.table-responsive {
		display: block;
		width: 100%;
		overflow-x: auto;
		-ms-overflow-style: -ms-autohiding-scrollbar;
	}
	.header .has-arrow .dropdown-toggle > span:nth-child(2) {
		display: none;
	}
	.header .has-arrow .dropdown-toggle:after {
		display: none;
	}
	.btn-white {
		margin: 0px;
	}
}
@media only screen and (max-width: 575.98px) {
	.contact-cat {
		padding-right: 70px;
	}
	.account-box {
		margin: 0px;
	}
	.account-wrapper {
		padding: 10px;
	}
	.user-menu {
		display: none;
	}
	.mobile-user-menu {
		display: block;
	}
	.search-box {
		display: none;
	}
	.filter-row {
		margin-bottom: 15px;
	}
	.page-wrapper > .content {
		padding: 15px;
	}
	.profile-view .profile-basic {
		margin-left: 0;
	}
	.profile-img-wrap {
		position: relative;
		margin: 0 auto;
	}
	.profile-view .profile-img-wrap {
		margin: 0 auto 10px;
		height: 100px;
		width: 100px;
	}
	.profile-view .profile-img {
		height: 100px;
		width: 100px;
	}
	.profile-view .profile-img .avatar {
		font-size: 24px;
		height: 100px;
		line-height: 100px;
		margin: 0;
		width: 100px;
	}
	.profile-info-left {
		text-align: center;
	}
	.profile-basic {
		margin-left: 0;
		margin-top: 15px;
	}
	.page-title {
		font-size: 18px;
	}
	.fc-toolbar .fc-right {
		display: inline-block;
		float: none;
		margin: 10px auto 0;
		width: 200px;
		clear: both;
	}
	.fc-toolbar .fc-left {
		float: none;
		margin: 0 auto;
		width: 200px;
	}
	.upload-text {
		font-size: 18px;
	}
	.call-duration {
		display: block;
		margin-top: 0;
		margin-bottom: 10px;
		position: inherit;
	}
	.end-call {
		margin-top: 10px;
		position: inherit;
	}
	.chat-right .chat-content {
		max-width: 90%;
	}
	.chat-right .chat-body {
		padding-left: 0;
		padding-right: 0;
	}
	.chat-left .chat-content {
		max-width: 90%;
	}
	.chat-left .chat-body {
		padding-left: 0;
		padding-right: 0;
	}
	.chat-avatar .avatar {
		height: 20px;
		line-height: 20px;
		width: 20px;
	}
	.account-box {
		width: 100%;
		margin-bottom: 20px;
	}
	.content {
		padding: 0 50px;
	}
	.custom-menu.navbar-nav > li > a {
		margin-left: 10px;
	}
	.error-box h1 {
		font-size: 50px;
	}
	.submit-btn {
		min-width: 150px;
	}
	.ui-kit-wrapper button {
		margin-bottom: 5px;
	}
	.pagination > li > a,
	.pagination > li > span {
		padding: .5rem !important;
	}
}
@media only screen and (max-width: 479px) {
	.compose-btn button {
		padding: 0.365rem 0.5rem;
	}
	.attachments li {
		float: none;
		text-align: center;
		margin: 0 auto;
		margin-bottom: 10px;
	}
}

/*-----------------
	19. temp
-----------------------*/
.info-blocks {
    list-style: none;
    width: 100%;
    text-align: center;
    margin: 0;
    margin-bottom: 30px;
    padding: 0;
}
.info-blocks > li {
    display: inline-block;
    text-align: center;
    min-width: 150px;
    white-space: nowrap;
	margin: 0 10px 5px 45px;
    border-radius: 7px;
    border: 1px solid #ddd;
    box-shadow: 1px 1px #F4F4F4;
}

li.bg-primary:first-child {
    margin-left: 10px;
}

li.bg-primary {
    background: var(--brand-navy) !important;
}

.top-info {
    margin: 16px 14px 14px 14px;
    color: #FFF;
}
.info-blocks > li > a {
	color: #FFF;
}

.info-blocks > li > a > i {
    font-size: 48px;
    display: inline-block;
    margin-bottom: 20px;
    color: #FFF;
}

.info-blocks a, .info-blocks span{
	display: block;
	color: #FFF !important;
	text-decoration: none;
}
.vital-item.active{
    background:#eef4ff;
    border-left:4px solid #2b6cb0;
}

/* Show dropdown arrow in Forms in add/edit mode */

select.form-control:not(:disabled) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

/*  Hide dropdown arrow in Forms in view mode */

select.form-control:disabled {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none !important;
    cursor: not-allowed;
}

input.timepicker:not(:disabled) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

input.timepicker:disabled {
    background-image: none !important;
    cursor: not-allowed;
}

/* ── Responsive additions ── */
@media only screen and (max-width: 1199.98px) {
    .cx-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-list li { width: 50%; }
    /* Vital list + chart: allow natural stacking on tablet */
    #vitalList { display: flex; flex-wrap: wrap; gap: 4px; }
    #vitalList .vital-item { flex: 1 1 auto; }
}

@media only screen and (max-width: 991.98px) {
    /* Vitals panel: list on top, graph below */
    .col-md-4.vital-list-col, .col-md-8.vital-chart-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Header actions: wrap naturally */
    .page-header__actions {
        flex-wrap: wrap;
        gap: 6px;
    }
    .page-header__actions .btn,
    .page-header__actions a.btn {
        flex: 1 1 auto;
        text-align: center;
        min-width: 120px;
    }
}

@media only screen and (max-width: 767.98px) {
    .cx-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .dashboard-list li { width: 100%; padding-right: 0; }

    /* Header: stack title above actions */
    .page-header__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .page-header__actions {
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
    }
    .page-header__actions .btn,
    .page-header__actions a.btn {
        flex: 1 1 auto;
        text-align: center;
        font-size: 12px;
        padding: 7px 10px;
    }

    .filter-chips { gap: 6px; }
    .toolbar { float: none; margin-top: 0; }
    .form-row.row .col-md-2 { display: none; }
    .form-row.row .col-md-10 { width: 100%; flex: 0 0 100%; max-width: 100%; }

    /* Timeline: tighten on mobile */
    .timeline::before { left: 18px; }
    .timeline-icon { width: 38px; height: 38px; min-width: 38px; margin-right: 12px; }
    .timeline-svg-icon { width: 18px; height: 18px; }
    .timeline-header { flex-direction: column; gap: 4px; }
    .timeline-header > div:last-child { align-self: flex-start; }
    .content.col { margin: 0 0 12px 0; }

    /* Vitals: stack list-group and chart */
    .vital-list-col, .vital-chart-col { flex: 0 0 100%; max-width: 100%; margin-bottom: 12px; }
    #vitalList { display: flex; flex-wrap: wrap; gap: 4px; }
    #vitalList .vital-item { flex: 1 1 40%; }

    /* Vitals config: single column */
    .vitalsConfigurations .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

@media only screen and (max-width: 575.98px) {
    .cx-kpi-grid { grid-template-columns: 1fr 1fr; }
    .cx-kpi-card { padding: 14px 10px; }
    .cx-kpi-value { font-size: 18px; }
    .page_title { font-size: 20px; }
    .modal-dialog { margin: 10px; }
    .form-group-columns { flex-direction: column; }

    /* Full-width stacked buttons on small phones */
    .page-header__actions .btn,
    .page-header__actions a.btn {
        flex: 0 0 100%;
    }

    /* Timeline: minimal on small phones */
    .timeline-title { font-size: 13px; }
    .timeline-doctor { font-size: 12px; }
    .tl-badge { font-size: 10px; padding: 2px 7px; }
}

/*-----------------
    20. Dashboard UI (Sidebar, Charts, Patient List)
-----------------------*/

/* ── Patient Name Link ── */
.patient-name-link {
    font-size: 13px;
    font-weight: 600;
    color: #1a1d23;
    text-decoration: none;
    display: block;
}
.patient-name-link:hover { color: #1e4a8c; text-decoration: none; }

/* ── Dashboard page wrapper padding ── */
.page-wrapper .tab-content {
    padding-top: 0;
}

/* ── Table Row hover actions ── */
#dashboardPatients thead th,
#dashboardFPatients thead th {
    font-size: 11.5px;
    font-weight: 600;
    color: #8a93a6;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #f9fafb;
    border-bottom: 1px solid #e8eaf0;
    white-space: nowrap;
    padding: 10px 12px;
}
#dashboardPatients tbody td,
#dashboardFPatients tbody td {
    padding: 11px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #f5f6fa;
}
#dashboardPatients tbody tr:last-child td,
#dashboardFPatients tbody tr:last-child td {
    border-bottom: none;
}

/* ── Pagination info text ── */
.dataTables_info {
    font-size: 12px;
    color: #8a93a6;
}

/* ── Processing overlay ── */
.dataTables_processing {
    border: 1px solid #e8eaf0 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
    font-size: 13px !important;
    color: #6b7280 !important;
}

/* Footer styles moved to footer.css */

/* Added CSS for the secondary button hover according to brand colors */
.form-group-actions .btn.btn-secondary:hover, .ui-dialog-buttonset .btn.btn-secondary:hover {
    border-color: var(--brand-navy);
    background-color: var(--brand-navy);
}

/* changing the loader color code to brand teal */
div.dataTables_processing>div:last-child>div {
    background: var(--brand-teal) !important;
}