/* =================== Reset CSS================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}

.body_background{
	height: 100%;
    width: 100%;
    position: fixed;
    z-index: -3;
    top: 0px;
    background-image: url(/fynzee/shared/assets/login_wallpaper3.jpg);
    background-size: cover;
    background-repeat: repeat;
}

html{
	font-size: 13px;
}

body {
            font-family:Arial, Helvetica, sans-serif;


    }

    .module_box { /*Thick boarder around User & PAss input boxes*/
            border:#666666 solid 0.1em;
    }
	.LoginBox { /*Box Contains All login Form elements*/
		width:50%;
		max-width: 40rem;
		border-radius: 1rem;
		align: left;
		background-color: rgb(255,255,255,0.1);
		margin: auto;
		margin-top: 12rem;
	 }


	 #UserImage { /*Position User Icon*/
		padding-bottom: 2rem;
	 }
	 input,select,option { /*Style Input boxes and submit button*/
		 width: 100%;
  		 padding: 1rem 1rem;
  		 margin: 0.4rem 0;
  		 display: inline-block;
 		 border: 0px solid #ccc;
  		 border-radius: 0.4rem;
  		 box-sizing: border-box;
  		 font-size: 1rem;
  		     background-color: rgb(255,255,255,0.2);
  		     color:  white;
  		     height: 3.5rem;
	}

	h2 { /*Remove padding around h2 text*/
		padding-top: 1rem;
		margin: 0px;
		font-size: 1rem;
		color: white;

	}
	h1 {
		padding: 0px;
		margin: 0px;
		font-size: 10rem;
	}

	.submit:hover{
		background-color: #434343;
		color: white;
		cursor: pointer;
	}
	.LoginForm{
		padding: 1rem 2rem 1rem 2rem;
	}

		.glass_container {
			position: fixed;
    top: 0px;
    z-index: -2;
    width: 100%;
    height: 100%;
    background-color: #009eff12;
    backdrop-filter: blur(1.5rem);
		}

		/*Budget table*/
#Budget_Table {
	display: grid;
	grid-area: Budget_Table;
}

/*List all grid cells*/
.body_container{
	display: grid;
	grid-gap: 1rem;
	grid-template-areas:
	"Overview"
    "PieBox"
	"Category_Boxs"
	"Budget_Table"
	"Latest_Trans"
	"BudTBLPlan"
}
h1#nav_app_title {
    margin: 0px;
    text-align: left;
    /* background: -webkit-linear-gradient(left, #5b94ff, #72cbff, #a7efff); */
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    padding-bottom: 0.3rem;
    font-size: 2.3rem;
    width: 14rem;
    /* padding-left: 1.8rem; */
    color: #ffffff;
}

option {
    background-color: #000000db;
    color: white;

}

/* ==========================================================================
   v2: sign-in / sign-up / reset pages share the public website's look
   (same dark glow background, glass card, inputs and gradient button)
   ========================================================================== */
body {
	font-family: "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
	background: #040710;
	color: #c9d3da;
}
.body_background {
	background-image:
		radial-gradient(55% 45% at 85% 10%, rgba(39, 145, 195, 0.38), transparent 70%),
		radial-gradient(45% 40% at 5% 0%, rgba(76, 204, 222, 0.2), transparent 70%),
		radial-gradient(50% 40% at 50% 110%, rgba(110, 168, 255, 0.18), transparent 70%);
	background-color: #040710;
	background-size: auto;
	background-repeat: no-repeat;
}
.glass_container { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

.LoginBox {
	background: linear-gradient(160deg, rgba(20, 32, 48, 0.88), rgba(10, 16, 26, 0.92));
	border: 1px solid rgba(76, 204, 222, 0.18);
	border-radius: 1.25rem;
	box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45), 0 0 4rem rgba(39, 145, 195, 0.12);
	margin-top: clamp(2rem, 9vh, 7rem);
	margin-bottom: 2rem;
}
.LoginForm { padding: 1.5rem 2rem 1.75rem; }
#login_logo_img { width: 9rem; height: auto; }

h2, .input_tag { font-size: 0.95rem; font-weight: 600; color: #c9d3da; padding-top: 1rem; letter-spacing: 0.01em; }

input, select, textarea {
	height: 3.1rem;
	padding-top: 0;      /* fixed height: vertical padding squashed the text on phones */
	padding-bottom: 0;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 0.65rem;
	background-color: rgba(255, 255, 255, 0.06);
	color: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: #4cccde;
	box-shadow: 0 0 0 3px rgba(76, 204, 222, 0.25);
	background-color: rgba(255, 255, 255, 0.09);
}
input[type="checkbox"] { height: auto; accent-color: #4cccde; }

/* the main action button (an <input class="submit"> on these pages) */
.submit, input.submit, button.submit {
	height: 3.1rem;
	margin-top: 1.5rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #4cccde, #2791c3);
	color: #04222a;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 0.5rem 1.5rem rgba(76, 204, 222, 0.25);
	transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.submit:hover:not(:disabled), input.submit:hover:not(:disabled) {
	background: linear-gradient(135deg, #4cccde, #2791c3);
	color: #04222a;
	filter: brightness(1.1);
	transform: translateY(-2px);
	box-shadow: 0 0.75rem 2rem rgba(76, 204, 222, 0.4);
}
.submit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.submit:disabled { background: #3a4650; color: #8fa0ab; box-shadow: none; cursor: not-allowed; filter: none; transform: none; }

a { color: #4cccde; }
a:hover { color: #8ae4f0; }