/* ==========================================
   ACTIVITY SECTION
========================================== */

.activity-section {
	margin-top: 24px;
}

.section-header-activity {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.section-title-activity {
	align-items: center;
	color: #1e293b;
	display: flex;
	font-size: 22px;
	font-weight: 600;
	gap: 10px;
}

.section-title-activity i {
	align-items: center;
	background: #fdebe6;
	border-radius: 50%;
	color: #FF6D00;
	display: flex;
	font-size: 18px;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.activity-count-badge {
	align-items: center;
	background: #ea580c;
	border-radius: 999px;
	color: white;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	height: 24px;
	justify-content: center;
	min-width: 24px;
	padding: 0 8px;
}
/* ==========================================
   TIMELINE
========================================== */

.activity-timeline {
	position: relative;
}

.activity-timeline:before {
	background: #e2e8f0;
	bottom: 0;
	content: '';
	left: 22px;
	position: absolute;
	top: 0;
	width: 2px;
}

/* ==========================================
   ACTIVITY ITEM
========================================== */

.activity-item {
	display: flex;
	gap: 16px;
	margin-bottom: 20px;
	position: relative;
}

.activity-item:last-child {
	margin-bottom: 0;
}

/* ==========================================
   ICON
========================================== */

.activity-icon {
	align-items: center;
	border: 3px solid white;
	border-radius: 50%;
	display: flex;
	flex-shrink: 0;
	height: 44px;
	justify-content: center;
	position: relative;
	width: 44px;
	z-index: 1;
}

.activity-icon.paid {
	background: #ecfdf5;
	color: #15803d;
}

.activity-icon.claim {
	background: #f0fdfa;
	color: #0f766e;
}

.activity-icon.claimed {
	background: #f0fdfa;
	color: #ffd653;
}

.activity-icon.received {
	background: #eff6ff;
	color: #2563eb;
}

.activity-icon.contact {
	background: #fff7ed;
	color: #ea580c;
}

.activity-icon.plan {
	background: #f5f3ff;
	color: #7c3aed;
}
.activity-icon.provider-confirmed {
	background: #f5f3ff;
	color: #009688;
}
.activity-icon.provider-conf-req {
	background: #f5f3ff;
	color: #2563eb;
}
.activity-icon.bill-approved {
	background: #f5f3ff;
	color: #009688;
}
.activity-icon.bill-approval-req {
	background: #f5f3ff;
	color: #2563eb;
}
.activity-icon.bill-rejected {
	background: #f5f3ff;
	color: red;
}
.activity-icon.onboarded {
	background: #f5f3ff;
	color: #009688;
}

.activity-icon.offboarded {
	background: #f5f3ff;
	color: red;
}
/* ==========================================
   CARD
========================================== */

.activity-content {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 2px 8px rgba(0,0,0,.04);
	flex: 1;
	padding: 16px;
	transition: all .2s ease;
}

.activity-content:hover {
	border-color: #14b8a6;
	box-shadow: 0 8px 20px rgba(0,0,0,.08);
	transform: translateY(-2px);
}

/* ==========================================
   TEXT
========================================== */

.activity-date {
	color: #64748b;
	font-size: 12px;
	margin-bottom: 6px;
}

.activity-title {
	color: #1e293b;
	font-size: 15px;
	font-weight: 700;
}

.activity-description {
	color: #475569;
	font-size: 14px;
	margin-top: 4px;
}

/* ==========================================
   META TAGS
========================================== */

.activity-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.activity-meta span {
	align-items: center;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	color: #475569;
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 10px;
}
.activity-toolbar {
	margin-bottom: 20px;
}

.activity-search {
	position: relative;
}

.activity-search i {
	color: #94a3b8;
	left: 14px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.activity-search input {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	font-size: 14px;
	padding: 12px 14px 12px 40px;
	transition: all 0.2s ease;
	width: 100%;
}

.activity-search input:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
	outline: none;
}
/* ==========================================
   EMPTY STATE
========================================== */

.empty-state {
	background: #ffffff;
	border: 1px dashed #d1d5db;
	border-radius: 16px;
	padding: 60px 20px;
	text-align: center;
}

.empty-state i {
	color: #94a3b8;
	font-size: 42px;
	margin-bottom: 12px;
}

.empty-state h4 {
	color: #1e293b;
	margin: 0 0 8px;
}

.empty-state p {
	color: #64748b;
	margin: 0;
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

	.activity-timeline:before {
		left: 18px;
	}

	.activity-icon {
		height: 36px;
		width: 36px;
	}

	.activity-content {
		padding: 14px;
	}
}

/* ========================================================================== */
/* PORT SIZES
   ========================================================================== */
@media (max-width: 479px) {html { font-size: 12px; }}
@media (min-width: 480px) and (max-width: 767px) {html { font-size: 13px; }}
@media (min-width: 768px) and (max-width: 991px) {html { font-size: 14px; }} /* breakpoiint for the header to go full dropdown */
@media (min-width: 992px) and (max-width: 1199px) {html { font-size: 14px; }}
@media (min-width: 1200px) {html { font-size: 14px; }}
/* ========================================================================== */
/* Typography
   ========================================================================== */
html {
	font-family: "Roboto", sans-serif;
	font-size: 14px !important;
	-webkit-font-smoothing: antialiased !important;
	font-weight: normal;
	height: 100%;
	line-height: 1.72rem;
	margin: 0;
	padding: 0;
	text-rendering: optimizeLegibility !important; }
body {
	font-family: Arial, sans-serif;
	-webkit-font-smoothing: antialiased !important;
	height: 100%;
	margin: 0;
	padding: 0;
	text-rendering: optimizeLegibility !important; }
p { font-size:0.95rem; font-weight: 300; letter-spacing: 0.02rem; line-height: 1.2rem; margin: 0 0 1rem 0; }
p a { font-weight: 400; opacity:1 !important }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a h7 a { font-weight: inherit; }
h1 { font-size: 3rem; font-weight: 300; letter-spacing:normal; line-height: 4.28rem; margin: 1.72rem 0 1.72rem 0; }
h2 { font-size: 2.5rem; font-weight: 300; letter-spacing: normal; line-height: 3rem; margin: 1.72rem 0 1.72rem 0; }
h3 { font-size: 2.3rem; font-weight: 400; letter-spacing: normal; line-height: 2.56rem; margin: 1.14rem 0 1.14rem 0; }
h4 { font-size: 1.72rem; font-weight: 400; letter-spacing: normal; line-height: 2.28rem; margin: 1.14rem 0 1.14rem 0; }
h5 { font-size: 1.5rem; font-weight: 400; letter-spacing: normal; line-height: 2.14rem; margin: 1rem 0 1rem 0; }
h6 { font-size: 1.25rem; font-weight: 500; letter-spacing: normal; line-height: 1.72rem; margin: 0 0 0 0; }
h7 { font-size: 1.1rem; font-weight: 700; letter-spacing: normal; line-height: 1.5rem; margin: 0 0 0 0; }
.content { margin-top: 55px; }
/* Full-page background container */
.contactus-container {
	background-image: url('https://res.cloudinary.com/gob-bill/image/upload/v1787726712/Footer-BG_i2ul55.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
}
.noborders {
	border: none !important
}
.signin-container {
	align-items: center;
	display: flex;
	justify-content: center;
}
/* Form card styling */
.signin-card {
	border: 2px solid #009688;
	border-radius: 0;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	height: 35em;
	max-width: 40%;
	padding: 0;
	width: 40%;
}
.signup-container {
	align-items: center;
	display: flex;
	justify-content: center;
}
/* Form card styling */
.signup-card {
	border: 2px solid #009688;
	border-radius: 0;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	height: 40em;
	max-width: 50%;
	padding: 0;
	width: 50%;
}
.password-container {
	align-items: center;
	display: flex;
	justify-content: center;
}
.passwd-card {
	border: 2px solid #009688;
	border-radius: 0;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	height: 30em;
	max-width: 40%;
	padding: 0;
	width: 40%;
}
.btn-small {
	align-items: center;
	background-color: #ffffff;
	border: 1px solid transparent;
	border-radius: 6px;
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	font-size: 0.875rem; /* 14px */
	font-weight: 500;
	justify-content: center;
	line-height: 1;
	padding: 6px 12px;
	transition: background-color 0.15s ease-in-out, transform 0.05s ease;
	user-select: none;
}

.btn-small:hover {
	background-color: #d2d7d8;
}

.btn-small:active {
	transform: scale(0.98);
}
/* ========================================================================== */
/* TEXT COLOURS
   ========================================================================== */
.text-black-color           { color: #000000DE; font-weight: normal; }
.primary-text-color         { color: #00013A;}
.default-primary-text-color { color: #00013A;}
.accent-text-color          { color: #FF5252; }
.secondary-text-color       { color: #727272; }
.muted                      { color: #a6a6a6; font-weight: normal; }
.text-blue                  { color: #3f51b5; }
.text-green                 { color: #009688; }
.text-xero                  { color: #29d; }
.font-gobbill-blue          { color: #3F51B5 !important; }
.font-gobbill-dark-blue     { color: #201ABC !important; }
.font-gobbill-alt-green         { color: #009688 !important; }
.font-gobbill-green         { color: #008000 !important; }
.font-gobbill-red           { color: #dc143c !important; }

.font-gobbill-accent        { color: #FD480E !important; }
.font-gobbill-yellow        { color: #ea8900 !important; }
.font-gobbill-light-yellow  { color: #f4d831 !important; }

.font-gobbill-white         { color: #FFFFFF !important; }
.font-gobbill-ndis          { color: #6c246e !important; }
.alert-note {
	background-image: -webkit-linear-gradient(top, #f4ecc5 0, #f4e8c6 100%);
	background-image: -moz-linear-gradient(top, #f4ecc5 0, #f4e8c6 100%);
	background-image: -o-linear-gradient(top, #f4ecc5 0, #f4e8c6 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f4ecc5), to(#f4e8c6));
	background-image: linear-gradient(to bottom, #f4ecc5 0, #f4e8c6 100%);
	background-repeat: repeat-x;
	border-color: #f4e197;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff4ecc5', endColorstr='#fff4e8c6', GradientType=0);
}
.alert-apm {
	background-image: -webkit-linear-gradient(top, #f0fdfa 0, #e3f0ed 100%);
	background-image: -moz-linear-gradient(top, #f0fdfa 0, #e3f0ed 100%);
	background-image: -o-linear-gradient(top, #f0fdfa 0, #e3f0ed 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f0fdfa), to(#e3f0ed));
	background-image: linear-gradient(to bottom, #f0fdfa 0, #e3f0ed 100%);
	background-repeat: repeat-x;
	border-color: #f0fdfa;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0fdfa', endColorstr='#ffe3f0ed', GradientType=0);
}
.error-text                        { display: none; }
.has-error .help-block.error-text  { display: block; }
.has-error .help-inline.error-text { display: inline; }
.green-th { background: #82b288; color: #ffffff}
.indigo-th { background: #8e56b6; color: #ffffff}
.note-th { background: #c8bea2; color: #000000}
.red-th { background: #ca5e61; color: #ffffff}
.offwhite-th { background: #cdcdcd; color: #000000}
.white-td { background: #ffffff}
.myfont {
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased !important;
	font-weight: normal;
	line-height: 1.72rem;
	margin-right:10px;
	text-rendering: optimizeLegibility !important;
}
.fixed{
	position: fixed;
	z-index: 999;
}
.normal-font { font-size: 14px }
.activerow { background:#1ca79e; border:1px solid;color: #ffffff; }
.closedrow { background:#f67376; border:1px solid;color: #000000; }
/* ========================================================================== */
/* BORDER COLOURS
   ========================================================================== */
.divider-color { border-color: #a2a2a2; }
.divider-color-blue { border-color: #98bae4; }
.divider-color-green { border-color: #009688; }
.applet-border   { background:ghostwhite; border:2px solid #009688; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; color:#333; margin: 0 0 1em 0; padding:8px; position:relative; }
.em-border   { background:ghostwhite; border:2px solid #581e5a; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; color:#333; margin: 0 0 1em 0; padding:15px; position:relative; }

.ndis-border { background: #6c246e; border:1px solid #581e5a; color:#ffffff; margin: 0 0 1em 0; padding:10px; position:relative; }

.task-border { background: #fffe4063; border:1px solid #ffd000; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; color:#333; margin: 0 0 1em 0; padding:10px; position:relative; }
.step-border { background: #ffffff; border:1px solid #98bae4; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; color:#333; margin: 0 0 1em 0; padding:10px; position:relative; }
.blue-border { border-bottom-color: #98bae4 !important;;border-left-color: #98bae4;border-right-color: #98bae4;border-top-color: #98bae4 !important;}
.green-border { border-bottom-color: #009688 !important;;border-left-color: #009688;border-right-color: #009688;border-top-color: #009688 !important;}
/* ========================================================================== */
/* BACKGROUND COLOURS
   ========================================================================== */
.background-gray      { background: #e4e4e4; }
.background-dark-gray {	background: #a6a6a6; }
.background-yellow    { background: #f49100; }
.background-light-yellow { background: #fffe4063;}
.background-accent { background: #ffb7ba;}

.background-green     {	background: #009688; }
.background-light-green  { background: #a0d95f; }
.background-alt-green     {	background: #049624; }
.background-red       { background: #dc143c; }
.background-light-red {	background: #f67376; }
.background-alt-red   { background: #dc574c; }
.background-blue      { background: #8AD2E6; }
.background-light-blue { background: #B9DEF0; }
.background-light-indigo { background: #AD69DE; }
.background-purple  { background: #6c246e; }
.background-white  { background: #ffffff; }
.background-off-white  { background: #fafafa; }
.background-fraud  { background: #ADD985; }
.main-background      { background: #9ebfe8; }
.background-note { background: #f4e8c6;color: #000;}
[title~=pendingfile]  { background: #F67376; }
[title~=processing]   { background: #f49100; }
[title~=heldfile]     { background: #6c246e; color: #FFF; }
[title~=awaiting]     { background: #A6A6A6; }
[title~=ready]        { background: #AD69DE; color: #FFF; }
[title~=credit-run]   { background: #8AD2E6; color: #FFF; }
[title~=completed]    { background: #009688; color: #FFF; }
[title~=compwreturns] { background: #ADD985; }
[title~=compwerrors]  { background: #dc143c; color: #FFF; }
[title~=compresolved] { background: #d99b2d; color: #FFF; }
[title~=fraud] { background: #b9bb8e; color: #FFF; }
[title~=void]  { background: #000000; color: #FFF; }
.panel-default > .panel-heading {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#6c246e), to(#581e5a));
	background-image: -moz-linear-gradient(top, #6c246e 0%, #581e5a 100%);
	background-image: -o-linear-gradient(top, #6c246e 0%, #581e5a 100%);
	background-image: -webkit-linear-gradient(top, #6c246e 0%, #581e5a 100%);
	background-image: linear-gradient(to bottom, #6c246e 0%, #581e5a 100%);
	background-repeat: repeat-x;
	color: #ffffff;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c246e', endColorstr='#581e5a', GradientType=0);
}
.panel-default > .panel-heading-pv {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#0aa688), to(#009688));
	background-image: -moz-linear-gradient(top, #0aa688 0%, #009688 100%);
	background-image: -o-linear-gradient(top, #0aa688 0%, #009688 100%);
	background-image: -webkit-linear-gradient(top, #0aa688 0%, #009688 100%);
	background-image: linear-gradient(to bottom, #0aa688 0%, #009688 100%);
	background-repeat: repeat-x;
	color: #ffffff;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0aa688', endColorstr='#009688', GradientType=0);
}
input:disabled {
	background-color: #d8d8d8;
}
input.ng-invalid {
	border-color: red;
}
input.ng-pristine {
	border-color: #98bae4;
}
input.ng-valid {
	border-color:lightgreen;
}
select.ng-pristine {
	border-color: #98bae4;
}
select.ng-invalid {
	border-color: red;
}
select.ng-valid {
	border-color:lightgreen;
}
.tableFixHeadLarge {
	height: 800px;
	overflow-y: auto;
	width: 100%;
	z-index: 90;
}
.tableFixHeadLarge thead th {
	position: sticky;
	top: 0;
	z-index: 90;
}
.tableFixHeadLargest {
	height: 850px;
	overflow-y: auto;
	width: 100%;
	z-index: 90;
}
.tableFixHeadLargest thead th {
	position: sticky;
	top: 0;
	z-index: 90;
}
.tableFixHead {
	height: 700px;
	overflow-y: auto;
	width: 100%;
	z-index: 90;
}
.tableFixHead thead th {
	position: sticky;
	top: 0;
	z-index: 90;
}
.tableFixHeadMedium {
	height: 400px;
	overflow-y: auto;
	width: 100%;
	z-index: 90;
}
.tableFixHeadMedium thead th {
	position: sticky;
	top: 0;
	z-index: 90;
}
.tableFixHeadMediumer {
	height: 600px;
	overflow-y: auto;
	width: 100%;
	z-index: 90;
}
.tableFixHeadMediumer thead th {
	position: sticky;
	top: 0;
	z-index: 90;
}
.tableFixHeadSmall {
	height: 200px;
	overflow-y: auto;
	width: 100%;
	z-index: 90;
}
.tableFixHeadSmall thead th {
	position: sticky;
	top: 0;
	z-index: 90;
}
.header-block{ font-size: 1.75rem; font-weight: 500; letter-spacing: normal; line-height: 1.6rem; margin: auto; padding:5px; text-align: center; }
.header-info { background-color: #fffe4063; color: #000000; margin: auto; }
.status-block{ font-size: 2rem; font-weight: 500; letter-spacing: normal; line-height: 1.72rem; margin: auto;text-align: center; }
.status-paid { background-color: #0aa688; color: #ffffff; margin: auto; }
.status-schd { background-color: #f49100; color: #000000; margin: auto; }
.status-proc { background-color: #f67376; color: #000000; margin: auto; }
.status-appr { background-color: #fffe4063; color: #000000; margin: auto; }
.status-rej  { background-color: #dc143c; color: #ffffff; margin: auto; }
.sprvdr-block  { font-size: 1.75rem; font-weight: 500; letter-spacing: normal; line-height: 1.72rem; margin: auto;text-align: center; }
/* ========================================================================== */
/* BADGES
   ========================================================================== */
.badge-active    		 { background: #28A745; }
.badge-accent    		 { background: #FF5252; color: #ffffff; }
.badge-red    		 { background: #dc143c; color: #ffffff; }
.badge-green    		 { background: #009688; color: #ffffff; }
.badge-yellow    		 { background: #f49100; color: #ffffff; }
.badge-note   		 { background: #f49100; color: #000000; }
.badge-blue    		 { background: #3F51B5; color: #ffffff; }
.badge-ndis    		 { background: #6c246e; color: #ffffff; }
.badge-qc    		 { background: #d62d61; color: #ffffff; }

.badge-available 		 { background: #1ca79e; border: solid 1px #17827a; color: #000; }

.badge-dd-only   		 { background: #dadcaa; border: solid 1px #b9bb8e; color: #000; }

.badge-available-active  { background: #1ca79e; border: solid 1px #28A745; color: #000; }

.badge-dd-only-active    { background: #dadcaa; border: solid 1px #28A745; color: #000; }

input[type="reset"] {
	align-items: flex-start;
	background-color: #009688;
	border-color: #009688;
	border-image: initial;
	border-style: outset;
	border-width: 2px;
	box-sizing: border-box;
	color: #ffffff;
	cursor: default;
	text-align: center;
	white-space: pre;
}
/* ========================================================================== */
/* CONTAINERS
   ========================================================================== */
.centerblock30 { margin-left: auto; margin-right: auto; width: 30% }
.centerblock40 { margin-left: auto; margin-right: auto; width: 40% }
.centerblock50 { margin-left: auto; margin-right: auto; width: 50% }
.centerblock60 { margin-left: auto; margin-right: auto; width: 60% }
.centerblock70 { margin-left: auto; margin-right: auto; width: 70% }

.centerblock80 { margin-left: auto; margin-right: auto; width: 80% }

.centerblock90 { margin-left: auto; margin-right: auto; width: 90%; }
.centerblock   { margin-left: auto; margin-right: auto; width: 100%; }
.pdf-container { height: 100%; width: 100%; }
.width70 {width: 70%}
.width60 {width: 60%}
.width20 {width: 20%}
.width15 {width: 15%}
.width10 {width: 10%}
.ipsofacto { display: block; margin-left: auto; margin-right: auto; }
.dash-container { background: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin:5px; padding:0; }
.nomrgn-container { background: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin:0; padding:0; }
.center-container { background: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin:5px auto; padding:0;
	width: 100%; }
.dash-box       { background: #fff; border: 1px solid #98bae4; border-radius: 10px; margin: 5px; }
.dash-square-box { background: #fff; border: 2px solid #009688; border-radius: 0; margin: 5px; }
.nomrgn-box       { background: #fff; border: 1px solid #98bae4; border-radius: 10px; margin: 0; }
.mrgn-box       { background: #fff; border: 1px solid #98bae4; border-radius: 10px; margin: 0 auto; }
.dash-black-box { background: #fff; border: 1px solid #000000; border-radius: 10px; margin: 5px; }
.verification-box { background: #fff; border: 1px solid #000000; border-radius: 0; margin: 15px 10px; padding: 8px; }
.addupd-box     { background: #fff; border: 2px solid #6c246e; margin: 0;}
.accent-box       { background: #fff; border: 1px solid #FF5252; border-radius: 10px; margin: 5px auto; padding: 0}
.blue-box       { background: #fff; border: 1px solid #98bae4; border-radius: 10px; margin: 5px auto; padding: 0}
.blue-box-wrapper  { background: #fff; border: 1px solid #98bae4; border-radius: 10px; margin: 5px 0; padding: 4px}
.ndis-box       { background: #fff; border: 1px solid #6c246e; border-radius: 10px; margin: 5px auto; padding: 0}
.green-box       { background: #fff; border: 1.25px solid #009688; border-radius: 10px; margin: 5px; padding: 0}
.black-box       { background: #fff; border: 1.25px solid #000000; border-radius: 10px; margin: 5px; padding: 0}
.black-box-out  { background: #fff; border: 1px solid #333333; border-radius: 10px; margin: 5px; padding: 4px}
.blue-box-out  { background: #fff; border: 1px solid #98bae4; border-radius: 10px; margin: 5px; padding: 4px}
.part-box-out  { background: #fff; border: 1px solid #6c246e; border-radius: 10px; margin: 5px; padding: 4px}
.blue-box-in   { background: #fff; border: 1px solid #98bae4; border-radius: 10px; margin: 5px 2px; padding: 4px;}
.black-box-in   { background: #fff; border: 1px solid #333333; border-radius: 10px; margin: 5px 2px; padding: 4px;}
.black-box-sa   { background: #fff; border: 1px solid #333333; border-radius: 10px; margin: 0 5px 5px 5px; padding: 4px 0;}
.red-box       { background: #fff; border: 1.25px solid #dc143c; border-radius: 10px; margin: 5px; padding: 0}
.report-box     { background: #fff; border: 1px solid #98bae4; margin: 5px; padding: 10px}
.compare-box    { background: #fff; border: 1px solid #98bae4; border-radius: 0; margin: 2px; padding: 0}
.bill-box { background: #fff; border: 2px solid #000000; border-radius: 0; margin: 5px; }
.header-box { background: #009688;border: 2px solid #009688; border-radius: 0; color: #FFFFFF; margin: 0 }
.vl 			{border-left: 1.5px solid transparent;height: 20px;margin-top: 5px;}
.ex    { -moz-box-flex: 1; -webkit-box-flex: 1; -ms-box-flex: 1; flex-basis: 0; flex-grow: 1; max-width: 100%; }
.col-a { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 45%; flex: 0 0 45%; max-width: 45%; }
.col-b { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
.col-c { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 33%; flex: 0 0 33%; max-width: 33%; }
.col-d { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 34%; flex: 0 0 34%; max-width: 34%; }
.col-e { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 66%; flex: 0 0 66%; max-width: 66%; }
.col-f { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
.col-g { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
.col-h { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
.col-i { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 55%; flex: 0 0 55%; max-width: 55%; }
.col-j { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%; }
.col-k { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 60%; flex: 0 0 60%; max-width: 60%; }
.col-l { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 90%; flex: 0 0 90%; max-width: 90%; }
.col-m { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 67%; flex: 0 0 70%; max-width: 67%; }
.col-n { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
.col-o { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 74%; flex: 0 0 74%; max-width: 74%; }
.col-p { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 15%; flex: 0 0 15%; max-width: 15%; }
.col-q { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 85%; flex: 0 0 85%; max-width: 85%; }
.col-r { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 10%; flex: 0 0 10%; max-width: 10%; }
.col-s { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 90%; flex: 0 0 90%; max-width: 90%; }
.col-t { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 30%; flex: 0 0 30%; max-width: 30%; }
.col-u { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 70%; flex: 0 0 70%; max-width: 70%; }
.col-v { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 49%; flex: 0 0 49%; max-width: 49%; }
/* ========================================================================== */
/* IMAGE CONTAINERS
   ========================================================================== */
.frozen-section {
	background-color: #fff;   /* Prevents content transparency overlapping */
	position: sticky;
	position: -webkit-sticky; /* Support for Safari */
	top: 0;                   /* Threshold where freezing starts */
	z-index: 1000;            /* Keeps it above content */
}
.headerLogo    { height: 45px; margin: 5px 0 0 0; }
.headerLogoLarge    { height: 75px; margin: 5px 0 0 0; }
.ndisbranding    { height: 100px; margin: 5px 0 0 0; }
.pwgLogo    { margin: 5px 0 0 0; max-width: 10em;width:10em; }
.qmheaderLogo    { height: 50px; margin: 5px 0 0 0; }
.billerLogo     { margin: 0; max-height: 65px; max-width: 154px; min-height: 65px; overflow: auto; padding: 0; }
.billerLogoMed  { margin: 0; max-height: 55px; max-width: 130px; min-height: 55px; overflow: auto; padding: 0; }
.billerLogoSm   { margin: 0; max-height: 48px; max-width: 113px; min-height: 48px; overflow: auto; padding: 0; }
.billerLogoVs   { margin: 0; max-height: 32px; min-height: 32px; overflow: auto; padding: 0; }
.partnerLogo    { margin: 0; max-height: 55px; max-width: 390px; min-height: 55px; overflow: auto; padding: 0; }
.picc-logo      { height: 33px; margin:0 !important; }
.pibsb-logo     { height: 33px; margin:0 !important; }
.picc-logo-md   { height: 24px; margin:0; }
.pibsb-logo-md  { height: 24px; margin:0; }
.picc-logo-sm   { height: 18px; margin:5px; }
.pibsb-logo-sm  { height: 18px; margin:5px; }
.picc-logo-vs   { height: 18px; margin:0; }
.pibsb-logo-vs  { height: 18px; margin:0; }
.imgpagesize    { height: auto; margin: auto; width: 100%;  }

.card-header                { margin: 0; padding: 10px 0; }
.profile-image-dash { background: #fff; border: 1px transparent; border-radius: 50%; height: 100px; width: 100px; }
.header-profile-image-small { background: #fff; border: 1px transparent; border-radius: 50%; height: 50px; width: 50px; }
/* ========================================================================== */
/* HELPERS
   ========================================================================== */
.small        { font-size: 85%; font-weight: 500; letter-spacing: 0.02rem; line-height: 1.72rem; }
.smaller      { font-size: 75%; font-weight: 500; letter-spacing: 0.02rem; line-height: 1.2rem; }
.bold         { font-weight: 700 !important;}
.multi_lines_text { white-space: pre-line; }
.align-center { text-align:center !important;}
.align-left   { text-align:left}
.align-right  { text-align:right}
.uppercase    { text-transform: uppercase !important;}
.pointer      { cursor: pointer; }
.tcpadding  {	padding:2px;}
th > .tcpadding {
	padding: 2px;}
.pv-padding	{ padding: 2px 4px !important; }
.pv-padding2	{ padding: 4px !important; }
.thtop { background: #4682B4;color: #ffffff;}
/* ========================================================================== */
/* NAVBARS
   ========================================================================== */
.navbar-ndis { background-color: #FFFFFF;}
.navbar-ndis .navbar-text { color: #6c246e; }
.navbar-ndis .navbar-nav > li > a,
.navbar-ndis .navbar-nav > li > a:focus { background-color: #FFFFFF; color: #6c246e; }
.navbar-ndis .navbar-nav > li > a:hover { background-color: #6c246e; color: #FFFFFF; }
.navbar-ndis .navbar-nav > .active > a { background-color: #975AB6; border-bottom: 6px solid #E6AFFC; color: #ffffff; }
.navbar-ndis .navbar-nav > .active > a:hover,
.navbar-ndis .navbar-nav > .active > a:focus { background-color: #975AB6; border-bottom: 6px solid #E6AFFC; color: #ffffff; }
.navbar-ndis .navbar-nav > .disabled > a,
.navbar-ndis .navbar-nav > .disabled > a:hover,
.navbar-ndis .navbar-nav > .disabled > a:focus { background-color: transparent; color: #00013a; }
.navbar-ndis .navbar-toggle { border-color: transparent; }
.navbar-ndis .navbar-toggle:hover,
.navbar-ndis .navbar-toggle:focus { background-color: #48204a; border-bottom: 6px solid #ffffff; color: #ffffff; }
.navbar-ndis .navbar-toggle .icon-bar { background-color: #48204a; }
.navbar-ndis .navbar-collapse,
.navbar-ndis .navbar-form { border-color: #000019; }
.navbar-ndis .navbar-nav > .open > a,
.navbar-ndis .navbar-nav > .open > a:hover,
.navbar-ndis .navbar-nav > .open > a:focus { background-color: #48204a; border-bottom: 6px solid #48204a; color: #ffffff; }
.panel { margin-bottom: 0; }
.navbar-pv { background-color: #ffffff;}
.navbar-pv .navbar-text { color: #000000; }
.navbar-pv .navbar-nav > li > a,
.navbar-pv .navbar-nav > li > a:hover,
.navbar-pv .navbar-nav > li > a:focus { background-color: #009688; color: #ffffff; }
.navbar-pv .navbar-nav > .active > a { background-color: #B9DEF0; border-bottom: 6px solid #00013a; color: #000000; }
.navbar-pv .navbar-nav > .active > a:hover,
.navbar-pv .navbar-nav > .active > a:focus { background-color: #B9DEF0; border-bottom: 6px solid #00013a; color: #000000; }
.navbar-pv .navbar-nav > .disabled > a,
.navbar-pv .navbar-nav > .disabled > a:hover,
.navbar-pv .navbar-nav > .disabled > a:focus { background-color: transparent; color: #00013a; }
.navbar-pv .navbar-toggle { border-color: transparent; }
.navbar-pv .navbar-toggle:hover,
.navbar-pv .navbar-toggle:focus { background-color: #B9DEF0; border-bottom: 6px solid #ffffff; color: #000000; }
.navbar-pv .navbar-toggle .icon-bar { background-color: #009688; }
.navbar-pv .navbar-collapse,
.navbar-pv .navbar-form { border-color: #000019; }
.navbar-pv .navbar-nav > .open > a,
.navbar-pv .navbar-nav > .open > a:hover,
.navbar-pv .navbar-nav > .open > a:focus { background-color: #009688; border-bottom: 6px solid #009688; color: #ffffff; }
/* ========================================================================== */
/* MISCELLANEOUS
   ========================================================================== */
/* UNAUTHORISED HEADER VERTICAL LINE */
/* UNAUTHORISED HEADER SIGNUP BUTTON */
/* TOOLTIP */
.tooltip.top .tooltip-arrow { border-top-color: transparent; }
.tooltip > .tooltip-inner { background-color: #73AD21; border: 1px solid green; color: #FFFFFF; display: block; font-size: 14px; margin: 0 5px; padding: 10px; text-align: left; width: 150px; }
.tooltip { pointer-events: none; }
/* DATEPICKER */
/* CALENDAR */
.cal-week-box-cell { display: none; }
mwl-calendar .cal-slide-content { background-color: #8AD2E6;
	-moz-box-shadow: inset 0 0 15px 0 rgba(2, 162, 230, 0.5);
	-webkit-box-shadow: inset 0 0 15px 0 rgba(70, 178, 230, 0.5);
	box-shadow: inset 0 0 15px 0 rgba(2, 162, 230, 0.5);
	color: #000; padding: 20px; }
mwl-calendar .cal-slide-content a.event-item { color: #000; font-weight: 400; }
mwl-calendar .event { height: 12px; width: 12px; }
mwl-calendar .events-list { font-size: 12px !important; }
mwl-calendar .cal-month-day { height: 70px; }
mwl-calendar .cal-day-today { background-color: #C5CAE9; }
mwl-calendar .cal-year-box [class*="span"], mwl-calendar .cal-month-box [class*="cal-cell"] { min-height: 70px; position: relative; }
mwl-calendar .cal-month-box .cal-day-today span[data-cal-date] { font-size: 1.7em; }
mwl-calendar .cal-day-today span[data-cal-date] { color: #000; }
mwl-calendar span[data-cal-date] {
	margin-right:2px;
	margin-top: 0;
}mwl-calendar .cal-month-box .cal-month-day .cal-events-num {
	 margin-left: 2px;
	 margin-top: 2px;
 }mwl-calendar .event {
	  height: 8px;
	  width: 8px;
  }
mwl-calendar .badge-important {
	background-color: #009688;
}
mwl-calendar .cal-day-today span[data-cal-date] {
	font-weight: 800;
}
/* PDF VIEWER */
.pdfjs #viewerContainer { background: lightgrey; bottom: 0; left: 0; overflow: auto; -webkit-overflow-scrolling: touch; position: absolute; right: 0; top: 32px; }
pdfjs-viewer { bottom:0; left: 0; position: absolute; right: 0; top: 60px; }

/* ========================================================================== */
/* MATERIAL DESIGN OVERRIDES
   ========================================================================== */
.iconstyle {height: 22px !important;line-height: 20px !important;padding: 0 !important;}
.siconstyle {height: 16px !important;line-height: 14px !important;padding: 0 !important;}
.iconastyle {height: 22px !important;line-height: 20px !important;padding: 8px 0 !important;}
md-content {
	padding : 0 0 4px 0;
}
md-sidenav.md-locked-open {
	max-width: 175px;
	min-width: 175px;
	width: 175px;
}
md-tabs [role="tabpanel"] {	transition: none; }
md-tabs .md-tab.md-active, md-tabs .md-tab.md-focused { color: #009688; }
.md-tab { padding: 10px; }
.md-fab:hover, .md-fab.md-focused { background-color: crimson !important; }
.md-accent { color: #FF5252; }
.md-button { max-width: 11em; min-width: 11em; }
.md-button.md-small { min-width: 1%; }
.md-button.md-icon-button { border-radius: 50%; height: 40px; line-height: 24px; margin: 0; min-width: 0; padding: 6px; width: 40px; }
.md-button.md-icon-button.md-small { border-radius: 50%; height: 40px; line-height: 24px; margin: 0; min-width: 0; padding: 0; width: 30px; }
.md-button.delete-btn { background: #009688; color: #fff; margin-right: 0; padding-left: 15px; padding-right: 15px; }
.md-icon-button-small {
	border-radius: 0;
	height: 17px;
	line-height: 17px;
	margin: 0 6px;
	min-width: 0;
	padding-left: 0;
	padding-right: 0;
	width: 17px;
}
.modal {
	float: left;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}
/* ========================================================================== */
/* TABLES
   ========================================================================== */

th { background-color: #b9def0; }

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
	border: 0.125px solid #ddd;
	border-collapse: collapse;
	line-height: 1.42857143;
	padding: 8px;
	vertical-align: top; }
.bordercollapse { border-collapse: collapse;}
.sorttables { border-collapse: collapse; }
.sorttables th { border-bottom: 1px solid; }
.sorttables td, .sorttables th { border: 1px solid lightgrey; padding: 5px 10px; }
.sorttables td:first-child, .friends th:first-child { border-left: none; }
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover { background-color: #b9def0; border-color: #337ab7; color: #00013a; }
.pagination>li>a,
.pagination > li:first-child > a, .pagination > li:first-child > span {
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
	font-size: 11px;
	margin-left: 0;
	padding: 7px;
}
.pagination>li>span { background-color: #fff; color: #00013a; }
.pagination { border-radius: 4px; display: inline-block; margin: 10px 0 5px 0; padding-left: 0; }
.search-icon { position: relative; right: 15px; }
.tb-form-control {
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	color: #555;
	display: block;
	font-size: 10px;
	height: 20px;
	padding: 2px 2px;
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	width: 100%;
}
.li-form-control {
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	color: #555;
	display: block;
	font-size: 11px;
	height: 28px;
	padding: 2px 4px;
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	width: 100%;
}
.li-form-label {
	font-size: 11px;
	font-weight: 700;
	max-width: 100%;
	padding:10px;
	width: 15%;
}
.form-control-paginate {
	background: #fff none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	color: #000;
	display: block;
	font-size: 11px;
	height: 30px;
	line-height: 1.42857143;
	padding: 2px;
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	width: 100%;
}
/* ========================================================================== */
/* FORM GROUP SIZES
   ========================================================================== */
.form-group   { margin: 0 10px 10px 0; }
.group-large  { width: 100% }
.group-80  { width: 80% }
.group-wide   { width: 360px; }
.group-med    { width: 320px; }
.group-normal { width: 150px; }
.group-small  { width: 100px; }
.group-smaller { width: 80px; }
.group-smallest { width: 60px; }
/* ========================================================================== */
/* BOOTSTRAP BUTTONS
   ========================================================================== */
a { color: #00013a; text-decoration: none; }
a:hover,
a:focus { color: #3f51b5; text-decoration: none; }
.button, button {
	-moz-appearance: none;
	-webkit-appearance: none;
	background: #b9def0;
	border: 1px solid transparent;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #00013a;
	cursor: pointer;
	display: inline-block;
	font-weight: 700;
	height: auto;
	line-height: 1.125;
	margin: 0;
	padding: .5em 1rem;
	text-decoration: none;
}
.btn-primary        { background-color: #009688; border-color: #009688; color: #fff; }
.btn-primary:active,
.btn-primary.active { background-color: #00736c; border-color: #00736c; }
.btn-primary:focus,
.btn-primary.focus  { background-color: #009688; border-color: #009688; color: #fff; }
.btn-primary:hover  { background-color: #00736c; border-color: #00736c; color: #fff; }
.btn-black          { background-color: #000000; border-color: #000000; color: #fff; }
.btn-black:active,
.btn-black.active   { background-color: #000000; border-color: #000000; }
.btn-black:focus,
.btn-black.focus    { background-color: #000000; border-color: #000000; color: #fff; }
.btn-black:hover    { background-color: #767676; border-color: #000000; color: #fff; }
.btn-ndis           { background-color: #6c246e; border-color: #581e5a; color: #fff; }
.btn-ndis:active,
.btn-ndis.active    { background-color: #6c246e; border-color: #581e5a; }
.btn-ndis:focus,
.btn-ndis.focus     { background-color: #6c246e; border-color: #581e5a; color: #fff; }
.btn-ndis:hover     { background-color: #9a319c; border-color: #581e5a; color: #fff; }
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary { background-color: #009688; border-color: #009688; color: #fff; }
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus { background-color: #009688; border-color: #009688; color: #fff; }
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary { background-image: none; }
.btn-primary:hover, .btn-primary:focus { background-color: #00736c; }
.btn-xero       { background-image: linear-gradient(#048abb,#048abb); border-color: #048abb; color: #fff; }
.btn-xero:focus { background-image: linear-gradient(#048abb, #048abb); border-color: #048abb; color: #fff; }
.btn-xero:hover { background-image: linear-gradient(#046b91,#046b91); border-color: #048abb; color: #fff; }

.btn-active        { background-image: linear-gradient(#b9def0,#b9def0); border-color: #b9def0; color: #000; }
.btn-active:focus  { background-image: linear-gradient(#83b0f0, #83b0f0); border-color: #b9def0; color: #000; }
.btn-active:hover  { background-image: linear-gradient(#83b0f0, #83b0f0); border-color: #b9def0; color: #000; }
.btn-inactive        { background-image: linear-gradient(#dbdc5e,#dbdc5e); border-color: #dbdc5e; color: #000; }
.btn-inactive:focus  { background-image: linear-gradient(#dcc55f, #dcc55f); border-color: #dbdc5e; color: #000; }
.btn-inactive:hover  { background-image: linear-gradient(#dcc55f, #dcc55f); border-color: #dbdc5e; color: #000; }
.btn-add        { background-image: linear-gradient(#a2dca6,#a2dca6); border-color: #a2dca6; color: #000; }
.btn-add:focus  { background-image: linear-gradient(#7ddc7c, #7ddc7c); border-color: #a2dca6; color: #000; }
.btn-add:hover  { background-image: linear-gradient(#7ddc7c, #7ddc7c); border-color: #a2dca6; color: #000; }
.btn-closed        { background-image: linear-gradient(#dc574c,#dc574c); border-color: #dc574c; color: #fff; }
.btn-closed:focus  { background-image: linear-gradient(#dc3e40, #dc3e40); border-color: #dc574c; color: #fff; }
.btn-closed:hover  { background-image: linear-gradient(#dc3e40, #dc3e40); border-color: #dc574c; color: #000; }

.btn-trans        { background-color: transparent; border-color: transparent; color: transparent;;margin:0; padding: 2px}
.btn-trans.focus        { background-color: #e8e8e8;}
pre {
	white-space: pre-wrap;       /* Since CSS 2.1 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
/* ========================================================================== */
/* SIDENAV HEADERS
   ========================================================================== */
.headcol { width:	25%; }
.headcol15 { width:	15%; }
/* ========================================================================== */
/* RESPONSIVE CSS
   ========================================================================== */

/* breakpoint for the header to go single line */
@media (max-width: 1000px) {
	.signin-card { max-width: 60%;padding: 0;width: 60%; }
	.signup-card { max-width: 60%;padding: 0;width: 60%; }
	.passwd-card { max-width: 60%;padding: 0;width: 60%; }
	md-sidenav.md-locked-open {
		max-width: 175px;
		min-width: 175px;
		width: 175px;
	}
}
@media (max-width: 900px) {
	.navbar-header { float: none; }
	.navbar-left,.navbar-right { float: none !important; }
	.navbar-toggle { display: block; }
	.navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
	.navbar-fixed-top { border-width: 0 0 1px; top: 0; }
	.navbar-collapse.collapse { display: none!important; }
	.collapse.in{ display:block !important; }
	.col-a { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-b { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-c { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-d { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-e { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-g { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-h { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-i { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-j { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-k { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-l { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-m { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-t { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-u { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.center-container { margin-left: auto; margin-right: auto; width: 100% !important; }
	.signin-card { max-width: 60%;padding: 0;width: 60%; }
	.signup-card { max-width: 60%;padding: 0;width: 60%; }
	.passwd-card { max-width: 60%;padding: 0;width: 60%; }
	md-sidenav.md-locked-open {
		max-width: 175px;
		min-width: 175px;
		width: 175px;
	}
}
@media (max-width: 800px) {
	.col-a { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-b { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-c { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-d { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-e { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-i { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-g { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-h { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-j { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-k { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-l { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-m { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-t { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-u { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.centerblock30 { margin-left: auto; margin-right: auto; width: 80% !important; }
	.centerblock40 { margin-left: auto; margin-right: auto; width: 80% !important; }
	.centerblock50 { margin-left: auto; margin-right: auto; width: 80% !important; }
	.centerblock60 { margin-left: auto; margin-right: auto; width: 80% !important; }
	.centerblock70 { margin-left: auto; margin-right: auto; width: 80% !important; }
	.centerblock80 { margin-left: auto; margin-right: auto; width: 80% !important; }
	.center-container { margin-left: auto; margin-right: auto; width: 80% !important; }
	.signin-card { max-width: 70%;padding: 0;width: 70%; }
	.signup-card { max-width: 70%;padding: 0;width: 70%; }
	.passwd-card { max-width: 70%;padding: 0;width: 70%; }
	md-sidenav.md-locked-open {
		max-width: 150px;
		min-width: 150px;
		width: 150px;
	}
}
@media (max-width: 610px) {
	h5 { font-size: 1.25rem; line-height: 1.5rem; }
	.col-a { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-b { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-c { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-d { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-e { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-i { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-g { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-h { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-j { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-k { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-l { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-m { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-t { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-u { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.centerblock30 { margin-left: auto; margin-right: auto; width: 100% !important; }
	.centerblock40 { margin-left: auto; margin-right: auto; width: 100% !important; }
	.centerblock50 { margin-left: auto; margin-right: auto; width: 100% !important; }
	.centerblock60 { margin-left: auto; margin-right: auto; width: 100% !important; }
	.centerblock70 { margin-left: auto; margin-right: auto; width: 100% !important; }
	.centerblock80 { margin-left: auto; margin-right: auto; width: 100% !important; }
	.center-container { margin-left: auto; margin-right: auto; width: 100% !important; }
	.signin-card { max-width: 80%;padding: 0;width: 80%; }
	.signup-card { max-width: 80%;padding: 0;width: 80%; }
	.passwd-card { max-width: 80%;padding: 0;width: 80%; }
	.pwgLogo    { margin: 5px 0 0 0; max-width: 8em;width:8em; }
	md-sidenav.md-locked-open {
		max-width: 125px;
		min-width: 125px;
		width: 125px;
	}
	#loading-bar-spinner { left: 35%; top: 30%; }
}
@media (max-width: 420px) {
	.col-a { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-b { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-c { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-d { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-e { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-i { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-g { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-h { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-j { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-k { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-l { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-m { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-t { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-u { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.centerblock30 { margin-left: auto; margin-right: auto; width: 100% !important; }
	.centerblock40 { margin-left: auto; margin-right: auto; width: 100% !important; }
	.centerblock50 { margin-left: auto; margin-right: auto; width: 100% !important; }
	.centerblock60 { margin-left: auto; margin-right: auto; width: 100% !important; }
	.centerblock70 { margin-left: auto; margin-right: auto; width: 100% !important; }
	.centerblock80 { margin-left: auto; margin-right: auto; width: 100% !important; }
	.center-container { margin-left: auto; margin-right: auto; width: 100% !important; }
	.signin-card { max-width: 95%;padding: 0;width: 95%; }
	.signup-card { max-width: 95%;padding: 0;width: 95%; }
	.passwd-card { max-width: 95%;padding: 0;width: 95%; }
	.pwgLogo    { margin: 5px 0 0 0; max-width: 7em;width:7em; }
	md-sidenav.md-locked-open {
		max-width: 95px;
		min-width: 95px;
		width: 95px;
	}
	#loading-bar-spinner { left: 35%; top: 30%; }
	.dash-container { padding: 0; }
	md-list-item.md-no-proxy, md-list-item .md-no-style { padding-left: 2px; padding-right: 2px; }
}
@media (max-width: 320px) {
	.col-a { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-b { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-c { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-d { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-e { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-i { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-g { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-h { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-j { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-k { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-l { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-m { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-t { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.col-u { -moz-box-flex: 0; -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.centerblock30 { margin-left: auto; margin-right: auto; width: 100% !important; }
	.centerblock40 { margin-left: auto; margin-right: auto; width: 100% !important; }
	.centerblock50 { margin-left: auto; margin-right: auto; width: 100% !important; }
	.centerblock60 { margin-left: auto; margin-right: auto; width: 100% !important; }
	.centerblock70 { margin-left: auto; margin-right: auto; width: 100% !important; }
	.centerblock80 { margin-left: auto; margin-right: auto; width: 100% !important; }
	.center-container { margin-left: auto; margin-right: auto; width: 100% !important; }
	.signin-card { max-width: 95%;padding: 0;width: 95%; }
	.signup-card { max-width: 95%;padding: 0;width: 95%; }
	.passwd-card { max-width: 95%;padding: 0;width: 95%; }
	.pwgLogo    { margin: 5px 0 0 0; max-width: 7em;width:7em; }
	md-sidenav.md-locked-open {
		max-width: 55px;
		min-width: 55px;
		width: 55px;
	}
	#loading-bar-spinner { left: 35%; top: 30%; }
}

/* ==================================================
   BILLS SECTION
================================================== */

.bills-section {
	margin-top: 24px;
}

/* ==================================================
   SECTION HEADER
================================================== */

.section-header-bills {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.section-title-bills {
	align-items: center;
	color: #1e293b;
	display: flex;
	font-size: 22px;
	font-weight: 600;
	gap: 10px;
}

.section-title-bills i {
	align-items: center;
	background: #e7fdec;
	border-radius: 50%;
	color: #00897B;
	display: flex;
	font-size: 18px;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.bills-count-badge {
	align-items: center;
	background: #00897B;
	border-radius: 999px;
	color: white;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	height: 24px;
	justify-content: center;
	min-width: 24px;
	padding: 0 8px;
}
.bill-provider-group {
	align-items: center;
	display: flex;
	gap: 12px;
}

.bill-provider-logo {
	align-items: center;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	display: flex;
	flex-shrink: 0;
	height: 52px;
	justify-content: center;
	overflow: hidden;
	width: 52px;
}

.bill-provider-logo img {
	height: 100%;
	object-fit: contain;
	padding: 3px;
	width: 100%;
}
/* ==================================================
   SEARCH
================================================== */

.bills-search {
	margin-bottom: 16px;
}

.bill-search-input {
	border: 1px solid #d1d5db;
	border-radius: 12px;
	color: #1e293b;
	font-size: 14px;
	max-width: 800px;
	padding: 12px 16px;
	transition: all 0.2s ease;
	width: 100%;
}

.bill-search-input:focus {
	border-color: #14b8a6;
	box-shadow: 0 0 0 3px rgba(20,184,166,.15);
	outline: none;
}

/* ==================================================
   FILTER CHIPS
================================================== */

.bill-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.filter-chip {
	align-items: center;
	background: white;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	color: #475569;
	cursor: pointer;
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	gap: 8px;
	padding: 8px 14px;
	transition: all 0.2s ease;
}

.filter-chip:hover {
	border-color: #14b8a6;
	color: #0f766e;
}

.filter-chip.active {
	background: #14b8a6;
	border-color: #14b8a6;
	color: white;
}

.filter-count {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: 11px;
	font-weight: 700;
	height: 22px;
	justify-content: center;
	min-width: 22px;
	padding: 0 6px;
}

.filter-chip.active .filter-count {
	background: rgba(255,255,255,.25);
}

.filter-chip:not(.active) .filter-count {
	background: #e2e8f0;
	color: #475569;
}

/* ==================================================
   BILL GRID
================================================== */

.bills-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}

/* ==================================================
   BILL CARD
================================================== */

.bill-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0,0,0,.04);
	padding: 4px;
	transition:
			transform .2s ease,
			box-shadow .2s ease,
			border-color .2s ease;
}

.bill-card:hover {
	border-color: #14b8a6;
	box-shadow: 0 10px 24px rgba(0,0,0,.08);
	transform: translateY(-3px);
}

/* ==================================================
   HEADER
================================================== */

.bill-header {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 12px;
}

.bill-provider {
	color: #1e293b;
	font-size: 17px;
	font-weight: 700;
}

.bill-service {
	color: #64748b;
	font-size: 13px;
	margin-top: 4px;
}

.bill-number {
	color: #0f766e;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 8px;
}

/* ==================================================
   METRICS
================================================== */

.bill-metrics {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 16px;
}

.bill-metrics .metric-card {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 8px;
	text-align: center;
}

.bill-metrics .amount {
	background: #f0fdfa;
	border-color: #ccfbf1;
}

.metric-value {
	color: #0f766e;
	font-size: 18px;
	font-weight: 700;
}

.metric-label {
	color: #64748b;
	font-size: 12px;
	margin-top: 4px;
}
.bill-number {
	color: #0f766e;
	cursor: pointer;
	transition: color 0.2s ease;
}

.bill-number:hover {
	color: #14b8a6;
}
/* ==================================================
   FOOTER
================================================== */

.bill-footer {
	border-top: 1px solid #f1f5f9;
	padding-top: 10px;
}
.bill-action-btn {
	align-items: center;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 999px;
	color: #2563eb;
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	gap: 6px;
	margin: 4px 0;
	padding: 8px 14px;
	transition: all 0.2s ease;
}

.bill-action-btn:hover {
	background: #2563eb;
	color: white;
}
/* ==================================================
   STATUS CHIPS
================================================== */

.status-chip,
.info-chip {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	gap: 6px;
	padding: 6px 12px;
}

.status-chip.active {
	background: #ecfdf5;
	border: 1px solid #bbf7d0;
	color: #15803d;
}

.status-chip.warning {
	background: #fff7ed;
	border: 1px solid #fed7aa;
	color: #ea580c;
}

.status-chip.scheduled {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #2563eb;
}

.status-chip.underreview {
	background: #fff7ed;
	border: 1px solid #fed7aa;
	color: #ea580c;
}

.status-chip.disputed {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	color: #475569;
}

.status-chip.notapproved {
	background: #ffecec;
	border: 1px solid #ff5c35;
	color: #ff0000;
}

.status-chip.notconfirmed {
	background: #ffecec;
	border: 1px solid #ff5c35;
	color: #ff0000;
}
.info-chip {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	color: #475569;
}
.info-chip.due {
	background: #eff6ff;
	color: #2563eb;
}

.info-chip.claimed {
	background: #ecfdf5;
	color: #059669;
}
/* ==========================================
   PROVIDER FILTERS
========================================== */

.provider-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.provider-chip {
	align-items: center;
	background: white;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	color: #475569;
	cursor: pointer;
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	gap: 8px;
	height: 26px;
	padding: 0 14px;
	transition: all .2s ease;
}

.provider-chip:hover {
	border-color: #14b8a6;
	color: #0f766e;
}

.provider-chip.active {
	background: #0f766e;
	border-color: #0f766e;
	color: white;
}

.provider-chip.active .filter-count {
	background: rgba(255,255,255,.25);
}

.provider-chip:not(.active) .filter-count {
	background: #e2e8f0;
	color: #475569;
}.filter-chip.active,
 .provider-chip.active {
	 box-shadow: 0 4px 12px rgba(20,184,166,.25);
	 transform: translateY(-1px);
 }
.empty-state {
	align-items: center;
	background: #ffffff;
	border: 1px dashed #d1d5db;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	grid-column: 1 / -1;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
}

.empty-state i {
	color: #94a3b8;
	font-size: 42px;
	margin-bottom: 12px;
}

.empty-state h4 {
	color: #1e293b;
	font-size: 20px;
	margin: 0 0 8px;
}

.empty-state p {
	color: #64748b;
	margin: 0;
}
.empty-state-btn {
	background: #14b8a6;
	border: none;
	border-radius: 10px;
	color: white;
	cursor: pointer;
	font-weight: 600;
	margin-top: 16px;
	padding: 10px 18px;
}

.empty-state-btn:hover {
	background: #0f766e;
}
.results-summary {
	color: #64748b;
	font-size: 13px;
	font-weight: 500;
	margin: 0 0 16px;
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 768px) {

	.section-title {
		font-size: 18px;
	}

	.bills-grid {
		grid-template-columns: 1fr;
	}

	.bill-metrics {
		grid-template-columns: 1fr;
	}

	.bill-header {
		flex-direction: column;
	}

	.filter-chip {
		flex: 1;
		justify-content: center;
	}

	.bill-search-input {
		max-width: 100%;
	}
}


.claim-section {
	margin-top: 24px;
}

.section-header-claim {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.section-title-claim {
	align-items: center;
	color: #1e293b;
	display: flex;
	font-size: 22px;
	font-weight: 600;
	gap: 10px;
}

.section-title-claim i {
	align-items: center;
	background: #fdebe6;
	border-radius: 50%;
	color: #F4511E;
	display: flex;
	font-size: 18px;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.section-subtitle-claim {
	color: #64748b;
	display: block;
	font-size: 13px;
	margin-top: 6px;
}
/* ==========================================
   CLAIM CARD
========================================== */

.claim-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0,0,0,.04);
	padding: 24px;
}

/* ==========================================
   HEADER
========================================== */

.claim-header {
	align-items: center;
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
}

.claim-icon {
	align-items: center;
	background: #eff6ff;
	border-radius: 50%;
	color: #2563eb;
	display: flex;
	flex-shrink: 0;
	font-size: 20px;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.claim-header-content h3 {
	color: #1e293b;
	font-size: 22px;
	font-weight: 700;
	margin: 0;
}

.claim-header-content p {
	color: #64748b;
	margin: 4px 0 0;
}

/* ==========================================
   UPLOAD AREA
========================================== */

.upload-zone {
	background: #f8fafc;
	border: 2px dashed #cbd5e1;
	border-radius: 16px;
	padding: 40px 24px;
	text-align: center;
	transition: all .2s ease;
}

.upload-zone:hover {
	background: #f0fdfa;
	border-color: #14b8a6;
}

.upload-icon {
	color: #14b8a6;
	font-size: 46px;
	margin-bottom: 12px;
}

.upload-content h4 {
	color: #1e293b;
	margin: 0 0 8px;
}

.upload-content p {
	color: #64748b;
	margin-bottom: 20px;
}

.upload-btn {
	align-items: center;
	background: #14b8a6;
	border-radius: 10px;
	color: white;
	cursor: pointer;
	display: inline-flex;
	font-weight: 600;
	gap: 8px;
	padding: 12px 20px;
	transition: all .2s ease;
}

.upload-btn:hover {
	background: #0f766e;
}

.upload-help {
	color: #64748b;
	font-size: 13px;
	margin-top: 12px;
}

/* ==========================================
   FILE SELECTED
========================================== */

.file-selected-card {
	align-items: center;
	background: #ecfdf5;
	border: 1px solid #bbf7d0;
	border-radius: 16px;
	display: flex;
	gap: 18px;
	margin-top: 20px;
	padding: 20px;
}

.file-selected-icon {
	align-items: center;
	background: white;
	border-radius: 50%;
	display: flex;
	flex-shrink: 0;
	height: 60px;
	justify-content: center;
	width: 60px;
}

.file-selected-icon i {
	color: #16a34a;
	font-size: 28px;
}

.file-selected-details {
	flex: 1;
}

.file-selected-title {
	color: #166534;
	font-size: 18px;
	font-weight: 700;
}

.file-selected-name {
	color: #1e293b;
	font-size: 14px;
	margin-top: 4px;
}

.file-selected-size {
	color: #64748b;
	font-size: 12px;
	margin-top: 4px;
}

.file-selected-actions {
	display: flex;
	gap: 10px;
}

/* ==========================================
   STEPS
========================================== */

.claim-steps {
	display: grid;
	gap: 12px;
	margin-top: 24px;
}

.step-item {
	align-items: center;
	color: #334155;
	display: flex;
	gap: 10px;
}

.step-item i {
	color: #16a34a;
}

/* ==========================================
   BUTTONS
========================================== */

.btn-primary {
	background: #14b8a6;
	border: none;
	border-radius: 10px;
	color: white;
	cursor: pointer;
	font-weight: 600;
	padding: 10px 18px;
}

.btn-primary:hover {
	background: #0f766e;
}

.btn-secondary {
	background: white;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	color: #475569;
	cursor: pointer;
	font-weight: 600;
	padding: 10px 18px;
}

.btn-secondary:hover {
	background: #f8fafc;
}
.upload-zone {
	background: #f8fffe;
	border: 2px dashed #cbd5e1;
	border-radius: 16px;
	padding: 40px 24px;
	position: relative;
	text-align: center;
	transition: all .25s ease;
}

.upload-zone:hover {
	background: #f0fdfa;
	border-color: #14b8a6;
}

/* Active drag state */

.upload-zone.drag-over {
	background: #ecfdf5;
	border-color: #14b8a6;
	box-shadow: 0 0 0 4px rgba(20,184,166,.15);
	transform: scale(1.01);
}

.upload-zone.drag-over .upload-icon {
	transform: translateY(-4px);
}

/* Upload icon */

.upload-icon {
	color: #14b8a6;
	font-size: 46px;
	margin-bottom: 12px;
	transition: all .25s ease;
}

/* Divider */

.upload-divider {
	align-items: center;
	color: #94a3b8;
	display: flex;
	font-size: 13px;
	font-weight: 600;
	justify-content: center;
	margin: 16px 0;
}

.upload-divider:before,
.upload-divider:after {
	background: #e2e8f0;
	content: "";
	height: 1px;
	margin: 0 12px;
	width: 60px;
}
.file-chip {
	align-items: center;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 999px;
	color: #1d4ed8;
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	gap: 6px;
	margin-top: 8px;
	padding: 4px 10px;
}
/*.claims-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}*/
/*.claims-summary {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(5, 1fr);
}*/
.claims-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}

.claim-chip {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	cursor: pointer;
	margin-bottom: 10px;
	min-height: 110px;
	min-width: 140px;
	padding: 16px;
	text-align: center;
	transition: all .2s ease;
	width: 100%;
}
.claim-chip:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,.08);
	transform: translateY(-2px);
}

.claim-chip i {
	display: block;
	font-size: 20px;
	margin-bottom: 8px;
}

.claim-chip .chip-value {
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

.claim-chip .chip-label {
	color: #64748b;
	font-size: 13px;
	margin-top: 6px;
}

.claim-chip.warning i {
	color: #f59e0b;
}

.claim-chip.inprogress i {
	color: #2563eb;
}

.claim-chip.success i {
	color: #22c55e;
}

.claim-chip.danger i {
	color: #ef4444;
}.claim-chip.active {
	 background: #ecfeff;
	 border: 2px solid #14b8a6;
	 box-shadow: 0 6px 14px rgba(20,184,166,.15);
 }

.claim-chip.active .chip-value,
.claim-chip.active .chip-label,
.claim-chip.active i {
	color: #0f766e;
}
/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

	.claim-header {
		align-items: flex-start;
	}

	.upload-zone {
		padding: 24px 16px;
	}

	.file-selected-card {
		align-items: flex-start;
		flex-direction: column;
	}

	.file-selected-actions {
		flex-direction: column;
		width: 100%;
	}

	.btn-primary,
	.btn-secondary {
		width: 100%;
	}
}

.claims-summary {
	grid-template-columns: repeat(3, 1fr);
}
/* Mobile */
@media (max-width: 576px) {
	.claims-summary {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.claim-chip {
		min-height: 90px;
		padding: 10px;
	}

	.claim-chip i {
		font-size: 18px;
	}

	.chip-value {
		font-size: 24px;
	}

	.chip-label {
		font-size: 12px;
	}
}

/* ==========================================
   CONTACTS SECTION
========================================== */

.contacts-section {
	margin-top: 24px;
}

.section-header-contacts {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.section-title-contacts {
	align-items: center;
	color: #1e293b;
	display: flex;
	font-size: 22px;
	font-weight: 600;
	gap: 10px;
}

.section-title-contacts i {
	align-items: center;
	background: #e0defd;
	border-radius: 50%;
	color: #8E24AA;
	display: flex;
	font-size: 18px;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.contacts-count-badge {
	align-items: center;
	background: #8E24AA;
	border-radius: 999px;
	color: white;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	height: 24px;
	justify-content: center;
	min-width: 24px;
	padding: 0 8px;
}


/* ==========================================
   CONTACT GRID
========================================== */

.contacts-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}


/* ==========================================
   CONTACT CARD
========================================== */

.contact-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	padding: 18px;
	transition: all 0.25s ease;
}

.contact-card:hover {
	border-color: #14b8a6;
	box-shadow: 0 8px 20px rgba(0,0,0,0.08);
	transform: translateY(-2px);
}


/* ==========================================
   CONTACT HEADER
========================================== */

.contact-card-header {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
}

.contact-avatar {
	align-items: center;
	background: #f0fdfa;
	border-radius: 50%;
	color: #0f766e;
	display: flex;
	flex-shrink: 0;
	font-size: 18px;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.contact-name {
	color: #1e293b;
	font-size: 16px;
	font-weight: 600;
}

.contact-role {
	color: #64748b;
	font-size: 13px;
	margin-top: 2px;
}


/* ==========================================
   CONTACT DETAILS
========================================== */

.contact-details {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.contact-item {
	align-items: center;
	color: #334155;
	display: flex;
	font-size: 14px;
	gap: 10px;
}

.contact-item i {
	align-items: center;
	background: #f8fafc;
	border-radius: 50%;
	color: #0f766e;
	display: flex;
	flex-shrink: 0;
	height: 28px;
	justify-content: center;
	width: 28px;
}

.contact-item a {
	color: #2563eb;
	text-decoration: none;
}

.contact-item a:hover {
	text-decoration: underline;
}


/* ==========================================
   CONTACT FOOTER
========================================== */

.contact-footer {
	border-top: 1px solid #f1f5f9;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
}


/* ==========================================
   STATUS CHIPS
========================================== */

.status-chip,
.info-chip {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	gap: 6px;
	padding: 6px 12px;
}

.status-chip.active {
	background: #ecfdf5;
	border: 1px solid #bbf7d0;
	color: #15803d;
}

.status-chip.inactive {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #dc2626;
}

.info-chip {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #1d4ed8;
}

.info-chip.active {
	background: #ecfdf5;
	border: 1px solid #bbf7d0;
	color: #15803d;
}

.info-chip.inactive {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #dc2626;
}


/* ==========================================
   OPTIONAL ACTION BUTTONS
========================================== */

.contact-actions {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}

.contact-action-btn {
	align-items: center;
	background: #f8fafc;
	border: none;
	border-radius: 50%;
	color: #475569;
	cursor: pointer;
	display: flex;
	height: 36px;
	justify-content: center;
	transition: all 0.2s ease;
	width: 36px;
}

.contact-action-btn:hover {
	background: #f0fdfa;
	color: #0f766e;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

	.section-title {
		font-size: 18px;
	}

	.section-title i {
		font-size: 16px;
		height: 36px;
		width: 36px;
	}

	.contacts-grid {
		grid-template-columns: 1fr;
	}

	.contact-card {
		padding: 16px;
	}

	.contact-footer {
		align-items: flex-start;
		flex-direction: column;
	}
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
	display: none !important;
}
.active { background-color: #009688; }.progress {
	background-color: #009688;
	background-image: -webkit-linear-gradient(top, #009688 0%, #00c9b4 100%);
	background-image: -o-linear-gradient(top, #009688 0%, #00c9b4 100%);
	background-image: -moz-linear-gradient(top, #009688 0%, #00c9b4 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#009688), to(#00c9b4));
	background-image: linear-gradient(to bottom, #009688 0%, #00c9b4 100%);
	background-repeat: repeat-x;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff009688', endColorstr='#ff00c9b4', GradientType=0);
	height: 20px;
	margin: 5px 0;
	overflow: hidden;
}

.typeahead-codes .custom-popup-wrapper > .message {
	border-bottom: 1px solid #ddd;
	color: #868686;
	padding: 10px 20px;
}

.typeahead-codes .custom-popup-wrapper > .dropdown-menu {
	background-color: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	display: block;
	float: none;
	min-width: 160px;
	position: static;
}
/*!
 * angular-loading-bar v0.9.0
 * https://chieffancypants.github.io/angular-loading-bar
 * Copyright (c) 2016 Wes Cruver
 * License: MIT
 */

/* Make clicks pass-through */
#loading-bar,
#loading-bar-spinner {
	pointer-events: none;
	-webkit-pointer-events: none;
	-webkit-transition: 350ms linear all;
	-moz-transition: 350ms linear all;
	-o-transition: 350ms linear all;
	transition: 350ms linear all;
}

#loading-bar.ng-enter,
#loading-bar.ng-leave.ng-leave-active,
#loading-bar-spinner.ng-enter,
#loading-bar-spinner.ng-leave.ng-leave-active {
	opacity: 0;
}

#loading-bar.ng-enter.ng-enter-active,
#loading-bar.ng-leave,
#loading-bar-spinner.ng-enter.ng-enter-active,
#loading-bar-spinner.ng-leave {
	opacity: 1;
}

#loading-bar .bar {
	background: #E6AFFC;
	border-bottom-right-radius: 1px;
	border-top-right-radius: 1px;
	height: 8px;
	left: 0;
	position: fixed;
	top: 55px;
	-webkit-transition: width 350ms;
	-moz-transition: width 350ms;
	-o-transition: width 350ms;
	transition: width 350ms;
	width: 100%;
	z-index: 10002;
}

/* Fancy blur effect */
/*#loading-bar .peg {
	-moz-border-radius: 100%;
	-moz-box-shadow: #E6AFFC 1px 0 6px 1px;
	-ms-box-shadow: #E6AFFC 1px 0 6px 1px;
	-webkit-border-radius: 100%;
	-webkit-box-shadow: #E6AFFC 1px 0 6px 1px;
	border-radius: 100%;
	box-shadow: #E6AFFC 1px 0 6px 1px;
	height: 2px;
	opacity: .45;
	position: absolute;
	right: 0;
	top: 0;
	width: 70px;
}*/

#loading-bar-spinner {
	display: block;
	left: 45%;
	position: fixed;
	top: 60px;
	z-index: 10002;
}

#loading-bar-spinner .spinner-icon {
	-webkit-animation: loading-bar-spinner 400ms linear infinite;
	-moz-animation:    loading-bar-spinner 400ms linear infinite;
	-ms-animation:     loading-bar-spinner 400ms linear infinite;
	-o-animation:      loading-bar-spinner 400ms linear infinite;
	animation:         loading-bar-spinner 400ms linear infinite;
	border:  solid 8px transparent;
	border-left-color: #E6AFFC;
	border-radius: 50%;
	border-top-color:  #E6AFFC;
	height: 55px;
	width: 55px;
}

@-webkit-keyframes loading-bar-spinner {
	0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes loading-bar-spinner {
	0%   { -moz-transform: rotate(0deg);   transform: rotate(0deg); }
	100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes loading-bar-spinner {
	0%   { -o-transform: rotate(0deg);   transform: rotate(0deg); }
	100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes loading-bar-spinner {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.error-page {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 70vh;
	padding: 40px 20px;
}

.error-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
	max-width: 500px;
	padding: 40px;
	text-align: center;
	width: 100%;
}

.error-icon {
	color: #3b82f6;
	font-size: 48px;
	margin-bottom: 20px;
}

.error-code {
	color: #e11d48;
	font-size: 64px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 16px;
}

.error-title {
	color: #1f2937;
	font-size: 30px;
	margin: 0 0 12px;
}

.error-message {
	color: #6b7280;
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

.error-help {
	color: #6b7280;
	font-size: 12px;
	line-height: 1.6;
	margin: 20px auto;
}

.error-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 32px;
}
.error-reference {
	color: #9ca3af;
	font-size: 12px;
	margin-top: 24px;
}
.error-detail {
	background: #f8fafc;
	border-radius: 8px;
	color: #64748b;
	font-size: 14px;
	margin-top: 20px;
	padding: 12px;
}

/* ==========================================
   EXPIRED PLANS
========================================== */

.expired-plans-section {
	margin-top: 24px;
}

.section-header-expired {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.section-title-expired {
	align-items: center;
	color: #1e293b;
	display: flex;
	font-size: 22px;
	font-weight: 600;
	gap: 10px;
}

.section-title-expired i {
	align-items: center;
	background: #cacaca;
	border-radius: 50%;
	color: #212121;
	display: flex;
	font-size: 18px;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.section-subtitle-expired {
	color: #64748b;
	display: block;
	font-size: 13px;
	margin-top: 6px;
}
.expired-count-badge {
	align-items: center;
	background: #212121;
	border-radius: 999px;
	color: white;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	height: 24px;
	justify-content: center;
	min-width: 24px;
	padding: 0 8px;
}
.expired-plans-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
}

/* ==========================================
   CARD
========================================== */

.expired-plan-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0,0,0,.04);
	padding: 20px;
	transition: all .25s ease;
}

.expired-plan-card:hover {
	box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* ==========================================
   HEADER
========================================== */

.expired-plan-header {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.expired-plan-title {
	color: #1e293b;
	font-size: 18px;
	font-weight: 700;
}

.expired-plan-dates {
	color: #64748b;
	font-size: 13px;
	margin-top: 4px;
}

/* ==========================================
   METRICS
========================================== */

.expired-plan-metrics {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, 1fr);
}
/* ==========================================
   FOOTER
========================================== */

.expired-plan-footer {
	border-top: 1px solid #f1f5f9;
	margin-top: 16px;
	padding-top: 16px;
}
.empty-state-card {
	background: #fff;
	border: 1px solid #dfe7ea;
	border-radius: 20px;
	margin: 40px auto;
	max-width: 700px;
	padding: 48px 32px;
	text-align: center;
}

.empty-state-icon {
	align-items: center;
	background: #f3f4f6;
	border-radius: 50%;
	color: #7c3aed;
	display: flex;
	font-size: 34px;
	height: 80px;
	justify-content: center;
	margin: 0 auto 20px;
	width: 80px;
}

.empty-state-title {
	color: #222;
	font-size: 1.6rem;
	font-weight: 700;
	margin: 0 0 12px;
}

.empty-state-message {
	color: #667085;
	line-height: 1.6;
	margin: 0 auto;
	max-width: 500px;
}

.funding-period {
	margin-top: 24px;
}

/*.funding-period-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
}*/

.funding-period-header {
	align-items: center;
	color: #475569;
	display: flex;
	font-size: 0.9rem;
	font-weight: 600;
	justify-content: space-between;
	margin: 10px 0 4px 0;
}

.period-bar {
	background: #d9dde3;
	border-radius: 20px;
	height: 18px;
	overflow: visible;
	position: relative;
}

.period-fill {
	border-radius: 20px;
	height: 100%;
	transition: width .3s ease;
}

.period-not-funded {
	background: #9ca3af;
}

.period-under {
	background: linear-gradient(
			90deg,
			#3b82f6,
			#2563eb
	);
}

.period-good {
	background: linear-gradient(
			90deg,
			#22c55e,
			#16a34a
	);
}

.period-warning {
	background: linear-gradient(
			90deg,
			#f59e0b,
			#ea580c
	);
}

.period-high-risk {
	background: linear-gradient(
			90deg,
			#d97706,
			#b45309
	);
}

.period-danger {
	background: linear-gradient(
			90deg,
			#ef4444,
			#dc2626
	);
}

.period-danger {
	background: linear-gradient(
			90deg,
			#ef4444,
			#dc2626
	);
}

.period-marker {
	position: absolute;
	top: -4px;
	transform: translateX(-50%);
}

.period-marker-line {
	background: #64748b;
	height: 22px;
	opacity: .6;
	width: 2px;
}

.period-marker-label {
	color: #64748b;
	font-size: 10px;
	font-weight: 500;
	margin: 3px;
	text-align: center;
	white-space: nowrap;
}

.period-summary {
	color: #475569;
	font-size: 13px;
	margin-top: 30px;
	text-align: center;
}
.message-under {
	background: #dbeafe;
	color: #1d4ed8;
}
.message-good {
	background: #dcfce7;
	color: #166534;
}
.message-warning {
	background: #fafebe;
	color: #b45309;
}
.message-high-risk {
	background: #fec79a;
	color: #9a3412;
}
.message-danger {
	background: #ff7972;
	color: #991b1b;
}
.variance-message {
	border-radius: 999px;
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
}
.spent-percentage {
	color: #6b7280;
	font-size: 0.85em;
	font-weight: 400;
	margin-left: 4px;
}

.claim-amount {
	color: #111827;
	font-size: 16px;
	font-weight: 700;
	min-width: 120px;
	text-align: right;
}

.claim-status {
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	margin-left: 16px;
	min-width: 140px;
	padding: 6px 12px;
	text-align: center;
}

.claim-status.uploaded {
	background: #dbeafe;
	color: #1d4ed8;
}

.claim-status.open {
	background: #fef3c7;
	color: #92400e;
}

.claim-status.completed {
	background: #dcfce7;
	color: #166534;
}

.statement-actions {
	margin-left: 16px;
}

.statement-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.empty-state {
	padding: 40px 20px;
	text-align: center;
}

.empty-icon {
	font-size: 48px;
	margin-bottom: 12px;
}
.metrics-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 24px;
}
.statement-meta.invoice-number {
	color: #374151;
	font-weight: 500;
}
/* ==========================================
   METRICS
========================================== */

.metrics-grid {
	display: flex;
	gap: 14px;
	margin-bottom: 24px;
}

.metric-card {
	align-items: center;
	background: #ffffff;
	border: 1px solid #dbe3ea;
	border-left: 4px solid #14b8a6;
	border-radius: 16px;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	min-height: 110px;
	padding: 18px;
	text-align: center;
	transition: all .2s ease;
}

.metric-card:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.metric-card.active {
	background: #f0fdfa;
	border-color: #14b8a6;
	box-shadow:
			0 0 0 1px #14b8a6,
			0 4px 12px rgba(20,184,166,.10);
}
.metric-card.uploaded {
	border-left-color: #3b82f6;
}

.metric-card.open {
	border-left-color: #f59e0b;
}

.metric-card.completed {
	border-left-color: #22c55e;
}

.metric-icon {
	font-size: 26px;
	line-height: 1;
	margin-bottom: 10px;
}

.metric-value {
	color: #0f172a;
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
}

.metric-label {
	color: #64748b;
	font-size: 14px;
	font-weight: 500;
	margin-top: 10px;
}
.metric-card {
	cursor: pointer;
	transition: all .2s ease;
}

.metric-card:hover {
	box-shadow: 0 6px 16px rgba(0,0,0,.08);
	transform: translateY(-2px);
}
/* ==========================================
   MOBILE
========================================== */

@media (max-width: 992px) {

	.metrics-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (max-width: 576px) {

	.metrics-grid {
		grid-template-columns: 1fr;
	}

}
@media (max-width: 768px) {

	.statement-card {
		align-items: flex-start;
		flex-direction: column;
	}

	.claim-amount,
	.claim-status,
	.statement-actions {
		margin-left: 0;
		text-align: center;
	}

}

.participant-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	margin-bottom: 24px;
	overflow: hidden;
}

/* Header */

.participant-header {
	align-items: center;
	color: white;
	display: flex;
	padding: 24px;
}

.participant-avatar {
	align-items: center;
	background: rgba(255,255,255,0.2);
	border-radius: 50%;
	display: flex;
	font-size: 28px;
	height: 72px;
	justify-content: center;
	margin-right: 20px;
	width: 72px;
}
.participant-avatar img {
	border: 3px solid #009688;
}
.participant-info {
	flex: 1;
}

.participant-info h2 {
	color: #000;
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 8px;
}

.participant-actions {
	align-items: center;
	display: flex;
}

.participant-subtitle {
	color: #64748b;
	font-size: 14px;
	margin-top: 4px;
}

/* New summary section */

.participant-summary {
	background: #fafafa;
	border-top: 1px solid #e5e7eb;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 16px 24px;
}
/* Status */

.status-pill {
	align-items: center;
	border-radius: 20px;
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	gap: 6px;
	padding: 6px 12px;
}

.status-pill.active {
	background: rgba(255,255,255,0.25);
	color: #fff;
}

/* Details */

.participant-details {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	padding: 20px;
}
.detail-card {
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 16px;
}
.detail-label {
	color: #64748b;
	font-size: 13px;
	font-weight: 600;
}
.detail-label i {
	align-items: center;
	background: #e6fffb;
	border-radius: 50%;
	color: #0f766e;
	display: inline-flex;
	height: 28px;
	justify-content: center;
	width: 28px;
}
.detail-value {
	color: #1e293b;
	font-size: 14px;
	font-weight: 500;
	word-break: break-all;
}
/* Buttons */

.icon-btn {
	background: #e6fffb;
	border: none;
	border-radius: 50%;
	color: white;
	cursor: pointer;
	height: 40px;
	width: 40px;
}

.icon-btn:hover {
	background: rgba(255,255,255,0.3);
}
.participant-chips {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:10px;
}

.summary-chip {
	background: #f0fdfa;
	border: 1px solid #ccfbf1;
	border-radius: 20px;
	color: #0f766e;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 12px;
}
.security-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.05);
	margin-top: 20px;
	padding: 24px;
}

.security-header {
	align-items: center;
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
}

.security-header i {
	align-items: center;
	background: #ecfdf5;
	border-radius: 50%;
	color: #15803d;
	display: flex;
	font-size: 20px;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.security-header h3 {
	font-size: 22px;
	margin: 0;
}

.security-header p {
	color: #64748b;
	margin: 4px 0 0;
}

.security-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.password-group label {
	color: #475569;
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.password-group input {
	border: 1px solid #d1d5db;
	border-radius: 10px;
	font-size: 14px;
	padding: 12px 14px;
	width: 100%;
}

.password-group input:focus {
	border-color: #14b8a6;
	box-shadow: 0 0 0 3px rgba(20,184,166,0.15);
	outline: none;
}

.security-footer {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	margin-top: 24px;
}

.btn-primary {
	background: #14b8a6;
	border: none;
	border-radius: 10px;
	color: white;
	font-weight: 600;
	padding: 10px 18px;
}

.btn-secondary {
	background: white;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	color: #64748b;
	padding: 10px 18px;
}
.avatar-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	box-shadow: 0 4px 12px rgba(0,0,0,.05);
	margin: 0 auto;
	max-width: 500px;
	padding: 24px;
}

.avatar-header {
	align-items: center;
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
}

.avatar-icon {
	align-items: center;
	background: #f0fdfa;
	border-radius: 50%;
	color: #0f766e;
	display: flex;
	font-size: 22px;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.avatar-header h3 {
	font-size: 22px;
	margin: 0;
}

.avatar-header p {
	color: #64748b;
	margin: 4px 0 0;
}

.avatar-content {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.avatar-preview {
	height: 140px;
	width: 140px;
}

.avatar-preview img {
	border: 4px solid #14b8a6;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.avatar-footer {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 24px;
}

/* ==================================================
	PLANS SECTION
================================================== */

.plans-section {
	margin-top: 24px;
}


.section-header-plans {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.section-title-plans {
	align-items: center;
	color: #1e293b;
	display: flex;
	font-size: 22px;
	font-weight: 600;
	gap: 10px;
}

.section-title-plans i {
	align-items: center;
	background: #b9d2fd;
	border-radius: 50%;
	color: #3949AB;
	display: flex;
	font-size: 18px;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.section-subtitle-plans {
	color: #64748b;
	display: block;
	font-size: 13px;
	margin-top: 6px;
}
.plans-count-badge {
	align-items: center;
	background: #3949AB;
	border-radius: 999px;
	color: white;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	height: 24px;
	justify-content: center;
	min-width: 24px;
	padding: 0 8px;
}

.dashboard-card {
	background: #ffffff;
	border: 1px solid #dbe3ea;
	border-radius: 16px;
	margin-bottom: 24px;
	padding: 10px;
}

.sub-section-title-plan {
	align-items: center;
	color: #1e293b;
	display: flex;
	font-size: 18px;
	font-weight: 600;
	gap: 10px;
}

/* ==========================================
   PLAN TIMELINE
========================================== */

.plan-timeline {
	margin-top: 60px;
	width: 100%
}

.timeline-progress {
	background: #e5e7eb;
	border-radius: 999px;
	height: 10px;
	position: relative;
	width: 100%;
}

.timeline-fill {
	background: linear-gradient(
			90deg,
			#16a34a,
			#3b82f6
	);
	border-radius: 999px;
	height: 100%;
	width:100%;
}

.timeline-today {
	background: #2563eb;
	border: 4px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(37,99,235,.25);
	height: 24px;
	position: absolute;
	top: -8px;
	transform: translateX(-50%);
	width: 24px;
}
.timeline-labels {
	color: #64748b;
	font-size: 13px;
	margin-top: 0;
	min-height: 50px;
	position: relative;
}

.timeline-start {
	/* below the timeline */;
	left: 0;
	position: absolute;
	top: 18px;
}

.timeline-end {
	/* below the timeline */;
	position: absolute;
	right: 0;
	text-align: right;
	top: 18px;
}

.timeline-today-label {
	position: absolute;
	text-align: center;
	top: -50px;
	transform: translateX(-50%);
	white-space: nowrap;
}
.timeline-labels strong {
	color: #111827;
	font-weight: 600;
}
.timeline-today-label::after {
	background: #2563eb;
	bottom: -12px;
	content: '';
	height: 10px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 2px;
}
.plan-summary {
	color: #64748b;
	font-size: 14px;
	margin-top: 24px;
}
/* KPI Cards */
.metric-icon {
	font-size: 28px;
	margin-bottom: 8px;
}
.metric-card {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px;
	text-align: center;
}

.metric-value {
	color: #0f766e;
	font-size: 20px;
	font-weight: 700;
}

.metric-label {
	color: #64748b;
	font-size: 12px;
	margin-top: 4px;
}
.metric-card.time {
	background: #bfdbfe;
	border: 1px solid #bfdbfe;
}

.metric-card.released {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
}
.metric-card.allocated {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
}

.metric-card.spent {
	background: #f0fdfa;
	border: 1px solid #99f6e4;
}

.metric-card.remaining {
	background: #fff7ed;
	border: 1px solid #fed7aa;
}

/* =================================================
   FUNDING RELEASE
   =================================================  */
.funding-release-card {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	margin-top: 16px;
	padding: 14px;
}

.release-header {
	align-items: center;
	color: #334155;
	display: flex;
	font-weight: 600;
	gap: 8px;
	margin-bottom: 12px;
}

.release-details {
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.release-item {
	flex: 1;
}

.release-label {
	color: #64748b;
	font-size: 12px;
	margin-bottom: 4px;
}

.release-value {
	color: #0f172a;
	font-size: 15px;
	font-weight: 600;
}

.release-value.success {
	color: #16a34a;
}
/* ==================================================
   USAGE VS PLAN
   ================================================== */

.expected-header {
	align-items: center;
	color: #64748b;
	display: flex;
	font-size: 12px;
	font-weight: 600;
	justify-content: space-between;
	margin-bottom: 8px;
}

.progress-header {
	display: flex;
	font-size: 13px;
	font-weight: 600;
	justify-content: space-between;
	margin-bottom: 8px;
}

.usage-progress {
	background: #e5e7eb;
	border-radius: 999px;
	height: 18px;
	margin-bottom: 16px;
	overflow: visible;
	position: relative;
}

.usage-fill {
	background: linear-gradient(
			90deg,
			#f59e0b,
			#ea580c
	);
	border-radius: 999px;
	height: 100%;
}

/* ==================================================
   EXPECTED MARKER
   ================================================== */

.expected-marker {
	border-left: 2px dashed #1f2937;
	bottom: -6px;
	position: absolute;
	top: -6px;
	transform: translateX(-50%);
	width: 0;
	z-index: 2;
}
.expected-marker-label {
	color: #374151;
	font-size: 11px;
	font-weight: 600;
	left: 50%;
	position: absolute;
	top: -18px;
	transform: translateX(-50%);
}
/* ==================================================
   VARIANCE MESSAGE
   ================================================== */

.variance-message {
	background: #f8fafc;
	border-radius: 8px;
	color: #334155;
	font-size: 13px;
	line-height: 1.5;
	margin-top: 10px;
	padding: 10px 12px;
}

/* ==================================================
   NOT FUNDED MESSAGE
   ================================================== */

.no-funding-message {
	background: #f8fafc;
	border-radius: 8px;
	color: #64748b;
	font-size: 13px;
	margin-top: 15px;
	padding: 12px;
	text-align: center;
}

/* ==================================================
   COLLAPSIBLE FOOTER
   ================================================== */

.support-card-footer {
	border-top: 1px solid #e5e7eb;
	margin-top: 16px;
	padding-top: 16px;
	text-align: center;
}

.support-card-footer a {
	color: #2563eb;
	font-weight: 600;
	text-decoration: none;
}

.support-card-footer a:hover {
	text-decoration: underline;
}

/* ==================================================
   CATEGORY SECTION
   ================================================== */

.category-section {
	margin-top: 20px;
}

.category-row {
	border-bottom: 1px solid #f1f5f9;
	padding: 12px 0;
}

.category-row:last-child {
	border-bottom: 0;
}

.category-header {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 8px;
}

.category-name {
	flex: 1;
	font-size: 13px;
	font-weight: 600;
	word-break: break-all;
}

.category-remaining {
	color: #16a34a;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.category-progress-header {
	display: flex;
	font-size: 12px;
	justify-content: space-between;
	margin-bottom: 4px;
}

@media (max-width: 650px) {
	.metric-card {
		padding:10px;
		width: 575px;
	}
}

@media (max-width: 600px) {
	.metric-card {
		padding:10px;
		width: 525px;
	}
}

@media (max-width: 550px) {
	.metric-card {
		padding:10px;
		width: 475px;
	}
}

@media (max-width: 500px) {

	.timeline-today-label {
		max-width: 70px;
		font-size: 10px;
		white-space: normal;
		line-height: 1.2;
		word-break: break-word;
	}

	.timeline-start,
	.timeline-end {
		font-size: 11px;
	}

	.timeline-labels {
		display: flex;
		justify-content: space-between;
	}
	.metric-card {
		width: 400px;
	}
	.metric-card {
		padding:5px;
		width: 425px;
	}
}

@media (max-width: 450px) {
	.metric-card {
		padding:5px;
		width: 380px;
	}
}


/* ==================================================
   SECTION TITLES
   ================================================== */

.section-title {
	color: #000000;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 10px;
}
.metric-icon {
	font-size: 28px;
	margin-bottom: 8px;
}
.metric-card {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px;
	text-align: center;
}

.metric-value {
	color: #0f766e;
	font-size: 20px;
	font-weight: 700;
}

.metric-label {
	color: #64748b;
	font-size: 12px;
	margin-top: 4px;
}
.metric-card.time {
	background: #bfdbfe;
	border: 1px solid #bfdbfe;
}

.metric-card.released {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
}
.metric-card.allocated {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
}

.metric-card.spent {
	background: #f0fdfa;
	border: 1px solid #99f6e4;
}

.metric-card.remaining {
	background: #fff7ed;
	border: 1px solid #fed7aa;
}

/* Health Section */

.health-panel {
	background: #f8fafc;
	border-radius: 12px;
	margin-top: 25px;
	padding: 20px;
}

/*.status-badge {
  border-radius: 30px;
  display: inline-block;
  font-weight: 600;
  margin: 5px 0;
  padding: 8px 18px;
}*/
.status-badge {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	gap: 6px;
	padding: 6px 12px;
}

.status-badge.healthy {
	background: #dcfce7;
	color: #166534;
}

.status-badge.warning {
	background: #fef3c7;
	color: #92400e;
}

.status-badge.critical {
	background: #fee2e2;
	color: #991b1b;
}

.comparison-item {
	margin-bottom: 20px;
}

.comparison-item label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}

.progress {
	height: 24px;
	margin-bottom: 0;
}

.progress-bar {
	font-weight: 600;
	line-height: 24px;
}
/* health tracking and comparisons */
.funding-health-card {
	background: #fff;
	border: solid 1px lightgrey;
	border-radius: 12px;
	margin-top: 20px;
	padding: 20px;
}

.health-header {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 25px;
}

.status-chip {
	border-radius: 20px;
	font-weight: 600;
	padding: 6px 14px;
}

.progress-section {
	margin-bottom: 40px;
}

.progress-label-row {
	display: flex;
	font-weight: 600;
	justify-content: space-between;
	margin-bottom: 8px;
}

.comparison-progress {
	background: #e5e7eb;
	border-radius: 20px;
	height: 18px;
	overflow: visible;
	position: relative;
}

.comparison-progress-bar {
	border-radius: 20px;
	height: 100%;
}

.time-bar {
	background: linear-gradient(
			90deg,
			#38bdf8,
			#2563eb
	);
}

.funding-bar {
	background: linear-gradient(
			90deg,
			#f59e0b,
			#ea580c
	);
}

.funding-progress-container {
	position: relative;
}

.expected-marker {
	background: #111827;
	border-radius: 2px;
	height: 26px;
	position: absolute;
	top: -4px;
	transform: translateX(-50%);
	width: 4px;
}

.expected-label {
	font-size: 11px;
	margin: 6px;
	position: absolute;
	text-align: center;
	transform: translateX(-50%);
	white-space: nowrap;
}

.variance-message {
	font-weight: 500;
	margin-top: 35px;
	text-align: center;
}

/* Status colours */

.under {
	border-left: 5px solid #2563eb;
}

.under .status-chip {
	background: #dbeafe;
	color: #1d4ed8;
}

.good {
	border-left: 5px solid #22c55e;
}

.good .status-chip {
	background: #dcfce7;
	color: #166534;
}

.warning {
	border-left: 5px solid #f59e0b;
}

.warning .status-chip {
	background: #fef3c7;
	color: #92400e;
}

.danger {
	border-left: 5px solid #ef4444;
}

.danger .status-chip {
	background: #fee2e2;
	color: #991b1b;
}
/* end health tracking and comparisons */
/* start supprt areas */
.next-release {
	align-items: center;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	margin: 15px 0;
	padding: 12px;
}

.release-amount {
	color: #2563eb;
	font-size: 22px;
	font-weight: 700;
}
/* end support areas */

/* ==========================
   SUPPORT CARDS
   ========================== */
/* ==================================================
   SUPPORT AREA GRID
   ================================================== */

.support-area-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	margin-top: 20px;
}

/* ==================================================
   SUPPORT CARD
   ================================================== */

.support-card {
	background: #ffffff;
	border-left: 5px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
	padding: 20px;
}
.support-usage {
	border-top: 1px solid #e5e7eb;
	margin-top: 24px;
	padding-top: 20px;
}

.usage-title {
	color: #64748b;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 12px;
}

.usage-row {
	display: flex;
	font-size: 13px;
	justify-content: space-between;
	margin-bottom: 6px;
}

.usage-track {
	background: #e5e7eb;
	border-radius: 999px;
	height: 10px;
	margin-top: 10px;
	position: relative;
}

.usage-fill {
	background: #f97316;
	border-radius: 999px;
	height: 100%;
}

.usage-marker {
	background: #64748b;
	height: 18px;
	position: absolute;
	top: -4px;
	transform: translateX(-50%);
	width: 2px;
}

.usage-message {
	color: #64748b;
	font-size: 12px;
	margin-top: 10px;
	text-align: center;
}
/* ==================================================
   CARD STATUS COLOURS
   ================================================== */

.card-under {
	border-left-color: #2563eb;
}

.card-good {
	border-left-color: #16a34a;
}

.card-warning {
	border-left-color: #fef3d4;
}

.card-danger {
	border-left-color: #ef4444;
}

.card-high-risk {
	border-left: 4px solid #fec79a;
}
.card-under .variance-message {
	background: #eff6ff;
	color: #1d4ed8;
}

.card-good .variance-message {
	background: #ecfdf5;
	color: #166534;
}

.card-warning .variance-message {
	background: #fef3c7;
	color: #92400e;
}

.card-danger .variance-message {
	background: #fee2e2;
	color: #991b1b;
}

.card-high-risk .variance-message {
	background: #fec79a;
	color: #b54708;
}

.funding-health-card .variance-message {
	display: table;
	margin: 12px auto 0;
}
/* ==================================================
   CARD HEADER
   ================================================== */
.support-card-header {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.support-card-header h4 {
	margin: 0;
}

.support-card-header small {
	color: #64748b;
}
.support-header-actions {
	align-items: center;
	display: flex;
	gap: 10px;
}

.expand-btn {
	align-items: center;
	background: transparent;
	border: none;
	color: #2563eb;
	cursor: pointer;
	display: flex;
	font-size: 13px;
	font-weight: 600;
	gap: 6px;
}

.expand-btn:hover {
	color: #1d4ed8;
}
.support-categories {
	border-top: 1px solid #e5e7eb;
	margin-top: 20px;
	padding-top: 16px;
}

.support-category {
	align-items: center;
	border-bottom: 1px solid #f1f5f9;
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
}

.support-category:last-child {
	border-bottom: none;
}

.category-header {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.category-name {
	color: #111827;
	font-weight: 600;
}

.category-amount {
	color: #16a34a;
	font-weight: 700;
}

.category-meta {
	color: #64748b;
	font-size: 12px;
	margin-top: 4px;
}
.categories-header {
	color: #64748b;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .5px;
	margin-bottom: 12px;
	margin-top: 0;
	text-transform: uppercase;
}
/**/
.category-name {
	color: #334155;
	font-size: 14px;
}

.category-remaining {
	color: #16a34a;
	font-weight: 600;
}
/* ==================================================
   STATUS BADGES
   ================================================== */

.status-chip {
	align-items: center;
	border-radius: 20px;
	display: inline-flex;
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 12px;
	white-space: nowrap;
}

.badge-under {
	background: #dbeafe;
	color: #1d4ed8;
}

.badge-good {
	background: #dcfce7;
	color: #166534;
}

.badge-warning {
	background: #fef3d4;
	color: #92400e;
}

.badge-high-risk {
	background: #fec79a;
	color: #b54708;
}

.badge-danger {
	background: #ff7972;
	color: #991b1b;
}


.badge-not-funded {
	background: #f1f5f9;
	color: #64748b;
}

/* ==================================================
   FUNDING AMOUNT
   ================================================== */

.funding-value {
	color: #16a34a;
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
}

.funding-label {
	color: #64748b;
	margin-bottom: 20px;
	margin-top: 6px;
}

/* ==================================================
   FUNDING METRICS
   ================================================== */
.support-metrics {
	align-items: center;
	border-bottom: 1px solid #e5e7eb;
	border-top: 1px solid #e5e7eb;
	display: flex;
	justify-content: space-between;
	margin: 20px 0;
	padding: 15px 0;
}

.support-metrics > div {
	flex: 1;
	text-align: center;
}

.support-metrics strong {
	font-size: 18px;
	margin-top: 4px;
}
/* ==================================================
   NEXT FUNDING RELEASE
   ================================================== */

.next-release {
	align-items: center;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	padding: 12px;
}

.release-title {
	color: #64748b;
	font-size: 12px;
}

.release-amount {
	color: #2563eb;
	font-size: 22px;
	font-weight: 700;
}

/* =================================================
   FUNDING RELEASE
   =================================================  */
.funding-release-card {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	margin-top: 16px;
	padding: 14px;
}

.release-header {
	align-items: center;
	color: #334155;
	display: flex;
	font-weight: 600;
	gap: 8px;
	margin-bottom: 12px;
}

.release-details {
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.release-item {
	flex: 1;
}

.release-label {
	color: #64748b;
	font-size: 12px;
	margin-bottom: 4px;
}

.release-value {
	color: #0f172a;
	font-size: 15px;
	font-weight: 600;
}

.release-value.success {
	color: #16a34a;
}
/* ==================================================
   USAGE VS PLAN
   ================================================== */

.expected-header {
	align-items: center;
	color: #64748b;
	display: flex;
	font-size: 12px;
	font-weight: 600;
	justify-content: space-between;
	margin-bottom: 8px;
}

.progress-header {
	display: flex;
	font-size: 13px;
	font-weight: 600;
	justify-content: space-between;
	margin-bottom: 8px;
}

.usage-progress {
	background: #e5e7eb;
	border-radius: 999px;
	height: 18px;
	margin-bottom: 16px;
	overflow: visible;
	position: relative;
}

.usage-fill {
	background: linear-gradient(
			90deg,
			#f59e0b,
			#ea580c
	);
	border-radius: 999px;
	height: 100%;
}

/* ==================================================
   EXPECTED MARKER
   ================================================== */

.expected-marker {
	border-left: 2px dashed #1f2937;
	bottom: -6px;
	position: absolute;
	top: -6px;
	transform: translateX(-50%);
	width: 0;
	z-index: 2;
}
.expected-marker-label {
	color: #374151;
	font-size: 11px;
	font-weight: 600;
	left: 50%;
	position: absolute;
	top: -18px;
	transform: translateX(-50%);
}
/* ==================================================
   VARIANCE MESSAGE
   ================================================== */

.variance-message {
	background: #f8fafc;
	border-radius: 8px;
	color: #334155;
	font-size: 13px;
	line-height: 1.5;
	margin-top: 10px;
	padding: 10px 12px;
}

.period-variance {
	border-radius: 8px;
	font-size: 12px;
	margin-top: 10px;
	padding: 8px 12px;
	text-align: center;
}

/* ==================================================
   NOT FUNDED MESSAGE
   ================================================== */

.no-funding-message {
	background: #f8fafc;
	border-radius: 8px;
	color: #64748b;
	font-size: 13px;
	margin-top: 15px;
	padding: 12px;
	text-align: center;
}
.empty-area-state {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 320px;
	padding: 32px;
	text-align: center;
}

.empty-area-icon {
	font-size: 48px;
	margin-bottom: 12px;
}

.empty-area-title {
	color: #1f2937;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 8px;
}

.empty-area-message {
	color: #64748b;
	line-height: 1.5;
	max-width: 280px;
}
.area-status.no-funding {
	background: #f3f4f6;
	color: #6b7280;
}
/* ==================================================
   COLLAPSIBLE FOOTER
   ================================================== */

.support-card-footer {
	border-top: 1px solid #e5e7eb;
	margin-top: 16px;
	padding-top: 16px;
	text-align: center;
}

.support-card-footer a {
	color: #2563eb;
	font-weight: 600;
	text-decoration: none;
}

.support-card-footer a:hover {
	text-decoration: underline;
}
.area-summary {
	display: flex;
	gap: 24px;
	justify-content: space-between;
	margin: 20px 0;
}

.summary-metric {
	flex: 1;
}

.summary-label {
	color: #6b7280;
	font-size: 13px;
	margin-bottom: 4px;
}

.summary-value {
	color: #111827;
	font-size: 14px;
	font-weight: 600;
}

.summary-value.remaining {
	color: #0f766e;
}
/* ==================================================
   CATEGORY SECTION
   ================================================== */

.category-section {
	margin-top: 20px;
}

.category-row {
	border-bottom: 1px solid #f1f5f9;
	padding: 12px 0;
}

.category-row:last-child {
	border-bottom: 0;
}

.category-header {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 8px;
}

.category-name {
	flex: 1;
	font-size: 13px;
	font-weight: 600;
	word-break: break-all;
}

.category-remaining {
	color: #16a34a;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.category-progress-header {
	display: flex;
	font-size: 12px;
	justify-content: space-between;
	margin-bottom: 4px;
}
/* new after here */
.available-now-section {
	margin: 18px 0 20px;
}

.available-now-amount {
	color: #16a34a;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.1;
}

.available-now-label {
	color: #64748b;
	font-size: 0.95rem;
	margin-top: 4px;
}

/* Funding Release Card */

.funding-release-card {
	align-items: center;
	background: #eef5ff;
	border: 1px solid #bfd6ff;
	border-radius: 12px;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	padding: 14px 16px;
}

.release-label {
	color: #64748b;
	font-size: 0.85rem;
	margin-bottom: 2px;
}

.release-date {
	color: #0f172a;
	font-size: 1rem;
	font-weight: 600;
}

.release-amount {
	color: #2563eb;
	font-size: 1.8rem;
	font-weight: 700;
	white-space: nowrap;
}

/* Funding Breakdown */

.funding-breakdown {
	border-bottom: 1px solid #e5e7eb;
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(3, 1fr);
	padding-bottom: 18px;
}

.metric-label {
	color: #64748b;
	font-size: 0.85rem;
	margin-bottom: 6px;
}

.metric-value {
	color: #0f172a;
	font-size: 1.05rem;
	font-weight: 700;
}

.metric-value-success {
	color: #16a34a;
}

/* Plan Summary */

.plan-summary {
	padding: 0;
}

.plan-summary-header {
	color: #475569;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 12px;
}

.plan-summary-row {
	align-items: center;
	display: flex;
	font-size: 0.95rem;
	justify-content: space-between;
}

.plan-summary-row + .plan-summary-row {
	margin-top: 10px;
}

.plan-summary-row span {
	color: #64748b;
}

.text-success {
	color: #16a34a;
}

/* Usage Section */

.usage-section {
	border-top: 1px solid #e5e7eb;
	padding-top: 18px;
}

.usage-title {
	color: #475569;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 12px;
}

.usage-row {
	align-items: center;
	display: flex;
	font-size: 0.95rem;
	justify-content: space-between;
	margin-bottom: 8px;
}

.released-progress {
	background: #e5e7eb;
	border-radius: 999px;
	height: 10px;
	margin-top: 10px;
	overflow: hidden;
}

.released-progress-used {
	background: #f59e0b;
	border-radius: 999px;
	height: 100%;
}

/* Responsive */

@media (max-width: 768px) {

	.funding-breakdown {
		gap: 14px;
		grid-template-columns: 1fr;
	}

	.release-amount {
		font-size: 1.5rem;
	}

	.available-now-amount {
		font-size: 2rem;
	}
}
@media (max-width: 650px) {
	.funding-health-card {
		padding:10px;
		width: 575px;
	}
}

@media (max-width: 600px) {
	.funding-health-card {
		padding:10px;
		width: 525px;
	}
}

@media (max-width: 550px) {
	.funding-health-card {
		padding:10px;
		width: 475px;
	}
}

@media (max-width: 500px) {
	.funding-health-card {
		padding:5px;
		width: 425px;
	}
}

@media (max-width: 450px) {
	.funding-health-card {
		padding:5px;
		width: 380px;
	}
}

.portal-header {
	align-items: center;
	background: #fff;
	border-bottom: 1px solid #dbe5ec;
	display: flex;
	height: 65px;
	justify-content: space-between;
	padding: 0;
}

.portal-brand {
	align-items: center;
	display: flex;
	gap: 18px;
}

.portal-logo {
	flex-shrink: 0;
	height: 50px;
	width: auto;
}

.portal-title-group {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.portal-title {
	color: #0f766e;
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.1;
	margin: 0;
}

.portal-subtitle {
	color: #64748b;
	font-size: 0.75rem;
	margin: 4px auto 0;
	max-width: 400px;
}
.logout-btn {
	background: #fee2e2;
	border: none;
	border-radius: 50%;
	color: white;
	cursor: pointer;
	height: 42px;
	width: 42px;
}
@media (max-width: 480px) {
	.portal-title {
		font-size: 1.5rem;
	}
	.portal-header {
		padding: 4px;
	}
	.portal-logo {
		flex-shrink: 0;
		height: auto;
		width: 80px;
	}
	.logout-btn {
		height: 34px;
		width: 34px;
	}
}

/* ==========================================
   PROVIDERS
========================================== */

.providers-section {
	margin-top: 24px;
}
.section-header-providers {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.section-title-providers {
	align-items: center;
	color: #1e293b;
	display: flex;
	font-size: 22px;
	font-weight: 600;
	gap: 10px;
}

.section-title-providers i {
	align-items: center;
	background: #e7fdec;
	border-radius: 50%;
	color: #00897B;
	display: flex;
	font-size: 18px;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.providers-count-badge {
	align-items: center;
	background: #00897B;
	border-radius: 999px;
	color: white;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	height: 24px;
	justify-content: center;
	min-width: 24px;
	padding: 0 8px;
}
.providers-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}

/* ==========================================
   PROVIDER CARD
========================================== */

.provider-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	padding: 4px;
	transition: all 0.25s ease;
}

.provider-card:hover {
	border-color: #14b8a6;
	box-shadow: 0 10px 24px rgba(0,0,0,0.08);
	transform: translateY(-2px);
}

/* ==========================================
   HEADER
========================================== */

.provider-header {
	align-items: center;
	display: flex;
	gap: 14px;
	margin-bottom: 18px;
}

.provider-logo {
	align-items: center;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	display: flex;
	flex-shrink: 0;
	height: 64px;
	justify-content: center;
	overflow: hidden;
	width: 64px;
}

.provider-logo img {
	height: 100%;
	object-fit: contain;
	padding: 4px;
	width: 100%;
}

.provider-logo i {
	color: #0f766e;
	font-size: 24px;
}

.provider-info {
	flex: 1;
}

.provider-name {
	color: #1e293b;
	font-size: 18px;
	font-weight: 700;
}

.provider-type {
	color: #64748b;
	font-size: 14px;
	margin-top: 2px;
}

.provider-last-used {
	align-items: center;
	color: #64748b;
	display: flex;
	font-size: 13px;
	gap: 6px;
	margin-top: 8px;
}

/* ==========================================
   METRICS
========================================== */

/*.provider-metrics {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, 1fr);
}
.pr*/ovider-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
	margin-bottom: 18px;
	margin-top: 10px;
}
/* search */
.providers-search {
	margin: 16px 0;
	max-width: 420px;
	position: relative;
}

.search-icon {
	color: #6b7280;
	font-size: 14px;
	left: 16px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.provider-search-input {
	border: 1px solid #d1d5db;
	border-radius: 12px;
	color: #1e293b;
	font-size: 14px;
	max-width: 800px;
	padding: 12px 16px;
	transition: all 0.2s ease;
	width: autofit;
}

.provider-search-input:focus {
	border-color: #0d9488;
	box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
	outline: none;
}

.provider-search-input::placeholder {
	color: #94a3b8;
}
/* ==========================================
   FOOTER
========================================== */

.provider-footer {
	border-top: 1px solid #f1f5f9;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 16px;
}

/* ==========================================
   CHIPS
========================================== */

.status-chip,
.info-chip {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	gap: 6px;
	padding: 6px 12px;
}

.status-chip.active {
	background: #ecfdf5;
	border: 1px solid #bbf7d0;
	color: #15803d;
}

.status-chip.inactive {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #dc2626;
}

.info-chip {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #1d4ed8;
}

.provider-count-badge {
	align-items: center;
	background: #2563eb;
	border-radius: 999px;
	color: white;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	height: 24px;
	justify-content: center;
	min-width: 24px;
	padding: 0 8px;
}
.metric-card.claims {
	background: #f0fdfa;
	border-color: #ccfbf1;
}

.metric-card.invoice {
	background: #eff6ff;
	border-color: #bfdbfe;
}

.metric-card.days {
	background: #faf5ff;
	border-color: #ddd6fe;
}
.provider-badge.new {
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: 999px;
	color: #ea580c;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
}


.reimbursement-section {
	margin-top: 24px;
}

.section-header-reimbursement {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.section-title-reimbursement {
	align-items: center;
	color: #1e293b;
	display: flex;
	font-size: 22px;
	font-weight: 600;
	gap: 10px;
}

.section-title-reimbursement i {
	align-items: center;
	background: #fdebe6;
	border-radius: 50%;
	color: #FB8C00;
	display: flex;
	font-size: 18px;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.section-subtitle-reimbursement {
	color: #64748b;
	display: block;
	font-size: 13px;
	margin-top: 6px;
}

.reimbursements-count-badge {
	align-items: center;
	background: #FB8C00;
	border-radius: 999px;
	color: white;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	height: 24px;
	justify-content: center;
	min-width: 24px;
	padding: 0 8px;
}
.subreceipt-section {
	margin-top: 24px;
}

.section-header-subreceipt {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.section-title-subreceipt {
	align-items: center;
	color: #1e293b;
	display: flex;
	font-size: 22px;
	font-weight: 600;
	gap: 10px;
}

.section-title-subreceipt i {
	align-items: center;
	background: #fdebe6;
	border-radius: 50%;
	color: #EF6C00;
	display: flex;
	font-size: 18px;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.section-subtitle-subreceipt {
	color: #64748b;
	display: block;
	font-size: 13px;
	margin-top: 6px;
}

/* ==========================================
   UPLOAD RECEIPT
========================================== */

.submit-receipt-container {
	background: #fff;
	border: 1px solid #d9dee6;
	border-radius: 18px;
	padding: 24px;
}

/* ==========================================
   HEADER
========================================== */

.submit-receipt-header {
	align-items: center;
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
}

.submit-receipt-header-icon {
	align-items: center;
	background: #f1f5f9;
	border-radius: 50%;
	color: #2563eb;
	display: flex;
	font-size: 20px;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.submit-receipt-header h2 {
	color: #0f172a;
	font-size: 20px;
	font-weight: 600;
	margin: 0;
}

.submit-receipt-header p {
	color: #64748b;
	margin: 4px 0 0;
}

/* ==========================================
   INFO SECTION
========================================== */

.receipt-info-card {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr 1fr 1fr;
	margin-bottom: 24px;
	padding: 24px;
}

.receipt-info-column h4 {
	color: #14b8a6;
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 14px;
}

.receipt-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.receipt-checklist li {
	align-items: flex-start;
	color: #475569;
	display: flex;
	gap: 10px;
	line-height: 1.5;
	margin-bottom: 10px;
}

.receipt-checklist .fa-check-circle {
	color: #16a34a;
	flex-shrink: 0;
	margin-top: 3px;
}

/* ==========================================
   UPLOAD PANEL
========================================== */

.receipt-upload-panel {
	background: #f8fffe;
	border: 2px dashed #cbd5e1;
	border-radius: 16px;
	margin: 0 auto 24px;
	padding: 40px 24px;
	text-align: center;
}
.receipt-upload-panel {
	margin-bottom: 16px;
}

.upload-pdf-icon {
	color: #14b8a6;
	font-size: 48px;
	margin-bottom: 16px;
}

.upload-content h3 {
	color: #0f172a;
	font-size: 18px;
	font-weight: 500;
	margin: 0 0 8px;
}

.upload-content p {
	color: #64748b;
	margin: 0 0 24px;
}

.btn-upload {
	background: #14b8a6;
	border: none;
	border-radius: 10px;
	color: white;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	padding: 12px 22px;
	transition: background .2s;
}

.btn-upload:hover {
	background: #0f766e;
}
.selected-file {
	align-items: center;
	background: #ecfdf5;
	border: 1px solid #bbf7d0;
	border-radius: 999px;
	color: #166534;
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	margin-top: 16px;
	padding: 8px 12px;
}

.upload-error {
	color: #dc2626;
	font-size: 13px;
	margin-top: 12px;
}
.upload-help-text {
	color: #64748b;
	font-size: 13px;
	margin-top: 16px;
}

/* ==========================================
   OPTIONAL DETAILS CARD
========================================== */

.receipt-details-card {
	background: #fcfffe;
	border: 1px solid #e2e8f0;
	border-left: 4px solid #14b8a6;
	border-radius: 16px;
	margin-bottom: 24px;
	padding: 24px;
}
.receipt-details-header {
	align-items: flex-start;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 16px;
}
.receipt-details-title {
	color: #0f172a;
	font-size: 18px;
	font-weight: 600;
}
.optional-badge {
	background: #f1f5f9;
	border-radius: 999px;
	color: #64748b;
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .5px;
	margin-bottom: 8px;
	margin-top: 4px;
	padding: 4px 10px;
	text-transform: uppercase;
}

.receipt-details-description {
	color: #64748b;
	font-size: 13px;
	line-height: 1.5;
}

/* ==========================================
   FORM
========================================== */

.form-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.full-width {
	grid-column: 1 / -1;
}

.form-group {
	display: flex;
	flex-direction: column;
}

.form-group label {
	color: #334155;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
	padding: 10px 12px;
}

.form-group input:focus,
.form-group textarea:focus {
	border-color: #14b8a6;
	box-shadow: 0 0 0 3px rgba(20,184,166,.12);
	outline: none;
}

.form-group textarea {
	resize: vertical;
}
.optional-comments {
	border: 1px solid #d1d5db;
	border-radius: 8px;
	overflow: hidden;
}

.optional-comments summary {
	align-items: center;
	background: #f8fafc;
	color: #334155;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	list-style: none;
	padding: 12px 14px;
}

.optional-comments summary::-webkit-details-marker {
	display: none;
}

.optional-comments summary::after {
	content: "+";
	font-size: 18px;
	margin-left: auto;
}

.optional-comments[open] summary::after {
	content: "−";
}

.optional-comments-content {
	background: #fff;
	padding: 14px;
}

.optional-comments textarea {
	resize: vertical;
	width: 100%;
}
/* ==========================================
   ACTIONS
========================================== */

.form-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 24px;
}

/* ==========================================
   BENEFITS
========================================== */

.upload-benefits {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.benefit-item {
	align-items: center;
	color: #0f172a;
	display: flex;
	gap: 10px;
}

.benefit-item i {
	color: #16a34a;
}

.receipt-help-header {
	align-items: center;
	color: #14b8a6;
	display: flex;
	font-size: 12px;
	font-weight: 700;
	gap: 12px;
	letter-spacing: .8px;
	margin: 16px 0 12px;
	text-transform: uppercase;
}

.receipt-help-header::after {
	background: #e2e8f0;
	content: "";
	flex: 1;
	height: 1px;
}
/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

	.receipt-info-card {
		gap: 24px;
		grid-template-columns: 1fr;
	}

	.submit-receipt-header {
		align-items: flex-start;
	}

	.form-grid {
		grid-template-columns: 1fr;
	}

	.form-actions {
		justify-content: stretch;
	}

	.form-actions .btn-upload {
		width: 100%;
	}
}

.dash-square-box {
	height: calc(100vh - 67px);
}

.portal-sidenav {
	overflow-y: auto;
}

.portal-content {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.dashboard-scroll {
	flex: 1;
	overflow-y: auto;
}
.portal-sidenav .table tbody tr {
	cursor: pointer;
	transition: all 0.2s ease;
}

.portal-sidenav .table tbody tr:hover {
	background: #f8fafc;
}

.portal-sidenav .table tbody tr.sidenav-active td {
	background: #ecfeff;
	border-left: 4px solid #14b8a6;
	font-weight: 600;
}

.portal-sidenav .table tbody tr.sidenav-active td {
	border-left: 4px solid #14b8a6;
	color: #0f766e;
	font-weight: 600;
}

.portal-sidenav .table tbody tr.sidenav-active i {
	color: #14b8a6;
}
.icon-colour-me {
	color: #546E7A;
}
.icon-colour-rss {
	color: #FF6D00;
}
.icon-colour-contacts {
	color: #8E24AA;
}
.icon-colour-bills {
	color: #00897B;
}
.icon-colour-cplan {
	color: #3949AB;
}
.icon-colour-xplan {
	color: #212121;
}
.icon-colour-subc {
	color: #F4511E;
}
.icon-colour-subrc {
	color: #EF6C00;
}
.icon-colour-reimb {
	color: #FB8C00;
}
.icon-colour-provs {
	color: #00897B;
}
.icon-colour-mstate {
	color: #E65100;
}
.icon-colour-cus {
	color: #F44336;
}
.icon-colour-part {
	color: #3b82f6;
}

.statement-section {
	margin-top: 24px;
}

.section-header-statement {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.section-title-statement {
	align-items: center;
	color: #1e293b;
	display: flex;
	font-size: 22px;
	font-weight: 600;
	gap: 10px;
}

.section-title-statement i {
	align-items: center;
	background: #fdebe6;
	border-radius: 50%;
	color: #E65100;
	display: flex;
	font-size: 18px;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.section-subtitle-statement {
	color: #64748b;
	display: block;
	font-size: 13px;
	margin-top: 6px;
}

.statement-count-badge {
	align-items: center;
	background: #E65100;
	border-radius: 999px;
	color: white;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	height: 24px;
	justify-content: center;
	min-width: 24px;
	padding: 0 8px;
}
.statement-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.statement-card {
	align-items: center;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-left: 4px solid #14b8a6;
	border-radius: 12px;
	display: flex;
	gap: 16px;
	min-height: 72px;
	padding: 14px;
	transition: all .2s ease;
}

.statement-card:hover {
	border-color: #14b8a6;
	box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.statement-icon {
	align-items: center;
	background: #ecfdf5;
	border-radius: 10px;
	color: #14b8a6;
	display: flex;
	font-size: 24px;
	height: 42px;
	justify-content: center;
	width: 42px;
}

.statement-details {
	flex: 1;
}

.statement-name {
	color: #111827;
	font-size: 15px;
	font-weight: 600;
}

.statement-meta {
	color: #6b7280;
	font-size: 13px;
	margin-top: 4px;
}

.statement-actions {
	flex-shrink: 0;
}

.statement-actions .btn-primary {
	background: #14b8a6;
	border: none;
	border-radius: 8px;
	color: white;
	cursor: pointer;
	padding: 10px 16px;
}

.count-badge {
	background: #14b8a6;
	border-radius: 999px;
	color: white;
	font-size: 12px;
	padding: 2px 8px;
}
.statement-badge {
	background: #dcfce7;
	border-radius: 999px;
	color: #166534;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 8px;
}

.team-side-nav {
	background: #ffffff;
	border-right: 1px solid #e5e7eb;
	padding: 16px 0;
	width: 260px;
}

.team-side-nav-group {
	margin-bottom: 4px;
}

.team-side-nav-parent {
	align-items: center;
	background: none;
	border: 0;
	color: #374151;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: 600;
	height: 44px;
	justify-content: space-between;
	padding: 0 16px;
	width: 100%;
}

.team-side-nav-parent:hover {
	background: #f9fafb;
}

.team-side-nav-parent span {
	align-items: center;
	display: flex;
	gap: 10px;
}

.team-side-nav-children {
	padding-bottom: 8px;
}
.team-side-nav-child {
	align-items: center;
	color: #666;
	display: flex;
	font-size: 0.95em;
	height: 40px;
	padding-left: 32px !important;
	position: relative;
	text-decoration: none;
}
.team-side-nav-child:hover {
	background: #f3f4f6;
	color: #111827;
}

.team-side-nav-child.active {
	background: #ede9fe;
	color: #7c3aed;
	font-weight: 600;
}
.team-side-nav-child:before {
	color: #999;
	content: "•";
	left: 16px;
	position: absolute;
}

.contact-summary-card {
	margin-bottom: 24px;
}

.contact-header {
	align-items: center;
	display: flex;
	gap: 24px;
}

.contact-avatar {
	align-items: center;
	border: 4px solid #009688;
	border-radius: 50%;
	color: #009688;
	display: flex;
	flex-shrink: 0;
	font-size: 34px;
	height: 72px;
	justify-content: center;
	width: 72px;
}

.contact-details {
	flex: 1;
}

.contact-details h2 {
	color: #222;
	font-size: 2rem;
	font-weight: 700;
	margin: 0 0 12px 0;
}

.contact-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.contact-actions {
	display: flex;
	gap: 10px;
}

.section-card {
	padding: 24px;
}

.section-header {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
}

.section-header h3 {
	color: #006d77;
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0;
}

.section-count {
	align-items: center;
	background: #edf2ff;
	border: 1px solid #c7d2fe;
	border-radius: 50%;
	color: #4f46e5;
	display: inline-flex;
	font-size: 0.85rem;
	font-weight: 600;
	height: 26px;
	justify-content: center;
	width: 26px;
}

.participant-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.participant-card {
	background: #fff;
	border: 1px solid #dfe7ea;
	border-radius: 18px;
	padding: 20px;
	transition: all 0.2s ease;
}

.participant-card:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
	transform: translateY(-2px);
}

.participant-card-header {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
}

.participant-icon {
	align-items: center;
	background: #e8f8f6;
	border-radius: 50%;
	color: #009688;
	display: flex;
	font-size: 24px;
	height: 50px;
	justify-content: center;
	width: 50px;
}

.participant-card-header h4 {
	color: #222;
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0;
}

.participant-status {
	margin-bottom: 16px;
}

.participant-metrics {
	margin-bottom: 20px;
}

.metric-row {
	align-items: center;
	border-bottom: 1px solid #edf1f3;
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
}

.metric-row:last-child {
	border-bottom: none;
}

.metric-row span {
	color: #667085;
}

.funding-value {
	color: #00796b;
}

.btn-primary {
	background: #009688;
	border: none;
	border-radius: 12px;
	color: #fff;
	font-weight: 600;
	padding: 12px;
	transition: background 0.2s ease;
	width: 100%;
}

.btn-primary:hover {
	background: #00796b;
}
.participant-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.participant-tile {
	align-items: center;
	background: #fff;
	border: 1px solid #dfe5ea;
	border-radius: 14px;
	cursor: pointer;
	display: flex;
	gap: 12px;
	padding: 14px 16px;
	transition: all 0.2s ease;
}

.participant-tile:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,.08);
	transform: translateY(-1px);
}

.participant-tile-icon {
	align-items: center;
	background: #e8f8f6;
	border-radius: 50%;
	color: #009688;
	display: flex;
	flex-shrink: 0;
	font-size: 20px;
	height: 42px;
	justify-content: center;
	width: 42px;
}

.participant-tile-content {
	flex: 1;
	min-width: 0;
}

.participant-tile-name {
	color: #222;
	font-size: 1rem;
	font-weight: 600;
}

.participant-tile-subtitle {
	color: #667085;
	font-size: 0.85rem;
}

.participant-tile-arrow {
	color: #98a2b3;
}
.empty-selection-card {
	background: #fff;
	border: 1px solid #dfe7ea;
	border-radius: 24px;
	margin: 40px auto;
	max-width: 700px;
	padding: 60px 30px;
	text-align: center;
}

.empty-selection-icon {
	align-items: center;
	background: #e8f8f6;
	border-radius: 50%;
	color: #009688;
	display: flex;
	font-size: 42px;
	height: 90px;
	justify-content: center;
	margin: 0 auto 24px;
	width: 90px;
}

.empty-selection-title {
	color: #222;
	font-size: 2rem;
	font-weight: 700;
	margin: 0 0 12px;
}

.empty-selection-message {
	color: #667085;
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 auto 28px;
	max-width: 500px;
}

.empty-selection-card .btn-primary {
	min-width: 220px;
}
.email-change-card {
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 12px 30px rgba(0,0,0,.12);
	margin: 30px auto;
	max-width: 700px;
	padding: 30px;
	width: 100%;
}

.email-card-header {
	align-items: center;
	border-bottom: 1px solid #e8eef4;
	display: flex;
	gap: 16px;
	margin-bottom: 26px;
	padding-bottom: 20px;
}

.email-header-icon {
	align-items: center;
	background: #e0f2f1;
	border-radius: 50%;
	color: #009688;
	display: flex;
	font-size: 22px;
	height: 54px;
	justify-content: center;
	width: 54px;
}

.email-card-header h2 {
	color: #1c2434;
	font-size: 28px;
	font-weight: 600;
	margin: 0;
}

.email-card-header p {
	color: #6b7280;
	font-size: 14px;
	margin: 4px 0 0;
}

/* Steps */

.email-steps {
	align-items: center;
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}

.email-step {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.step-circle {
	align-items: center;
	background: #fff;
	border: 2px solid #cbd5e1;
	border-radius: 50%;
	color: #6b7280;
	display: flex;
	font-weight: 600;
	height: 38px;
	justify-content: center;
	width: 38px;
}

.email-step span {
	color: #6b7280;
	font-size: 13px;
	font-weight: 500;
}

.email-step.completed .step-circle {
	background: #2e7d32;
	border-color: #2e7d32;
	color: #fff;
}

.email-step.active .step-circle {
	background: #009688;
	border-color: #009688;
	color: #fff;
}

.email-step.active span {
	color: #009688;
	font-weight: 600;
}

.step-divider {
	background: #dde7ef;
	height: 2px;
	margin: 0 14px 24px;
	width: 80px;
}

/* Fields */

.form-section {
	margin-bottom: 24px;
}

.field-label {
	color: #344054;
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}

.email-input,
.verification-input {
	border: 1px solid #cfd8e3;
	border-radius: 10px;
	font-size: 15px;
	height: 46px;
	max-width: 420px;
	padding: 0 14px;
	transition: .2s;
	width: 100%;
}

.email-input:focus,
.verification-input:focus {
	border-color: #009688;
	box-shadow: 0 0 0 4px rgba(0,150,136,.12);
	outline: none;
}

/* Success */

.status-success {
	align-items: center;
	background: #e8f5e9;
	border: 1px solid #c8e6c9;
	border-radius: 10px;
	color: #2e7d32;
	display: inline-flex;
	font-size: 14px;
	gap: 8px;
	margin-top: 12px;
	padding: 10px 14px;
}

/* Success */

.status-error {
	align-items: center;
	background: #ffb7ba;
	border: 1px solid #ff91be;
	border-radius: 10px;
	color: #b11430;
	display: inline-flex;
	font-size: 14px;
	gap: 8px;
	margin-top: 12px;
	padding: 10px 14px;
}

/* Verification */

.verification-panel {
	background: #f7fafc;
	border: 1px solid #e5edf3;
	border-radius: 14px;
	margin-top: 25px;
	padding: 22px;
}

.verification-message {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}

.verification-message i {
	color: #009688;
	font-size: 20px;
	margin-top: 2px;
}

.verification-entry {
	margin-bottom: 12px;
}

.verification-actions a {
	color: #009688;
	font-weight: 600;
	text-decoration: none;
}

.verification-actions a:hover {
	text-decoration: underline;
}

/* Verified */

.email-verified-banner {
	align-items: center;
	background: #e8f5e9;
	border: 1px solid #c8e6c9;
	border-radius: 12px;
	color: #2e7d32;
	display: flex;
	gap: 12px;
	margin-top: 20px;
	padding: 16px;
}

.email-verified-banner i {
	font-size: 28px;
}

/* Not Verified */

.email-not-verified-banner {
	align-items: center;
	background: #ffb7ba;
	border: 1px solid #ff91be;
	border-radius: 10px;
	color: #b11430;
	display: flex;
	gap: 12px;
	margin-top: 20px;
	padding: 16px;
}

.email-not-verified-banner i {
	font-size: 28px;
}
/* Buttons */

.email-button-row {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 30px;
}

.btn-save {
	background: #009688;
	border: none;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	font-weight: 600;
	padding: 12px 22px;
	transition: .2s;
}

.btn-save:hover {
	background: #00897b;
}

.btn-cancel {
	background: #f1f5f9;
	border: 1px solid #dbe3ec;
	border-radius: 10px;
	color: #475467;
	cursor: pointer;
	font-weight: 600;
	padding: 12px 22px;
}

.btn-cancel:hover {
	background: #e8eef4;
}
@media (max-width: 768px) {

	.contact-header {
		align-items: flex-start;
		flex-direction: column;
		gap: 16px;
	}

	.contact-actions {
		width: 100%;
	}

	.participant-grid {
		grid-template-columns: 1fr;
	}

	.contact-details h2 {
		font-size: 1.6rem;
	}

}

/* Dashboard */

.glance-dashboard {
	padding: 10px;
}

.glance-title {
	color: #006d6f;
	font-weight: 600;
	margin: 0 0 15px;
}

/* KPI Tiles */

.glance-tiles {
	display: flex;
	gap: 15px;
	margin-bottom: 20px;
}

.glance-tile {
	background: #fff;
	border-radius: 6px;
	border-top: 4px solid;
	box-shadow: 0 1px 3px rgba(0,0,0,.15);
	cursor: pointer;
	flex: 1;
	padding: 18px;
	text-align: center;
	transition: all .15s ease;
}

.glance-tile:hover {
	box-shadow: 0 3px 8px rgba(0,0,0,.20);
	transform: translateY(-2px);
}

.glance-tile:active {
	transform: translateY(0);
}

.glance-tile.danger {
	border-top-color: #d9534f;
}

.glance-tile.warning {
	border-top-color: #f0ad4e;
}

.glance-tile.info {
	border-top-color: #17a2b8;
}

.tile-value {
	color: #333;
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
}

.tile-label {
	color: #666;
	font-size: 13px;
	margin-top: 8px;
	text-transform: uppercase;
}

.tile-link-icon {
	color: #bbb;
	position: absolute;
	right: 10px;
	top: 10px;
}

/* Summary Cards */

.glance-summary-row {
	display: flex;
	gap: 15px;
}

.summary-card {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	flex: 1;
	overflow: hidden;
}

.summary-header {
	color: #fff;
	font-weight: 600;
	padding: 8px 12px;
}

.summary-header.success {
	background: #5cb85c;
}

.summary-header.info {
	background: #17a2b8;
}

.summary-item {
	border-top: 1px solid #eee;
	display: flex;
	font-size: 13px;
	justify-content: space-between;
	padding: 10px 12px;
}

.summary-item span:last-child {
	font-weight: 600;
}

.health-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 15px;
}

.health-card {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	flex: 1 1 200px;
	min-width: 200px;
	overflow: hidden;
}

.health-card.total {
	background: #fafafa;
	border-width: 2px;
}
.health-card.total {
	background: #fafafa;
	border-width: 2px;
}

.health-title {
	background: #f5f5f5;
	color: #555;
	font-weight: 600;
	letter-spacing: .5px;
	padding: 8px;
	text-align: center;
}

.health-line {
	border-top: 1px solid #eee;
	display: flex;
	justify-content: space-between;
	padding: 6px 10px;
}

.health-line strong {
	font-weight: 700;
}

.variance-ok {
	color: #5cb85c;
}

.variance-bad {
	color: #d9534f;
}
/* ==========================
   Tablet
   ========================== */

@media (max-width: 1200px) {

	.glance-tiles {
		flex-wrap: wrap;
	}

	.glance-tile {
		flex: 0 0 calc(50% - 8px);
	}

	.glance-summary-row {
		flex-direction: column;
	}

	.health-cards {
		flex-direction: column;
	}
	.health-card {
		flex: 1 1 calc(50% - 6px);
	}

	.health-card.total {
		flex: 1 1 100%;
	}
}
/* ==========================
   Mobile
   ========================== */

@media (max-width: 768px) {

	.glance-dashboard {
		padding: 5px;
	}

	.glance-title {
		font-size: 28px;
		margin-bottom: 10px;
	}

	.glance-tiles {
		flex-direction: column;
		gap: 10px;
	}

	.glance-tile {
		flex: 1 1 auto;
		padding: 15px;
	}

	.tile-value {
		font-size: 28px;
	}

	.tile-label {
		font-size: 12px;
	}

	.glance-summary-row {
		flex-direction: column;
		gap: 10px;
	}

	.health-cards {
		flex-direction: column;
		gap: 10px;
		padding: 10px;
	}

	.summary-item,
	.health-line {
		font-size: 12px;
	}

	.summary-header,
	.health-title {
		font-size: 13px;
	}
}


/**
 * IMPORTANT NOTICE: DON'T USE '!important' otherwise this may lead to broken print layout.
 * Some browsers may require '!important' in oder to work properly but be careful with it.
 */
/*.table {
	border: 1px solid #00013a;
	border-collapse: collapse;
	margin-bottom: 10px;
	max-width: 100%;
	width: 100%;
}*/

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
	border: 0.125px solid #ddd;
	border-collapse: collapse;
	line-height: 1.42857143;
	padding: 8px;
	vertical-align: top; }
.inner-table {
	border-collapse: collapse;
	margin-bottom: 10px;
	max-width: 100%;
	width: 100%;
}
th {
	background-color: #b9def0;
	border: 0.25px solid #00013a;
	border-collapse: collapse;
	padding: 5px;
}
td {
	border: 0.25px solid #a2a2a2;
	border-collapse: collapse;
	padding: 5px;
}
.clearfix {
	clear: both;
	content: '';
	display: block;
}

#container {
	background: white;
	font: normal 13px/1.4em 'Open Sans', Sans-serif;
	margin: 10px auto;
	padding: 10px 40px 40px 40px;
}

#header .logo {
	float: left;
	margin: 10px 0 0 0;
	max-width: 130px;
}
#header .logo img {
	height: 55px;
	margin: 0;
}
.header-line {
	border-bottom: 1.5px solid #00013a;
	margin: 5px 0 10px 0;
	width:100%;
}
.header-line2 {
	border-bottom: 1px solid #a2a2a2;
	margin: 30px 0;
	width:100%;
}
#header .company-info {
	float: right;
	max-width: 100%;
	width: 160px;
}
#header .company-info > div:first-child {
	font-size: 12px;
	font-weight: bold;
	margin-top:15px;
}
#header .company-info div {
	font-size: 10px;
	line-height: normal;
}
#title .heading {
	font-size: 28px;
	font-weight: bold;
	margin: 10px 0 0 0;
	max-width: 100%;
	text-align: center;
}
#title .heading div {
	margin-bottom: 3px;
}
#title .heading div {
	margin-bottom: 3px;
}
#title .subheading {
	font-size: 18px;
	font-weight: bold;
	margin: 5px 0;
	max-width: 100%;
	text-align: center;
}
#title .subheading div {
	margin-bottom: 3px;
}
#title .subheading div {
	margin-bottom: 3px;
}
.section-title {
	font-size: 1.12rem;
	font-weight: bold;
}

.section-line {
	border-bottom: 2px solid #000;
	margin:10px 0;
}
#restrictions-info {
	float: left;
	max-width: 100%;
	width: 100%;
}
#restrictions-info > div {
	float: left;
}
#restrictions-info > div > .subtitle {
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
}
#plan-info {
	float: left;
	max-width: 100%;
	width: 100%;
}
#plan-info > div {
	float: left;
}
#plan-info > div > .subtitle {
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
}
#plan-info .statement-info {
	float: left;
	font-size: 1rem;
	line-height: 1.12rem;
	margin: 5px auto;
	max-width: 100%;
	text-align: center;
	width: 100%;
}
#plan-info .statement-info div {
	margin-bottom: 3px;
}
#plan-info .budget-info {
	float: left;
	font-size: 1rem;
	line-height: 1.12rem;
	margin: 5px auto 5px auto;
	width: 100%;
}
#plan-info .budget-info div {
	margin-bottom: 3px;
}
#plan-info > div > span {
	display: block;
	margin-bottom: 3px;
	min-height: 18px;
	min-width: 40px;
}
#plan-info > div:last-child {
	margin-left: 0;
	max-width: 100%;
	text-align: right;
}
#plan-info:after {
	clear: both;
	content: '';
	display: block;
}
.support-line {
	border-bottom: 1px solid #e2e2e2;
	margin: 5px 0;
}
#capacity-info {
	float: left;
	margin: 10px 0 50px 0;
	max-width: 100%;
	width: 45%;
}
#capacity-info > div {
	float: left;
}
#capacity-info > div > span {
	display: block;
	margin-bottom: 3px;
	min-height: 18px;
	min-width: 40px;
}
#capacity-info > div:last-child {
	margin-left: 0;
	max-width: 160px;
	min-width: 120px;
	text-align: right;
}
#capacity-info:after {
	clear: both;
	content: '';
	display: block;
}
#capital-info {
	float: left;
	margin: 10px 0 50px 0;
	max-width: 100%;
	width: 45%;
}
#capital-info > div {
	float: left;
}
#capital-info > div > span {
	display: block;
	margin-bottom: 3px;
	min-height: 18px;
	min-width: 40px;
}
#capital-info > div:last-child {
	margin-left: 0;
	max-width: 160px;
	min-width: 120px;
	text-align: right;
}
#capital-info:after {
	clear: both;
	content: '';
	display: block;
}
#capital-chart-info {
	float: left;
	max-width: 100%;
	width: 240px;
}
#core-info {
	float: left;
	margin: 10px 0 50px 0;
	max-width: 100%;
	width: 45%;
}
#core-info > div {
	float: left;
}
#core-info > div > span {
	display: block;
	margin-bottom: 3px;
	min-height: 18px;
	min-width: 40px;
}
#core-info > div:last-child {
	margin-left: 0;
	max-width: 160px;
	min-width: 120px;
	text-align: right;
}
#core-info:after {
	clear: both;
	content: '';
	display: block;
}
#cpychart-info {
	float: left;
	max-width: 100%;
	width: 380px;
}
#cpychart-info:after {
	clear: both;
	content: '';
	display: block;
}
#cptchart-info {
	float: left;
	max-width: 100%;
	width: 380px;
}
#cptchart-info:after {
	clear: both;
	content: '';
	display: block;
}
#corechart-info {
	float: left;
	max-width: 100%;
	width: 380px;
}
#corechart-info:after {
	clear: both;
	content: '';
	display: block;
}
#notes-info {
	float: left;
	font-size: 10px;
	line-height: 11px;
	max-width: 100%;
}
#notes-info > div {
	float: left;
}
#notes-info > div > span {
	display: block;
	margin-bottom: 3px;
}
.subheading {
	font-size: 1.2rem;
	line-height: 1.22rem;
}
.page-line {
	border-bottom: 1px solid #e2e2e2;
	margin: 5px 0;
}
.endpage {
	break-after: page;
}
.clearback { background-color: transparent }

@media screen {
	#printSection {
		display: none;
	}
}

@media print {
	body * {
		visibility:hidden;
	}
	#printSection, #printSection * {
		visibility:visible;
	}
	#printSection {
		left:0;
		position:absolute;
		top:0;
	}
}

.login-card {
	background: #fff;
	border: 1px solid #d9e2ec;
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
	margin: 40px auto;
	max-width: 700px;
}

.login-header {
	background: #0d9488;
	color: #fff;
	padding: 20px;
	text-align: center;
}

.login-header h1 {
	font-size: 38px;
	font-weight: 500;
	margin: 0;
}

.login-header p {
	margin: 6px 0 0;
	opacity: .9;
}

.login-logo {
	padding: 20px 0 10px;
	text-align: center;
}

.login-logo img {
	max-width: 180px;
}

.login-features {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: 24px;
}

.feature-chip {
	align-items: center;
	background: #ecfeff;
	border-radius: 20px;
	color: #0f766e;
	display: inline-flex;
	font-size: 13px;
	font-weight: 500;
	gap: 6px;
	padding: 6px 12px;
}

.login-form {
	margin: 0 auto;
	max-width: 500px;
	padding: 0 24px 32px;
}

.form-group {
	margin-bottom: 20px;
}

.form-group label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}

.input-wrapper {
	position: relative;
}

.input-wrapper i {
	color: #94a3b8;
	left: 14px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.input-wrapper input {
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 15px;
	height: 48px;
	padding: 0 16px 0 42px;
	transition: all .2s ease;
	width: 100%;
}

.input-wrapper input:focus {
	border-color: #14b8a6;
	box-shadow: 0 0 0 3px rgba(20,184,166,.12);
	outline: none;
}

.login-links {
	margin-bottom: 20px;
	text-align: center;
}

.login-links a {
	color: #0d9488;
	font-size: 14px;
	text-decoration: none;
}

.login-links a:hover {
	text-decoration: underline;
}

.login-btn {
	background: #0d9488;
	border: none;
	border-radius: 8px;
	color: white;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	height: 50px;
	transition: all .2s ease;
	width: 100%;
}

.login-btn:hover {
	background: #0f766e;
	transform: translateY(-1px);
}

.login-btn:active {
	transform: translateY(0);
}
.verification-message {
	align-items: flex-start;
	background: #fefce8;
	border: 1px solid #fde68a;
	border-radius: 10px;
	color: #854d0e;
	display: flex;
	gap: 12px;
	margin: 16px auto;
	max-width: 450px;
	padding: 14px 18px;
}

.verification-message i {
	color: #ca8a04;
	font-size: 18px;
	margin-top: 2px;
}

.auth-message-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
	margin: 20px auto;
	max-width: 500px;
	padding: 10px;
	text-align: center;
}

.auth-message-icon {
	align-items: center;
	background: #fff4e5;
	border-radius: 50%;
	color: #d97706;
	display: flex;
	font-size: 32px;
	height: 72px;
	justify-content: center;
	margin: 0 auto 24px;
	width: 72px;
}

.auth-message-card h1 {
	color: #1f2937;
	font-size: 2rem;
	font-weight: 600;
	margin: 0;
}

.auth-message-text {
	color: #6b7280;
	line-height: 1.6;
	margin-left: auto;
	margin-right: auto;
	max-width: 420px;
}

.auth-message-text.secondary {
	margin-bottom: 18px;
}

.auth-message-card .btn {
	min-width: 240px;
}

.auth-message-logo {
	padding: 20px 0 10px;
	text-align: center;
}

.auth-message-logo img {
	max-width: 90px;
}
.auth-message-action {
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	padding: 12px 24px 30px 24px;
}
.auth-message-status {
	background: #fff4e5;
	border-radius: 999px;
	color: #d97706;
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	margin: 0;
	padding: 8px 16px;
	text-transform: uppercase;
}
.auth-message-status.success {
	background: #e8f5e9;
	color: #16a34a;
}
.auth-form-group {
	margin: 20px auto 10px auto;
	max-width: 420px;
	text-align: left;
}

.auth-form-group label {
	color: #1f2937;
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}

.auth-form-group .form-control {
	border-radius: 10px;
	height: 48px;
}
.new-password-field-helper {
	color: #6b7280;
	font-size: 12px;
	line-height: 1.5;
	margin-top: 8px;
}
.field-helper {
	font-size: 12px;
	line-height: 1.5;
	margin-top: 8px;
}

.field-helper-success {
	color: #16a34a;
}

.field-helper-error {
	color: #dc2626;
}

.field-helper i {
	margin-right: 4px;
}
.password-match {
	border-color: #16a34a !important;
}

.password-no-match {
	border-color: #dc2626 !important;
}
.password-checklist {
	display: grid;
	font-size: 13px;
	gap: 8px 16px;
	grid-template-columns: 50% 50%;
	margin-top: 12px;
	padding: 0 20px;
	text-align: left;
}

.password-checklist > div {
	margin: 2px 0;
}

.requirement-met {
	color: #16a34a;
}

.requirement-pending {
	color: #6b7280;
}

.password-checklist i {
	margin-right: 6px;
	width: 16px;
}

@media (min-width: 992px) {
  .nav-users {
    position: fixed;
  }
}
.social-account-container {
  display: inline-block;
  position: relative;
}
.btn-add-remove-account {
  pointer-events: none;
  position: absolute;
  right: 10px;
  top: 10px;
}
.user-profile-picture {
  max-height: 150px;
  min-height: 150px;
}
.social-button {
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.social-button:hover {
  opacity: 0.65;
}
.signin {
	background: #ffffff;
	padding: 0 20px;
}