body {
	container: body / inline-size;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	gap: 32px;
	background-color: #fff;
	padding: 24px 44px;
	overflow: auto;
	--minContent: 1468;
	--hSizing: FILL;
	--vSizing: FILL;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: STRETCH;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background: #f4f4f4;
  display: flex;
  justify-content: center;
}

.account-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #0d47a1, #1976d2);
  color: #fff;
  border-radius: 8px;
  padding: 20px;
  width: 1850px;           /* fixed width for large screens */
  max-width: 100%;         /* ensures it shrinks on smaller screens */
  height: 170px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-info img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
}

.user-text {
  display: flex;
  flex-direction: column;
}

.user-text h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.user-text p {
  margin: 4px 0 0;
  font-size: 14px;
  color: #d1e2ff;
}

.balance {
  text-align: right;
}

.balance p {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  color: #d1e2ff;
  letter-spacing: 1px;
}

.balance h3 {
  margin: 5px 0 0;
  font-size: 24px;
  font-weight: bold;
}

/* Responsive Design */
@media (max-width: 1400px) {
  .account-card {
    width: 100%;   /* shrink to fit screen */
  }
}

@media (max-width: 600px) {
  .account-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 15px;
  }

  .balance {
    margin-top: 15px;
    text-align: left;
  }
}


/* heading */

.heading {
	display: flex;
	align-items: center;
	gap: var(--item-spacing-xs);
	--minContent: 158;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.heading-component {
	width: 20px; height: 20px;
	flex-shrink: 0;
	--minContent: 20;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}
/* end heading*/


.text-account {
	color: var(--client-folio-05-lovable-app-mirage);
	font-size: 18px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.556;
	letter-spacing: -0.45px;
	text-align: left;
	--minContent: 130;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.icon-component-a {
	width: 16px; height: 16px;
	flex-shrink: 0;
	--minContent: 16;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: CENTER;
	--pConstraintVertical: CENTER;
}



/* row-a */

.row-a {
	display: flex;
	align-items: center;
	--minContent: 199;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
}

.row-component {
	width: 24px; height: 24px;
	flex-shrink: 0;
	--minContent: 24;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.row-text1 {
	color: var(--client-folio-05-lovable-app-mirage);
	--min-font-size: 16; --max-font-size: 20; font-size: var(--interpolate);
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.5px;
	text-align: left;
	--minContent: 167;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}
/* end row-a*/


.text-a {
	margin-top: 1px;
	color: var(--client-folio-05-lovable-app-mirage);
	font-size: 14px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.429;
	letter-spacing: 0px;
	text-align: left;
	--minContent: 30;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}



/* row-c */

.row-c {
	margin-top: 1px;
	display: flex;
	align-items: center;
	gap: 8px;
	--minContent: 163;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

.row-text2 {
	color: var(--client-folio-05-lovable-app-mirage);
	font-size: 14px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.429;
	letter-spacing: 0px;
	text-align: left;
	--minContent: 139;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}
/* end row-c*/


.component-b {
	width: 16px; height: 16px;
	flex-shrink: 0;
	--minContent: 16;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.btn-component-c {
	display: flex;
	font-size: 12px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.333;
	letter-spacing: 0px;
	text-align: left;
	padding: 2px 11px 2px 10px;
	border-radius: 9999px;
	--minContent: 150;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background: #f4f6fa;
  display: flex;
  justify-content: center;
}

.security-card {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #dce3f0;
  width: 1850px;
  max-width: 100%;
  padding: 20px 25px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.security-card h2 {
  font-size: 20px;
  margin: 0 0 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0d47a1;
}

.alert-box {
  background: #fff4e5;
  border: 1px solid #ffd9b3;
  border-radius: 6px;
  padding: 12px 15px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #5c3d00;
}

.guidelines {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.guideline {
  display: flex;
  gap: 12px;
  background: #f9fbff;
  border: 1px solid #e0e7f5;
  border-radius: 6px;
  padding: 15px;
}

.guideline h3 {
  margin: 0;
  font-size: 15px;
  color: #0d47a1;
}

.guideline p {
  margin: 5px 0 0;
  font-size: 13px;
  color: #555;
  line-height: 1.4;
}

.icon {
  font-size: 22px;
  flex-shrink: 0;
}

.footer-note {
  font-size: 13px;
  color: #333;
  border-top: 1px solid #e0e7f5;
  padding-top: 12px;
}

.footer-note span {
  color: #0d47a1;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
  .guidelines {
    grid-template-columns: 1fr;
  }
}


.text-b {
	margin-top: 1px;
	color: var(--client-folio-05-lovable-app-flamingo);
	font-size: 14px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.429;
	letter-spacing: 0px;
	text-align: right;
	--minContent: 192;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MAX;
	--pConstraintVertical: MIN;
}



/* container */

.container {
	min-width: 576px;
	display: flex;
	flex-direction: column;
	gap: var(--item-spacing-3-38);
	flex-grow: 1;
	align-self: stretch;
	--minContent: 576;
	--hSizing: FILL;
	--vSizing: FILL;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: STRETCH;
}

.container-text-heading {
	color: var(--client-folio-05-lovable-app-mirage);
	font-size: 16px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0px;
	text-align: left;
	--minContent: 576;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.container-text {
	color: var(--client-folio-05-lovable-app-slate-gray);
	font-size: 14px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.625;
	letter-spacing: 0px;
	text-align: left;
	--minContent: 576;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}
/* end container*/


.back1 {
	container: back1 / inline-size;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--item-spacing-560-46);
	background: linear-gradient(96deg, #0d4da5 0%, #1162d4 100%) top left / auto auto no-repeat;
	padding: 32px;
	border: 1px solid var(--client-folio-05-lovable-app-geyser);
	border-radius: 8px;
	--minContent: 782;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.back-container1 {
	width: 100%;
	max-width: 545px;
	display: flex;
	align-items: center;
	gap: var(--item-spacing-s);
	flex-shrink: 0;
	--minContent: 545;
	--hSizing: FIXED;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.back-border {
	width: 31%;
	min-width: 0; max-width: 80px;
	flex-grow: 1;
	border-radius: 50%;
	--minContent: 60;
	--hSizing: FILL;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.back-container2 {
	width: 169%;
	min-width: 441px;
	display: flex;
	flex-direction: column;
	gap: var(--item-spacing-xs);
	flex-grow: 1;
	--minContent: 441;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.back-subtitle1 {
	text-align: left;
	--minContent: 441;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.back-text-container1 {
	text-align: left;
	--minContent: 441;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.back-container3 {
	width: 171px;
	display: flex;
	flex-direction: column;
	gap: var(--stroke-weight-4);
	flex-shrink: 0;
	--minContent: 171;
	--hSizing: FIXED;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.back-text-container2 {
	text-transform: uppercase;
	text-align: right;
	--minContent: 171;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.back-subtitle2 {
	text-align: right;
	--minContent: 171;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.container2 {
	height: 142px;
	display: flex;
	gap: var(--item-spacing-s);
	flex-shrink: 0;
	--minContent: 1352;
	--hSizing: FILL;
	--vSizing: FIXED;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.card-back1 {
	gap: var(--font-size-12);
	flex-grow: 1;
	background-image: linear-gradient(115deg, #fff 0%, #fcfcfd 100%);
	padding-bottom: 44px;
	--minContent: 435;
	--hSizing: FILL;
	--vSizing: FILL;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: STRETCH;
}

.card-back-subtitle {
	text-align: left;
	--minContent: 385;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.card-back2 {
	gap: var(--font-size-12);
	flex-grow: 1;
	background-image: linear-gradient(115deg, #fff 0%, #fcfcfd 100%);
	padding-bottom: 30px;
	--minContent: 435;
	--hSizing: FILL;
	--vSizing: FILL;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: STRETCH;
}

.card-back-heading {
	display: flex;
	align-items: center;
	gap: var(--item-spacing-xs);
	padding: 0 1px;
	--minContent: 133;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}



/* component-a */

.component-a {
	position: relative;
	width: 18px; height: 13px;
	flex-shrink: 0;
	border: 2px solid var(--client-folio-05-lovable-app-tory-blue);
	border-radius: 2px;
	--minContent: 18;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.component-line1 {
	position: absolute; top: 24%; left: -11%; 
	width: 122%;
	--minContent: 12;
	--hSizing: FILL;
	--vSizing: FILL;
	--pConstraintHorizontal: SCALE;
	--pConstraintVertical: SCALE;
}
/* end component-a*/


.card-back-btn {
	margin-right: 201px;
	justify-content: center;
	text-align: center;
	--minContent: 385;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.card-back3 {
	gap: var(--font-size-12);
	flex-grow: 1;
	background-image: linear-gradient(115deg, #fff 0%, #fcfcfd 100%);
	padding-bottom: 24px;
	--minContent: 435;
	--hSizing: FILL;
	--vSizing: FILL;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: STRETCH;
}

.card-back-container {
	display: flex;
	flex-direction: column;
	gap: var(--stroke-weight-4);
	--minContent: 385;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.card-back-text-container1 {
	text-align: left;
	--minContent: 385;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.card-back-text-container2 {
	text-align: left;
	--minContent: 385;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.back2 {
	container: back2 / inline-size;
	width: unset;
	gap: var(--line-height-16);
	background-image: linear-gradient(98deg, #fff 1%, #fcfcfd 99%);
	padding-bottom: 24px;
	--minContent: 1352;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.back-text1 {
	text-align: left;
	--minContent: 1302;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.back-container4 {
	display: flex;
	align-items: flex-start;
	gap: var(--font-size-12);
	padding-right: 2px;
	--minContent: 368;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}



/* btn-component-a */

.btn-component-a {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--item-spacing-xs);
	flex-grow: 1;
	text-align: unset;
	padding: 0 12px;
	border-radius: 6px;
	--minContent: 144;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

.btn-component-label1 {
	font-size: 13.89px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.44;
	letter-spacing: 0px;
	text-align: center;
	--minContent: 96;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: CENTER;
	--pConstraintVertical: CENTER;
}
/* end btn-component-a*/




/* btn-component-b */

.btn-component-b {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--item-spacing-xs);
	flex-grow: 1;
	text-align: unset;
	background-color: #f9fafb;
	padding: 13px 12px;
	border: var(--stroke-weight-1) solid #dae0e7;
	border-radius: 6px;
	--minContent: 100;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

.btn-component-label2 {
	text-align: center;
	--minContent: 50;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: CENTER;
	--pConstraintVertical: CENTER;
}
/* end btn-component-b*/


.btn-component1 {
	background-color: #0d4da5;
	padding-top: 14px;
	padding-bottom: 14px;
}

.btn-component1 .btn-component-label1 {
	color: var(--client-folio-05-lovable-app-white);
}

.btn-component3 {
	background-color: #f9fafb;
	padding-top: 13px;
	padding-bottom: 13px;
	border: var(--stroke-weight-1) solid #dae0e7;
}

.btn-component3 .btn-component-label1 {
	color: var(--client-folio-05-lovable-app-mirage);
}

.col {
	container: col / inline-size;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background-color: #fff;
	padding: 31px 30px 39px 40px;
	border: 1px solid #dae0e7;
	border-radius: 8px;
	--minContent: 1352;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.frame {
	margin-left: 2px; margin-top: 1px;
	height: 1px;
	flex-shrink: 0;
	background-color: #dae0e7;
	--minContent: 833;
	--hSizing: FILL;
	--vSizing: FIXED;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}



/* row-b */

.row-b {
	margin-left: 2px; margin-right: 8px;
	display: flex;
	align-items: flex-start;
	gap: 147px;
	--minContent: 1280;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
}
/* end row-b*/


.row2 {
	gap: 8px;
	align-self: start;
}

.row3 {
	margin-right: 13px; margin-top: 11px;
	display: flex;
	align-items: flex-start;
	gap: 194px;
	--minContent: 1280;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
}

.text1 {
	margin-top: 0;
	color: var(--client-folio-05-lovable-app-slate-gray);
}

.text-description {
	text-align: left;
	--minContent: 70;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

.text-category {
	margin-left: 136px; margin-top: 0;
	color: var(--client-folio-05-lovable-app-slate-gray);
}

.text-status {
	margin-left: 2px; margin-top: 0;
	color: var(--client-folio-05-lovable-app-slate-gray);
}

.text-right {
	margin-left: 109px;
	text-align: right;
	--minContent: 158;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MAX;
	--pConstraintVertical: MIN;
}

.row4 {
	margin-left: 2px; margin-right: 2px; margin-top: 8px;
}

.row4 .row-btn-component1 {
	margin-left: 88px;
	color: var(--client-folio-05-lovable-app-mirage);
	padding-left: 11px;
	border: 1px solid #dae0e7;
}

.row4 .row-btn-component2 {
	margin-left: 25px;
	color: var(--client-folio-05-lovable-app-salem);
	background-color: rgba(22, 162, 73, 0.1);
	border: 1px solid rgba(22, 162, 73, 0.2);
}

.row4 .row-text3 {
	margin-left: 123px;
	color: var(--client-folio-05-lovable-app-salem);
}

.row5 .row-btn-component1 {
	margin-left: 77px;
	color: var(--client-folio-05-lovable-app-mirage);
	border: 1px solid #dae0e7;
}

.row5 .row-btn-component2 {
	margin-left: 19px;
	color: var(--client-folio-05-lovable-app-salem);
	background-color: rgba(22, 162, 73, 0.1);
	border: 1px solid rgba(22, 162, 73, 0.2);
}

.row5 .row-text3 {
	margin-left: 139px;
}

.row6 .row-btn-component1 {
	margin-left: 103px;
	color: var(--client-folio-05-lovable-app-mirage);
	border: 1px solid #dae0e7;
}

.row6 .row-btn-component2 {
	margin-left: 25px;
	color: var(--client-folio-05-lovable-app-salem);
	background-color: rgba(22, 162, 73, 0.1);
	border: 1px solid rgba(22, 162, 73, 0.2);
}

.row6 .row-text3 {
	margin-left: 132px;
}

.row7 {
	margin-left: 2px; margin-right: 8px;
	display: flex;
	align-items: flex-start;
	gap: 147px;
	--minContent: 1280;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
}

.row8 {
	margin-top: 1px;
	display: flex;
	align-items: center;
	gap: 8px;
	--minContent: 125;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

.text-atm-withdrawal {
	text-align: left;
	--minContent: 101;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.btn-component4 {
	margin-left: 133px;
	color: var(--client-folio-05-lovable-app-mirage);
	border: 1px solid #dae0e7;
}

.btn-component5 {
	margin-left: 32px;
	color: var(--client-folio-05-lovable-app-salem);
	background-color: rgba(22, 162, 73, 0.1);
	border: 1px solid rgba(22, 162, 73, 0.2);
}

.text2 {
	margin-left: 132px;
}

.row9 {
	margin-left: 2px; margin-right: 8px;
	display: flex;
	align-items: flex-start;
	gap: 147px;
	--minContent: 1280;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
}



/* btn-component-d */

.btn-component-d {
	margin-left: 27px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	text-align: unset;
	background-color: rgba(245, 159, 10, 0.1);
	padding: 2px 10px 2px 11px;
	border: var(--stroke-weight-1) solid rgba(245, 159, 10, 0.2);
	border-radius: 9999px;
	--minContent: 109;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}



/* icon-component-b */

.icon-component-b {
	position: relative;
	width: 11px; height: 11px;
	flex-shrink: 0;
	border: 1px solid var(--client-folio-05-lovable-app-buttercup);
	border-radius: 50%;
	--minContent: 11;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.icon-component-graphic {
	position: absolute; top: 11%; left: 44%; 
	width: 33%;
	--minContent: 2;
	--hSizing: FILL;
	--vSizing: FILL;
	--pConstraintHorizontal: SCALE;
	--pConstraintVertical: SCALE;
}
/* end icon-component-b*/


.btn-component-label3 {
	text-align: left;
	--minContent: 44;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}
/* end btn-component-d*/


.btn-component6 {
	margin-left: 105px;
	color: var(--client-folio-05-lovable-app-mirage);
	padding-left: 11px;
	border: 1px solid #dae0e7;
}

.text3 {
	margin-left: 139px;
}

.row11 .row-btn-component1 {
	margin-left: 103px;
	color: var(--client-folio-05-lovable-app-mirage);
	padding-left: 11px;
	padding-right: 10px;
	border: 1px solid #dae0e7;
}

.row11 .row-btn-component2 {
	margin-left: 16px;
	color: var(--client-folio-05-lovable-app-salem);
	background-color: rgba(22, 162, 73, 0.1);
	border: 1px solid rgba(22, 162, 73, 0.2);
}

.row11 .row-text3 {
	margin-left: 128px;
	color: var(--client-folio-05-lovable-app-salem);
}

.back3 {
	box-shadow: 0px 1px 2px 0px #fff;
	margin-top: 1px;
	display: flex;
	flex-direction: column;
	gap: var(--item-spacing-s);
	background: linear-gradient(116deg, #fff 0%, #fcfcfd 100%) top left / auto auto no-repeat;
	padding: 25px 1px 25px 4px;
	border-radius: 8px;
	--minContent: 1380;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.heading3 {
	margin-left: 24px; margin-right: 24px;
	gap: var(--item-spacing-xs);
}

.back-container5 {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 0 24px;
	--minContent: 1375;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.back-alert {
	position: relative;
	background-color: var(--client-folio-05-lovable-app-buttercup-10);
	padding: 16px 16px 16px 44px;
	border: var(--stroke-weight-1) solid var(--client-folio-05-lovable-app-buttercup-20);
	border-radius: 8px;
	--minContent: 1327;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.back-component {
	position: absolute; top: 16px; left: 16px; 
	width: 16px; height: 16px;
	--minContent: 16;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

.back-text-component {
	position: relative; z-index: 1;
	margin-left: 28px;
	text-align: left;
	--minContent: 1265;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.back-container6 {
	container: back-container6 / inline-size;
	display: flex;
	flex-direction: column;
	gap: 16px;
	--minContent: 1299;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.back-row-top {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	--minContent: 1299;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
}



/* overlay-plus-border */

.overlay-plus-border {
	width: 100%; height: 107px;
	display: flex;
	align-items: flex-start;
	gap: var(--font-size-12);
	flex-grow: 1;
	background-color: var(--client-folio-05-lovable-app-aqua-haze-30);
	padding: 16px;
	border: var(--stroke-weight-1) solid var(--client-folio-05-lovable-app-geyser-50);
	border-radius: 8px;
	--minContent: 642;
	--hSizing: FILL;
	--vSizing: FIXED;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.overlay-plus-border-svg-margin {
	width: 20px; height: 22px;
	flex-shrink: 0;
	--minContent: 20;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}
/* end overlay-plus-border*/


.back-row-bottom {
	height: 108px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	flex-shrink: 0;
	--minContent: 1299;
	--hSizing: FILL;
	--vSizing: FIXED;
	--pConstraintHorizontal: STRETCH;
}

.back-overlay-plus1 {
	width: 100%; height: 107px;
	display: flex;
	align-items: flex-start;
	gap: var(--font-size-12);
	flex-grow: 1;
	background-color: var(--client-folio-05-lovable-app-aqua-haze-30);
	padding: 16px 16px 16px 19px;
	border: var(--stroke-weight-1) solid var(--client-folio-05-lovable-app-geyser-50);
	border-radius: 8px;
	--minContent: 642;
	--hSizing: FILL;
	--vSizing: FIXED;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}



/* component-c */

.component-c {
	position: relative;
	margin-top: 3px;
	width: 13px; height: 18px;
	flex-shrink: 0;
	border: 2px solid var(--client-folio-05-lovable-app-tory-blue);
	border-radius: 2px;
	--minContent: 13;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

.component-line2 {
	position: absolute; bottom: 22%; left: 41%; 
	width: 17%;
	--minContent: 1;
	--hSizing: FILL;
	--vSizing: FILL;
	--pConstraintHorizontal: SCALE;
	--pConstraintVertical: SCALE;
}
/* end component-c*/


.back-overlay-plus2 {
	width: 100%; height: 100%;
	min-height: 108px;
	display: flex;
	align-items: flex-start;
	gap: var(--font-size-12);
	flex-grow: 1;
	background-color: var(--client-folio-05-lovable-app-aqua-haze-30);
	padding: 16px 22px 16px 16px;
	border: var(--stroke-weight-1) solid var(--client-folio-05-lovable-app-geyser-50);
	border-radius: 8px;
	--minContent: 642;
	--hSizing: FILL;
	--vSizing: FILL;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.back-svg-margin {
	width: 20px; height: 22px;
	flex-shrink: 0;
	--minContent: 20;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

.back-container7 {
	display: flex;
	flex-direction: column;
	gap: var(--stroke-weight-4);
	flex-grow: 1;
	align-self: stretch;
	padding-bottom: 23px;
	--minContent: 570;
	--hSizing: FILL;
	--vSizing: FILL;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: STRETCH;
}

.back-text-heading {
	text-align: left;
	--minContent: 570;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.back-text-container3 {
	text-align: left;
	--minContent: 570;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.back-text2 {
	color: var(--client-folio-05-lovable-app-slate-gray);
	text-align: center;
	padding: 16px 24px 0 24px;
	border-top: 1px solid var(--client-folio-05-lovable-app-geyser-50);
	--minContent: 1299;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}



/** breakpoints (margin / paddings) **/

@media screen and (max-width: 1280px) {
	body {
		padding-inline: var(--margin-md);
	}
	.back1 {
		padding-inline: var(--margin-sm);
	}
	.card-back-btn {
		margin-inline: 0;
	}
	.col {
		padding-inline: var(--margin-sm);
	}
	.row-b {
		margin-inline: 0;
	}
	.row3 {
		margin-inline: 0;
	}
	.row7 {
		margin-inline: 0;
	}
	.row9 {
		margin-inline: 0;
	}
	.heading3 {
		margin-inline: 0;
	}
	.back-container5 {
		padding-inline: 0;
	}
	.back-alert {
		padding-inline: var(--margin-sm);
	}
	.back-text-component {
		margin-inline: 0;
	}
	.back-text2 {
		padding-inline: var(--margin-sm);
	}
}

@media screen and (max-width: 576px) {
	body {
		padding-inline: var(--margin-sm);
	}
}



/* container queries (flex rows) */

@container body (width < 781px) {
	.back1 {
		flex-direction: column;
		align-items: center;
		gap: 15px;
	}
}

@container back1 (width < 542px) {
	.back-container1 {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
	.back-container1 > .back-border {
		width: 100%;
	}
	.back-container1 > .back-container2 {
		width: 100%;
	}
}

@container body (width < 1351px) {
	.container2 {
		height: unset;
		flex-direction: column;
		gap: 20px;
	}
	.container2 > * {
		margin-left: unset !important; margin-right: unset !important;
	}
	.container2 > .card-back1 {
		width: 100%;
	}
	.container2 > .card-back2 {
		width: 100%;
	}
	.container2 > .card-back3 {
		width: 100%;
	}
}

@container back2 (width < 365px) {
	.back-container4 {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
	.back-container4 > * {
		margin-left: unset !important; margin-right: unset !important;
	}
	.back-container4 > .btn-component1 {
		width: 100%;
	}
	.back-container4 > .btn-component2 {
		width: 100%;
	}
	.back-container4 > .btn-component3 {
		width: 100%;
	}
}

@container col (width < 1277px) {
	.row-b {
		flex-direction: column;
		align-items: center;
		gap: 13px;
	}
	.row-b > * {
		margin-left: unset !important; margin-right: unset !important; margin-top: unset !important;
		text-align: center;
	}
}

@container col (width < 1277px) {
	.row3 {
		flex-direction: column;
		align-items: center;
		gap: 13px;
	}
	.row3 > * {
		margin-left: unset !important; margin-right: unset !important;
		text-align: center;
	}
}

@container col (width < 1277px) {
	.row7 {
		flex-direction: column;
		align-items: center;
		gap: 13px;
	}
	.row7 > * {
		margin-left: unset !important; margin-right: unset !important; margin-top: unset !important;
		text-align: center;
	}
}

@container col (width < 1277px) {
	.row9 {
		flex-direction: column;
		align-items: center;
		gap: 13px;
	}
	.row9 > * {
		margin-left: unset !important; margin-right: unset !important; margin-top: unset !important;
		text-align: center;
	}
}

@container back-container6 (width < 1298px) {
	.back-row-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.back-row-top > .overlay-plus-border1 {
		width: 100%;
	}
	.back-row-top > .overlay-plus-border2 {
		width: 100%;
	}
}

@container back-container6 (width < 1298px) {
	.back-row-bottom {
		height: unset;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.back-row-bottom > .back-overlay-plus1 {
		width: 100%;
	}
	.back-row-bottom > .back-overlay-plus2 {
		width: 100%;
	}
}


/* @media (min-width: 425px) {
  .grid { grid-template-columns: 2fr 1fr; }
  .sidebar { display: block; }
}
@media (min-width: 900px) {
  .container { max-width: 1300px; }
}
@media (min-width: 1200px) {
  .container { max-width: 1500px; }
} */


/* General styles */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: #f9fbfd;
  margin: 0;
  padding: 40px;
  display: flex;
  justify-content: center;
}

/* Container */
.transaction-container {
  background: #fff;
  padding: 20px 30px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  width: 100%;
  max-width: 1850px; /* ✅ keep table size */
  overflow-x: auto;  /* ✅ enable horizontal scroll on small screens */
}

/* Title */
.title {
  font-size: 20px;
  margin-bottom: 15px;
  color: #1e293b;
}

/* Table */
.transaction-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px; /* ✅ keeps columns readable */
}

.transaction-table thead {
  border-bottom: 1px solid #e5e7eb;
}

.transaction-table th {
  text-align: left;
  padding: 12px 8px;
  color: #6b7280;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap; /* ✅ prevents header text wrapping */
}

.transaction-table td {
  padding: 14px 8px;
  font-size: 15px;
  color: #374151;
  border-bottom: 1px solid #f1f1f1;
  white-space: nowrap; /* ✅ keeps data inline */
}

/* Badges */
.badge {
  background: #f8fafc;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  padding: 3px 10px;
  font-size: 13px;
  color: #475569;
  white-space: nowrap;
}

/* Status */
.status {
  font-size: 13px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 9999px;
  white-space: nowrap;
}

.status.completed {
  background: #dcfce7;
  color: #15803d;
}

.status.pending {
  background: #fef9c3;
  color: #b45309;
}

/* Amount colors */
.positive {
  color: #16a34a;
  font-weight: 600;
}

.negative {
  color: #dc2626;
  font-weight: 600;
}

/* Arrows */
.arrow.up {
  color: #16a34a;
  margin-right: 6px;
}

.arrow.down {
  color: #dc2626;
  margin-right: 6px;
}

/* ✅ Responsiveness */
@media (max-width: 1024px) {
  .dashboard-header {
    flex-direction: column;
    text-align: center;
  }
  .balance-info { text-align: center; margin-top: 10px; }
}

@media (max-width: 768px) {
  .quick-actions { flex-direction: column; }
  .transaction-table,
  .transaction-table thead,
  .transaction-table tbody,
  .transaction-table th,
  .transaction-table td,
  .transaction-table tr {
    display: block;
    width: 100%;
  }
  .transaction-table thead { display: none; }
  .transaction-table tr {
    margin-bottom: 15px;
    background: #fff;
    border-radius: 8px;
    padding: 10px;
  }
  .transaction-table td {
    border: none;
    display: flex;
    justify-content: space-between;
    padding: 8px 5px;
  }
  .transaction-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #6b7280;
    margin-right: 10px;
  }
}