:root {
	--header-bg-color: #105a38;
	--header-font-color: #ffffff;
	--header-link-color: #ffffff;
	--header-link-hover-color: #1a6f48;
	--header-link-selected-color: #077f48;
	--bg-color: #f6f7fb;
	--card-bg: #ffffff;
	--primary: #1f3a5f; /* deep finance blue */
	--accent: #2fa46f; /* muted green */
	--text-dark: #2c2c2c;
	--text-muted: #7a869a;
	--border: #e1e6ee;

	--color-red: #bb3633;
	--color-green: #277e53;

	--bg: #0b1220; /* page background */
	--card: rgba(255, 255, 255, 0.06);
	--card-2: rgba(255, 255, 255, 0.08);
	--border: rgba(255, 255, 255, 0.1);
	--text: #000000;
	--muted: #000000;
	--accent: #34d399; /* finance-y green */
	--danger: #fb7185; /* red/pink */
	--shadow: 0 12px 30px rgba(0, 0, 0, 0.25);

	--dropdown-border: #d4d4d4;
}

/* Sans-serif fonts */
.font-roboto {
    font-family: 'Roboto', sans-serif;
}

.font-open-sans {
    font-family: 'Open Sans', sans-serif;
}

.font-inter {
    font-family: 'Inter', sans-serif;
}

.font-lato {
    font-family: 'Lato', sans-serif;
}

.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}

.font-poppins {
    font-family: 'Poppins', sans-serif;
}

.font-source-sans {
    font-family: 'Source Sans 3', sans-serif;
}

.font-nunito {
    font-family: 'Nunito', sans-serif;
}

/* Serif font */
.font-playfair {
    font-family: 'Playfair Display', serif;
}

/* Modern minimal */
.font-dm-sans {
    font-family: 'DM Sans', sans-serif;
}
.fa-red {
	color: var(--color-red);
}
.fa-green {
	color: var(--color-green);
}
* {
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
}

html {
	min-width: 360px;
}
body {
	margin: 0;
	min-height: 100vh;
	background: linear-gradient(135deg, #eef2f7, #f9fbfd);
	height: 100%;
	font-family: 'Inter', 'Roboto', 'Open Sans', sans-serif;
}
.homepage-bg {
	background: #f7f5f3;
}
h1, h2, h3 {
    font-family: 'Montserrat', 'Poppins', sans-serif;
}
.login-wrapper {
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	width: 100%;
	padding: 20px;
	left: 10px;
	min-height: 80vh;
	position: relative;
}
.page-wrapper {
	margin-top: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
    justify-content: flex-start;
    min-height: 80vh;
}
.header-wrapper {
	position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
	top: 0px;
	background-color: var(--header-bg-color);
	color: var(--header-font-color);
	width: 100%;
	min-height: 80px;
	z-index: 10;
	box-shadow: 0 3px 5px #a7a7a7;
}
.header-elements {
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo-wrap {
	position: absolute;
	left: 10px;
}
.logo-wrap > img,
.logo-wrap * img  {
	max-width: 200px;
}
.logo-wrap.mobile-only {
	display: none;
}
.logo-wrap.mobile-only > img,
.logo-wrap.mobile-only * img {
	max-height: 50px;
}
.navigation-elements {
	display: flex;
	align-items: center;
	justify-content: center;
}
.navigation-elements > a {
	margin: 20px;
	text-decoration: none;
	color: var(--header-link-color) !important;
}
.navigation-link {
	font-size: 18px;
	padding: 10px 20px;
	border-radius: 5px;
}
.navigation-link:hover {
	background-color: var(--header-link-hover-color);
	color: var(--header-link-font-color);
}
.navigation-link.selected {
	background-color: var(--header-link-selected-color);
	color: var(--header-link-font-color);
}
.nav-toggle {
	display: none;
}
.brand {
	text-align: center;
	font-size: 28px;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 20px;
	letter-spacing: 0.5px;
}
.brand > img {
	max-width:400px;
}

.login-card {
	background: var(--card-bg);
	border-radius: 10px;
	padding: 30px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	border: 1px solid var(--border);
	min-width: 400px;
}

.login-card h2 {
	margin: 0 0 25px;
	color: var(--text-dark);
	font-size: 20px;
	font-weight: 600;
	text-align: center;
}

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

label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	color: var(--text-muted);
	font-weight: 600;
}

input[type="text"],
input[type="password"],
input[type="input"] {
	width: 100%;
	padding: 11px 12px;
	border-radius: 6px;
	border: 1px solid var(--border);
	font-size: 14px;
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
}

input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 2px rgba(31, 58, 95, 0.12);
}

.checkbox-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--text-muted);
	margin-bottom: 22px;
}

.checkbox-row input {
	accent-color: var(--accent);
}
.select {
    height: 30px;
    min-width: 130px;
    font-size: 15px;
    padding: 2px;
    background-color: #FFF;
}
a,
a:visited,
a:active,
a:focus {
    color: #000;
    text-decoration: none;
}
a:hover {
	color: #077f48;
}

button {
	width: 100%;
	padding: 12px;
	border-radius: 6px;
	border: none;
	background: var(--color-green);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition:
		transform 0.1s ease,
		box-shadow 0.1s ease;
}

.notice {
	width: 100%;
    padding: 15px 20px;
    background-color: #ededed;
    border: solid 1px #515151;
    margin: 5px 0px;
}
.notice.success {
	background-color: #008500;
    color: #FFF;
    border: solid 1px #004e00;
}
.notice.error {
    background-color: #c80000;
    color: #FFF;
    border: solid 1px #9d0101;
}
.footer-text {
	text-align: center;
	margin-top: 18px;
	font-size: 12px;
	color: var(--text-muted);
}

.box {
	max-width: 100%;
	width: 100%;
}
.notice-msg {
	display: flex;
    flex-direction: row;
    align-items: center;
}
.notice-msg.hidden {
	display:none;
}
.notice-msg > .msg-icon {
    padding: 6px 10px;
    margin-right: 10px;
    background-color: #ffffff63;
    border-radius: 5px;
}
.notice-msg > .msg-text {
    font-family: 'Montserrat';
    color: #000;
    font-size: 16px;
}
.notice-msg.error {
	background: #ffe8e8;
	border: 1px solid #ffb3b3;
	padding: 10px;
	border-radius: 8px;
	margin-bottom: 12px;
}
.notice-msg.success {
	background: #e8ffe8;
	border: 1px solid #b3ffb3;
	padding: 10px;
	border-radius: 8px;
	margin-bottom: 12px;
}

.page-box-wrap {
	color: var(--text);
	padding:16px
	/*
	border: 1px solid var(--border);
	border-radius: 16px;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.05),
		rgba(255, 255, 255, 0.03)
	);
	box-shadow: var(--shadow);
	color: var(--text);
	overflow: hidden;
	background-color: #fff;
	*/
}
.homepage-box-wrap {

}
/* ===== Flex "table" styling ===== */
.pretable-total-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}
	.table-header {

	}
	.table-caption {
	    display: flex;
    	align-items: center;
    	font-size: 18px;
	}
	.table-caption > .total-text {

	}
	.table-caption > .total-amount {
	    margin-left: 10px;
	}
	.table-filter-wrap {
		display: flex;
	}
		.filter-wrapper {

		}
			.filter-block-wrap {
			    display: flex;
			    flex-direction: row;
			    background-color: #ffffff;
			    align-items: center;
			    justify-content: flex-start;
			    padding: 10px 20px;
			    border-radius: 21px;
			}
			.filter-block-wrap > .label {

			}
			.filter-block-wrap > .filter-dropdown {
				margin-left: 12px;
				width: 100%;
			}
			.filter-block-wrap > .filter-dropdown > select {
				border: 0px;
				width: 100%;
			}
.flex-table {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px;
	background-color: #FFF;
    border-radius: 4px;
    box-shadow: 4px 5px 2px 1px rgb(198 198 198 / 20%);
}

/* Header */
.table-header {
	position: sticky;
	top: 0;
	z-index: 2;

	display: flex;
	align-items: center;
	gap: 10px;

	padding: 12px 12px;
	border-radius: 12px;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.1),
		rgba(255, 255, 255, 0.06)
	);
	border: 1px solid var(--border);

	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--muted);
	backdrop-filter: blur(10px);
}

/* Rows */
.table-row {
	display: flex;
	align-items: center;
	gap: 10px;

	padding: 12px 12px;
	border-radius: 12px;
	border: 1px solid transparent;
	background: rgba(255, 255, 255, 0.03);

	transition:
		transform 0.12s ease,
		background 0.12s ease,
		border-color 0.12s ease;
}

.table-row:nth-child(even) {
	/* zebra (header counts as first child visually) */
	background: rgba(255, 255, 255, 0.045);
}

.table-row:hover {
	background: rgba(52, 211, 153, 0.08);
	border-color: rgba(52, 211, 153, 0.25);
}
.table-row,
.table-row .col,
.category-modify {
  overflow: visible !important;
}
.hover-edit-icon {
	display:none;
	margin-left: 10px;
	cursor: pointer;
}
.category-existing {
	display:flex;
}
.category-existing.hidden {
	display: none;
}
.table-row:hover * .category-existing.show > .hover-edit-icon {
	display:block;
}
.category-modify.hidden {
	display: none;
}
.category-modify.show {
	display: block;
}
.category-icon-save.hidden {
	display:none;
	margin-left: 10px;
}
/* Cells */
.table-row > .col,
.table-header > .col {
	min-width: 0; /* enables ellipsis */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.table-row > .col {
	font-size: 16px;
	color: var(--text);
}

/* Column sizing */
.col-small {
	flex: 0 0 10%;
}
.col-medium {
	flex: 0 0 20%;
	color: var(--muted);
}
.col-large {
	flex: 0 0 30%;
}
.col-xlarge {
	flex: 1 1 auto;
}
.col-amt {
	flex: 0 0 140px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Amount coloring (optional) */
.col-amt.is-pos {
	color: var(--accent);
	font-weight: 700;
}
.col-amt.is-neg {
	color: var(--danger);
	font-weight: 700;
}
.col-amt.is-zero {
	color: var(--muted);
}
.new-label {
    background-color: #f26060;
    padding: 5px 7px;
    width: auto;
    color: #FFF;
    border-radius: 5px;
    display: inline-block;
    margin-left: 5px;
    font-size: 10px;
}
/* Subtle separators inside rows (optional vibe) */
.table-row .col-desc {
	padding-left: 10px;
	border-left: 1px dashed rgba(255, 255, 255, 0.12);
}

/**
 * Insights
 */
.insight-wrapper{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
	.total-box-wrap {
	    display: flex;
	    flex-direction: column;
	    justify-content: flex-start;
	    border: solid 1px #e5e5e5;
	    border-radius: 12px;
	    margin: 8px 10px;
        padding: 20px;
	    min-height: 200px;
	    max-width: 400px;
	    width: 100%;
	    background-color: #fff;
	    box-shadow: 4px 5px 2px 1px rgb(198 198 198 / 20%);
	}
	.total-box-wrap.large {
		max-width: 820px;
		width: 100%;
	}
	.total-box-wrap > .title {
	    font-size: 16px;
	    color: #969696;
	    font-weight: bold;
	    position: relative;
	    margin-bottom: 30px;
	}
		.total-box-wrap > .title > .title-note {
			position: absolute;
			top: 0px;
			right: 0;
			font-size: 13px;
			color: #a9a9a9;
			font-family: 'Lato', -serif;
		}
	.total-box-split {
		display: flex;
		flex-direction: row;
	}
	.total-box-left,
	.total-box-right {
		width: 50%;
	}
	.chart-wrap-pie {
		padding: 20px;
	}
	.total-box-wrap > .transaction-box {
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    justify-content: space-between;
	    min-width: 200px;
	    margin-bottom: 20px;
	}
		.transaction-count {
		    display: flex;
		}
		.transaction-count > .number {
		    font-size: 17px;
		    font-weight: bold;
		    margin-right: 13px;
		}
	    .transaction-amount {
	    	font-size: 26px;
		    font-weight: bold;
	        color: var(--color-green);
	    }
	    .transaction-change {
	    	display: flex;
    		align-items: center;
    	    background-color: #fff4f6;
		    padding: 4px 10px;
		    border-radius: 15px;
		    border: solid 1px #cb1f1f;
		    font-size: 13px;
	    }
	    .transaction-change.green {
    	    background-color: #f5fff4;
    		border: solid 1px #1fcb38;
	    }
	    .icon-chg-space {
	    	margin-right: 5px;
	    }
	.transaction-details-wrap {
	    display: flex;
    	flex-direction: column;
	}
	.transaction-totals,
	.transaction-category-order {
		display: flex;
	    flex-direction: row;
	    padding: 5px 10px;
	}
	.transaction-totals > .number-text-number,
	.transaction-category-order > .number-text-number {
	    width: 100px; 
    	text-align: right;
    	font-weight: bold;
	}
	.transaction-categories-order {
		display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	}
	.transaction-cateogory-transactions {
		margin-left: 20px;
    	font-size: 13px;
    	margin-bottom: 10px;
	}
	.transaction-totals-categories {
		display: flex;
	    flex-direction: row;
	    align-items: center;
	    margin-bottom: 5px;
	}
	.transaction-category-number {
		display: flex;
	    justify-content: flex-end;
	    font-size: 18px;
	    font-weight: bold;
	    width: 40%;
	    text-align: right;
	    position: relative;
	    margin-right: 10px;
	}
	.transaction-totals > .number-text-number {
		margin-right: 10px;
	}
		.label-color-block {
		    width: 20px;
		    height: 20px;
		    content: "";
		    position: absolute;
		    bottom: 0px;
		    left: 0px;
		}
	.transaction-category-info {
	    font-size: 14px;
	}
	.number-text-text {
	    color: #313131;
    	font-size: 16px;
	}
	.number-total-trans {
		font-size: 12px;
	}


/**
 * Insights - summary card
 */
.total-summary-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
	min-height: 240px;
    max-width: 400px;
    width: 100%;
    margin: 8px 10px;
    position: relative;
    border-radius: 10px;
    box-shadow: 4px 5px 2px 1px rgb(198 198 198 / 20%);
}
.summary-title {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 13px;
    color: #a9a9a9;
    font-family: 'Lato', -serif;
}
.summary-info-card-wrap {
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    width: 100%;
    background-color: #FFF;
    justify-content: space-around;
    border: solid 2px #ececec;
    border-radius: 10px;
}
.account-type-wrap {
	display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-content: flex-end;
    flex-wrap: wrap;
    padding: 0px 10px;
    font-size: 13px;
    color: #7c7c7c;
}
.account-type {

}
.summary-date {

}
.summary-info-card-top {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-evenly;
    margin-top: 10px;
}
.summary-left,
.summary-right {
	text-align: center;
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.summary-left {
	border-right: solid 1px #eee;
}
.summary-panel-title {
    font-size: 19px;
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Lato';
}
.summary-panel-title > i {
	font-size: 26px;
	padding-right: 8px;
}
.summary-panel-amount-total {
	font-size: 27px;
	font-weight: bold;
	color: var(--color-green);
	margin-bottom: 10px;
}
.summary-panel-amount-total.expenses {
	color: var(--color-red);
}
.summary-panel-transactions {
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.summary-panel-transactions > .number {
	font-weight: bold;
	margin-right: 5px;
}

.summary-info-card-bottom {
    border-top: solid 1px #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0px 10px;
}
.card-bottom-remaining {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin-top: 7px;
    font-size: 15px;
    align-items: center;
}
.card-bottom-remaining > .remaining {
	color: #a5a5a5;
}
.card-bottom-remaining > .remaining-amount {
	font-weight: bold;
	color: var(--color-green);
	font-size: 22px;
}
	.remaining-amount.red {
		color: var(--color-red);
	}
.card-bottom-remaining > .percent-diff {
	font-weight: bold;
    color: var(--color-green);
    font-size: 22px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}
.percent-diff.red {
	color: var(--color-red);
}
	.percent-diff > .prev-month {
	    color: #707070;
	    font-size: 14px;
	    margin-left: 5px;
	    font-weight: 100;
	}
.card-bottom-bar {
	width: 100%;
}
.bm-progress {
	width: 100%;
	max-width: 900px;
	height: 19px;
	margin: 5px auto;
	background: #cfe7d1;   /* light green track */
	border-radius: 32px;
	overflow: hidden;
}
.bm-progress.red {
	background: #e7cfcf;
}

.bm-progress-fill {
	height: 100%;
	background: linear-gradient(to right, var(--color-green), var(--color-green));
	border-radius: 32px;
}
.bm-progress-fill.red {
	background: linear-gradient(to right, var(--color-red), var(--color-red));
}



/**
 * Import module
 */
.import-wrapper {
    display: flex;
    background-color: #FFF;
    flex-direction: column;
    max-width: 1000px;
    padding: 40px;
    justify-content: center;
    margin: 0 auto;
}
.drop-zone{
	border: 2px dashed #9aa4b2;
	border-radius: 14px;
	padding: 36px;
	cursor: pointer;
	user-select: none;
	transition: 120ms ease;
	background: #fafbfc;
}

.drop-zone:hover {
	border-color: #09ae60;
    background: #f5fff6;
}
.drop-zone.is-dragover {
	border-color: #5b6bff;
	background: #eef2ff;
	transform: scale(1.01);
}
.dz-inner {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	text-align: center;
}
.dz-title {
	font-size: 20px;
	font-weight: 700;
}
.dz-sub {
	color: #5f6b7a;
}
.dz-meta {
	margin-top: 6px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	color: #111827;
	width: 100%;
}
.dz-remove {
	margin-top: 6px;
	background: transparent;
	border: 1px solid #d1d5db;
	padding: 8px 12px;
	border-radius: 10px;
	cursor: pointer;
	color: red;
	background-color: #fceeee;
}
.dz-actions {
	margin-top: 14px;
}
#fileList {
	margin-top: 10px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
}

.file-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border-top: 1px solid #f1f5f9;
}

.file-row:first-child { border-top: 0; }

.file-meta {
	font-size: 12px;
	color: #6b7280;
	margin-top: 2px;
}

.file-remove {
	border: 1px solid #e5e7eb;
	background: #fff;
	border-radius: 8px;
	padding: 6px 10px;
	cursor: pointer;
	background-color: #fceeee;
    color: red;
    width: auto;
}

.file-remove:hover,
.dz-remove:hover {
	background: #ffc2c2;
}
/**
 * Footer
 */
.footer-wrapper {
    display: flex;
    width: 100%;
    background-color: #404040;
    color: #8a8a8a;
    min-height: 120px;
    font-family: 'Lato', sans-serif;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 40px 0px;
}
.footer-top-row {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 30px;
    max-width: 900px;
}
	.footer-logo > img {
		max-width:200px;
	}
	.social-media {
		display: flex;
	    flex-direction: row;
	    justify-content: flex-start;
	    font-size: 22px;
	}
		.social-link {
			padding: 0px 10px;
			color: #888888;
		}
		.social-link > a {
			color: #888888;
		}

.footer-middle-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-bottom: 30px;
    justify-content: space-between;
    max-width: 900px;
}
	.middle-column {

	}
	.column-links-wrap {
		margin-left: 10px;
		display: flex;
		flex-direction: row;
	}
		.column-title {
			font-weight: bold;
			font-size: 16px;
			color: #bdbdbd;
			margin-bottom: 10px;
		}
		.column-link {
		    display: flex;
		    align-items: center;
	        padding: 10px;
		}
		.column-link > a {
			color: #8a8a8a;
		}
		.column-link > i {
			margin-right: 10px;
		}
		.column-link > .fa-tiny-icon {
			font-size: 5px;
		}
.footer-bottom-row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    font-size: 13px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
	.footer-copyright {

	}
	.website-name {
	    font-weight: bold;
	    font-family: 'Roboto';
	    font-size: 15px;
	}

/**
 * Styled dropdown
 */
.styled-dropdown-wrapper{
	position: relative;
	overflow: visible; /* important */
}

.dropdown-button {
    background-color: #fefefe !important;
    background: none;
    color: #000;
    border: solid 1px #cecece;
    height: 40px;
    line-height: 17px;
    text-align: left;
}
.dropdown-button:hover {
	box-shadow: none !important;
	transform: none !important;
}
.dropdown-menu{
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  z-index: 9999;
  background: #fff;
}
.dropdown-menu.hidden {
	display:none;
}
.dropdown-search {
    border-left: solid 1px var(--dropdown-border);
    border-right: solid 1px var(--dropdown-border);
}
.dropdown-search-input {
	border-radius: 0px !important;
    padding: 10px !important;
}
.dropdown-list {
    background-color: #ffffff;
    border: solid 1px var(--dropdown-border);
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}
.dropdown-list::-webkit-scrollbar {
    width: 6px;
}

.dropdown-list::-webkit-scrollbar-thumb {
    background-color: #cfcfcf;
    border-radius: 4px;
}
.dropdown-item {
    cursor: pointer;
    padding: 8px 6px;
    border-bottom: solid 1px #ececec;
}
.dropdown-item:hover {
	background-color: var(--header-link-hover-color);
    color: #FFF;
}
.dropdown-item.selected {
	background-color: var(--header-bg-color);
    color: #FFF;
}

.chart-wrap {
  position: relative;
  width: 100%;
}

@media (max-width: 767px) {
  .chart-wrap {
    height: 400px;
  }
}

@media (min-width: 768px) {
  .chart-wrap {
    height: 320px; /* your desktop height */
  }
}

.chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}


/**
 * Homepage
*/
.navigation-signup-wrap {
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 20px;
    font-size: 18px;
    align-items: center;
}
.login-link {
	margin-right: 40px;
	cursor: pointer;
}
.signup-button {
    background: linear-gradient(135deg, #d97f17, #d28f54);
    padding: 10px 20px;
    border-radius: 7px;
    cursor: pointer;
    color: #FFF;
}
/**
 * Login box popup
 */
.login-box-wrapper {
	position: absolute;
    top: 100%;
    right: 40px;
    margin-top: 10px;
    z-index: 1000;
}
.login-box-wrapper.hidden {
	display: none;
}
/**
 * More homepage
 */
.homepage-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
}
.homepage-intro-wrapper {
	display: flex;
    flex-direction: column;
    width: 100%;
    align-content: center;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 50px;
}
.intro-title {
    display: flex;
    flex-direction: row;
	font-size: 40px;
    font-family: 'Roboto';
    font-weight: bold;
}
	.title-simple {
		font-family: 'Sriracha';
	}
	.title-forever {
		padding-left: 10px;
		color: var(--color-green);
		font-family: 'Sriracha';
	}

.intro-segment-two {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
}
.segment-two-left {
	display: flex;
    flex-direction: column;
    width: 50%;
}
	.segment-two-desc {
		font-size: 30px;
	    max-width: 50%;
	    font-style: italic;
	    margin-bottom: 40px;
	    line-height: 35px;
	    font-family: Alkatra;
	    color: #555555;
	}
	.segment-two-button-wrap {

	}
	.segment-two-button {
	    background: linear-gradient(135deg, #d97f17, #d28f54);
	    width: 300px;
	    padding: 20px;
	    color: #FFF;
	    font-weight: bold;
	    font-size: 31px;
	    border-radius: 10px;
	    text-align: center;
        box-shadow: 0 -3px 8px rgb(182 182 182 / 40%), 0 3px 8px rgb(182 182 182 / 40%);
        cursor: pointer;
	}
	.segment-two-link {
	    margin-top: 20px;
    	font-size: 20px;
	}
.segment-two-right {
	width: 50%;
}
	.home-top-image > img {
		width: 100%;
    	max-width: 1000px;
	}

.homepage-feature-bar {
	display: flex;
    flex-direction: row;
    justify-content: space-around;
	margin-top: 50px;
	padding:30px;
	background-color:#FFF;
	box-shadow: 0 -3px 8px rgb(182 182 182 / 40%), 0 3px 8px rgb(182 182 182 / 40%);
}
	.feature-wrap {
	    display: flex;
    	flex-direction: row;
		max-width:350px;
		align-items: center;
	}
		.feature-icon {
	        width: 70px;
		    background-color: #cee0c8;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    border-radius: 52px;
		    font-size: 40px;
		    padding: 14px 37px;
		    color: var(--color-green);
		}
		.feature-desc {
		    margin-left: 8px;
		    color: #213421;
		    font-family: 'Lato';
		}
			.feature-title {
				font-weight: bold;
			    font-size: 25px;
			    margin-bottom: 12px;
			    font-family: 'Roboto';
			}
		    .feature-word {

		    }
.homepage-howitworks-wrap {
	margin-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
	.center-long-bar-wrap {
	    width: 100%;
	    display: flex;
	    align-items: center;
	    gap: 20px;
	    margin: 0 auto;
    	max-width: 1200px;
    	margin-top: 60px;
    	margin-bottom: 40px;
	}

	.long-bar {
	    flex: 1;
	    height: 2px;
	    background: #e5e5e5;
	}

	.center-title {
	    font-size: 40px;
	    font-weight: bold;
	    color: #6b6b6b;
	    white-space: normal;
	    font-family: 'Sriracha';
	    min-width: 0; 
  		overflow-wrap: anywhere;
	}
	.center-title.medium-size {
		font-size: 30px;
	}
	.homepage-howitworks-box-wrap {
		display: flex;
	    justify-content: center;
	}
	.howitworks-box-wrap {
	    background-color: #FFF;
	    display: flex;
	    flex-direction: row;
	    border-radius: 3px;
	    box-shadow: 0 -1px 9px rgb(182 182 182 / 40%), 0 1px 5px rgb(182 182 182 / 40%);
	    border: solid 1px #c2c2c2;
	    align-items: flex-start;
	    padding: 20px 10px;
	}

	.howitworks-box-wrap > .how-box-item {
		padding: 20px;
		display: flex;
    	flex-direction: row;
	    max-width: 33%;
    	width: 100%;
	}
	.how-box-item.divider {
	    position: relative;
	}
	.how-box-item.divider::after {
    content: "";
	    position: absolute;
	    right: 0;
	    top: 50%;
	    transform: translateY(-50%);
	    height: 50%;
	    width: 1px;
	    background: #d2d2d2;
	}
	.how-box-left {

	}
	.how-box-left > .number {
        background-color: var(--color-green);
	    color: #FFF;
	    font-size: 26px;
	    padding: 11px;
	    border-radius: 30px;
	    width: 46px;
	    text-align: center;
	    font-weight: bold;
	    line-height: 20px;
	}
	.how-box-right {
		padding-left: 8px;
	}
	.how-box-right > .text-order {
		display: flex;
	    flex-direction: column;
	    flex-wrap: wrap;
	}
		.text-order > .title {
			font-weight: bold;
    		margin-bottom: 7px;
    		font-size: 19px;
   	 		font-family: 'Source Sans 3';
		}
		.text-order > .desc {

		}
	.insights-image-wrap {
		display:flex;
		justify-content: center;
	}
	.insights-image-home > img {
		width: 100%;
    	max-width: 1100px;
	}
.your-finances-wrap {
	background-color:#FFF;
	box-shadow: 0 -3px 8px rgb(182 182 182 / 40%), 0 3px 8px rgb(182 182 182 / 40%);
}
.product-info-wrap {
	margin: 0 auto;
    max-width: 900px;
    width: 100%;
    margin-bottom: 40px;
    padding: 0px 40px;
}
	.product-info-item {
        display: flex;
	    flex-direction: row;
	    padding: 7px 0px;
	}
		.product-info-item > .icon {
			color: var(--color-green);
		}
		.product-info-item >.text {
			margin-left: 10px;
		}

.start-tracking-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}
	.get-started-header {
		font-size: 33px;
		font-family: 'Source Sans 3';
    	font-weight: bold;
    	padding: 0px 15px;
	}
	.get-started-tagline {
		margin: 20px 0px;
    	font-size: 20px;
	}
	.get-started-button-wrap {
	    margin-top: 10px;
    	margin-bottom: 100px;
	}
		.get-started-button {
		    background-color: green;
		    padding: 13px 40px;
		    color: #FFF;
		    font-size: 27px;
		    font-weight: bold;
		    border-radius: 5px;
		    cursor: pointer;
		}
		.get-started-button > i {
			margin-right: 20px;
		}

/**
 * Register
 */
.register-wrapper {
	display: flex;
    justify-content: center;
    flex-direction: column;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    background-color: #fff;
    padding: 50px;
    border-radius: 10px;
}
	.register-title {
		font-size: 30px;
	    margin-bottom: 50px;
	}
	.register-form-field {
		margin-bottom: 20px;
	}
	.register-form-field > input {
		border:solid 1px #dadada;
	}
	.register-error {
		background-color: #ffdada;
	    color: #a00000;
	    padding: 10px;
	    margin-bottom: 10px;
	}
@media (max-width: 760px) {
	.homepage-intro-wrapper,
	.intro-segment-two,
	.segment-two-left,
	.segment-two-right {
		align-items: center;
		width: 100%;
	}
	.intro-segment-two {
		flex-direction: column;
	}
	.segment-two-desc {
		max-width: 100%;
		padding: 5px;
	}
	.homepage-feature-bar {
		flex-direction: column;
		flex-wrap: nowrap;
	}
	.feature-wrap {
		margin-bottom: 30px;
	}
	.howitworks-box-wrap {
		flex-direction: column;
	}
	.howitworks-box-wrap > .how-box-item {
		max-width: 100%;
	}
	.how-box-item.divider {
		border-bottom: solid 1px #eee;
	}
	.how-box-item.divider::after {
	    display:none;
	}
	.product-info-wrap {
		padding: 0px 20px;
	}
	.intro-title {
		flex-direction: column;
	}
	.center-long-bar-wrap {
		flex-direction: column;
		gap: 0;
        margin-top: 10px;
        margin-bottom: 10px;
	}
	.center-title {
		padding: 5px;
		text-align: center;
	}
}

/**
 * Accounts
 */
.setup-account-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.setup-account-wrapper > a {
	color: #000;
}
.account-item {
	background-color: #FFF;
    padding: 10px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    border: solid 1px #cecece;
    cursor: pointer;
}
.account-item:hover {
	background-color: #f5fff6;
}
	.account-logo {
	    padding: 14px;
	    margin: 2px 10px;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    width: 150px;
	    height: 100px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	.account-logo > img {
		max-width: 100%;
	    max-height: 100%;
	    object-fit: contain;
	}
	.account-desc-wrap {

	}
		.account-title {
			font-size: 18px;
    		font-weight: bold;
		}
		.account-desc {

		}
.existing-account-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.existing-account-item {
	background-color: #FFF;
    padding: 10px;
    margin: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    border: solid 1px #cecece;
    max-width: 500px;
    width:100%;
    position:relative;
}
.account-modify-wrap {
    position: absolute;
    right: 20px;
    height: 100%;
    top: 0px;
}
.account-modify-tools {
	display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
}
.account-modify-wrap,
.account-modify-wrap * a {
    color: #eee;
}
.existing-account-item:hover {
	background-color: #f5fff6;
}
.existing-account-item:hover > .account-modify-wrap,
.existing-account-item:hover > .account-modify-wrap * a {
	color: #808080;
}
.account-type-wrapper {
    display: flex;
    flex-direction: row;
}
	.sel-account-type-wrap {
		display: flex;
    	flex-direction: row;
	    background-color: #ffffff;
	    border: solid 1px #e0e0e0;
	    padding: 10px 15px;
	    border-radius: 5px;
	    margin-right: 10px;
	    font-size: 15px;
	    cursor: pointer;
	}
	.account-type-label:has(.account-radio:checked) .sel-account-type-wrap {
		background-color: var(--header-link-selected-color);
    	color: #FFF;
	}
	.account-type-logo {
	    padding: 0px 5px;
	}
	.account-type-name {

	}
	.account-radio {
		display:none;
	}

/**
 * 
 */
.form-field-wrapper {
    background-color: #FFF;
    padding: 20px;
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
}
.form-field {
    margin-bottom: 20px;
}




/* ===== Mobile layout: rows become stacked key/value ===== */
@media (max-width: 760px) {
	.logo-wrap.mobile-only {
		display: block;
	}
	.logo-wrap.full-only {
		display: none;
	}
	.navigation-mobile-menu {
		position: absolute;
		right: 0px;
	}
	.nav-toggle {
		background: none;
		border: none;
		color: #fff;
		font-size: 1.5rem;
		cursor: pointer;
		padding: 0.35rem 0.5rem;
		border-radius: 10px;
        display: block;
	}

	.nav-toggle:hover {
		background: rgba(255,255,255,0.08);
	}
	.box {
		padding: 2px;
	}
	.table-header {
		display: none;
	}

	.table-row {
		position: relative;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding: 6px;
        border-bottom: solid 1px #eee;
        border-radius: 0px;
	}

	.table-row > .col {
		display: flex;
		justify-content: flex-start;
		gap: 0px;
		white-space: normal;
	}

	.table-row > .col::before {
		content: attr(data-label);
		color: var(--muted);
		font-weight: 700;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}
	.mobile-order-1 {
		order: 0;
	}
	.mobile-order-2 {
		order: 1;
	}
	.mobile-order-3 {
		order: 2;
	}
	.col-desc {
		padding-left: 0;
		border-left: none;
	}

	.col-amt {
		text-align: left;
	}
	.col-top-left-1 {
		position: absolute;
		top: 1px;
		left: 1px;
	}
	.col-top-left-2 {
		position: absolute;
		top: 20px;
		left: 1px;
	}

	.col-top-right-1 {
		position: absolute;
		top: 10px;
		right: 1px;
	}
	.col-top-right-2 {
		position: absolute;
		top: 40px;
		right: 1px;
	}
	.page-box-wrap {
		padding: 10px 1px;
	}
	.mobile-full-width {
		width: 100%;
	}
	.category-modify {
		width: 100%;
	}
	.navigation-elements {
		display:none;
	}
	.navigation-elements.toggle {
		position: absolute;
        display: flex;
        flex-direction: column;
        top: 50px;
        width: 100%;
        background-color: var(--header-bg-color);
	}
	.pretable-total-wrap {
	    flex-direction: column;
	}
	.total-box-wrap {
		margin: 2px;
		width:100%;
		min-width: 100%;
	}
	.total-box-wrap.large {
		min-height:400px;
		height:100%;
	}
	.total-summary-wrap {
		margin: 2px;
		width:100%;
		min-width: 100%;
	}
	.table-filter-wrap {
	    display: flex;
	    width: 100%;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    justify-content: flex-start;
	}
	.filter-wrapper {
		width:100%;
	}

	/**
	 * Insights
	 */
	.total-box-split {
		flex-direction: column;
	}
	.total-box-left,
	.total-box-right {
		width: 100%;
	}

	/**
	 * Footer
	 */
	.footer-top-row {
	    flex-direction: column;
	    align-items: center;
	}
	.footer-middle-row {
	    flex-direction: column;
	    align-items: flex-start;
	    padding-left: 30px;
	}
	.column-links-wrap {
	    flex-direction: column;
	}
	/**
	 * Login box
	 */
	.login-box-wrapper {
		display: flex;
        justify-content: flex-end;
        right: -20px;
        min-width: 100vw;
        width: 100%;
        max-width: 500px;
	}
	.login-box {
		width: 100%;
	}
	.login-card {
		min-width: auto;
		max-width: 100%;
		width: 100%;
	}
}