@media only screen and (max-width: 2200px) and (min-width: 1600px)  {
	.card h3 {
			font-size:1.1em;
	}
	
}

@media (max-width: 1024px), 
       (min-resolution: 192dpi) and (max-width: 1024px), 
       (min-resolution: 2dppx) and (max-width: 1024px) {
		   
	   
body {
	font: 90% helvetica,'Open Sans', Tahoma, "lucida grande", "lucida sans unicode",  arial, sans-serif; 
}

#content_wrap {
	width:100%;
	margin-top:1em;
	box-shadow: none; 
}

#container {
	position:relative;
	width:100%;
}
/*
.menuLog {
	display:none; 
}
*/
h1.subheading {
	font-size: 1.5em;
	background-size:40px 40px;
	background-position:top 20px left;
}


#section_txt {
	width:100%;
}

.expand65 {flex:0 0 65%;} .expand40 {flex:0 0 40%;}

.makeColumn {
	 flex-direction: column !important; 
}

.m-noBG-color{
	background-color:#FFF;
}

.m-noBorder {
	border:none !important;
}

.m-displayNone {
	display:none;
}

.responsive-text::after {
	content: attr(data-short);
}

.loginBackground {
/*	all: unset; */	
}

/* MENU: =
------------------------------*/
div#LogSession span a i {
	margin-top:2px;
}

#menu-button {
	margin-top:2px;
}


/* IMAGE-GALLERY: =
------------------------------*/
li.GalImgThumb {
	flex: 1 1 100%; /* On mobile, each <li> will take up the full width */
	max-width: 100%;
}

/* CALCULATORS: =
------------------------------*/
.calculatorForms {
	width:90%; 
}

#section_txt div.datePickerSpacer {
	display:none;
}

#section_txt select, #section_txt textarea, #section_txt input, #section_txt label, #section_txt input.datepicker, #section_txt input.powerUseDatepicker {
	width:90% !important;
	float:none !important;
	text-align:left;
	box-sizing:content-box;
	padding:0.8em 1.0em 0.8em 1.0em;
	margin-left:auto;
	margin-right:auto;
}

#section_txt label {
	padding:0em 0.8em 0 0;
	margin:0;
	display:block;
	float:left;
}

fieldset#checkboxes {
	margin-left:0%;
}

.checkbox-spaceLabel {
	display:none;
}

.calculatortable .intCalLabel {
	font-size:1.1em;
	text-align:left; 
	margin:1em 0 0 0 !important;
	padding-left:0;
}

.boxContent{    
	width: 100%;
	height:100%;
	margin:50px auto 42px auto;
	position:relative;
	background:none;
}

div#input-values > * {
	float:none;
	width:100%;
}

.calculatortable input.button, #section_txt input[type=submit] {
	width:90%;
}

.taxbracket, .showTaxBracket, .expectedTaxResults {
	width:100% !important;
}

div.finYr-leftcell, div.finYr-rightcell {
	margin-right:2px;
	margin-left:0;
}

div.finYr-rightcell input {
	padding:6px;
	margin-left:0;
}

/*  DASHBOARD PAGE: 
------------------------------*/
#colI, #colII {
	width:96%;
	float:none;
	margin:0px auto;
	padding:0;
}

.rowIcolA, .rowIcolB,.rowIIcolA, .rowIIcolB {
	width:100%; 
	float:none;
	margin:0;
	padding:0;
}

.weekly, .monthly {
	width:100%; 
	float:none; 
	margin: 20px 0 0 0;
	padding:10px;
}

.chart-wrapper1, .overallExpense, .InterestCalc, .YTDIncome, .YTDSavings, .Orders, .Upcoming, .HouseholdTotal  {
	margin: 20px 0 0 0;
	padding:10px;
}

#homeDash {
	width:100%;
}

.mainFrame {
	width:100%;
}

.rowI, .rowII, .rowIII, .rowIV {
	margin:0;
	padding:0;
}

.rowI .clear, .rowII .clear, .rowIII .clear, .rowIV .clear {
	line-height:0;
}

.InterestCalc {
	display:none;
}

.card-group { /* background */
	border-radius: 12px;
	width: 98%;
	max-width:329px;
	margin: 20px auto 0 auto;
	padding:0px 0;
	box-shadow: 7px -2px 15px -5px rgba(0,0,0,0.49);
}

.card { /* card content */
	height: 198px;
	width: 100%;
	max-width:330px;
	margin:0px auto;
	overflow: hidden;
}

a.background_circle {
	width: 16px;
	height: 16px;
	line-height: 16px;
	padding:3px;
}

.weekly p, .monthly p {
	 margin-top:-10px; 
	 color:#D2EDFF; 
	 font-size:0.6em;
}

/*  LOGIN FORM: 
------------------------------*/
#login, h1.ribbon, fieldset#inputs, 
fieldset#actions, fieldset#inputs input, 
fieldset#actions input#submit, fieldset#inputs:before, 
fieldset#inputs input:focus, 
#login:before, #login:after {
	all:revert;
}

/* FORM TYPOGRAPHY*/

.loginForm-container {
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	background: #fff;
	padding: 30px 15px;
	width: 90%;
/*	-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.3);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.3); */
	text-align: center;
	margin:0 auto;
}

form#login {
	margin: 0px auto;
	padding: 40px 10px;
	max-width: 420px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
	background:#f4f7f8;
  }

#login h1.ribbon {
	display:none;
}

fieldset#actions input#submit  {
	background-color: #a0b3b0;
	border: none;
	color: white;
	width: 85%;
	padding: 15px 25px;
	text-decoration: none;
	display: inline-block;
	text-transform: uppercase;
	font-size: 1.2em;
	font-weight:500;
	cursor: pointer;
	border-radius: 4px;
	margin: 5px auto 40px auto;
	transition: all 0.3s ease-in-out;
}

fieldset#actions input#submit:hover  {
	background-color: #8AA29E;
}
fieldset#inputs input#username,
fieldset#inputs input#password {
	background-color: #ECF0F1;
	color: #696969;
	padding: 10px 25px;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 5px auto 10px auto;
	width: 85%;
	border-radius:5px;
	border:1px solid #ddd;
  	transition: all 0.5s ease-in-out;
}

fieldset#inputs input#username:focus,
fieldset#inputs input#password:focus{
	border:none;
	outline: none;
	background-color: #fff;
	border-bottom: 2px solid #5fbae9;
}

fieldset#inputs input#username:placeholder, fieldset#inputs input#password:placeholder {
	color: #cccccc;
}
#login *:focus {
	outline: none;
}

input.zero-radius {
	-webkit-border-radius: 0px;
	border-radius: 0px;
}

#login fieldset {
	border:none;
}

/* CHARTS: =fusion charts
------------------------------*/

#pie-container, #chart-container, #barchart-container, #power_pie-container  {
	flex: 0 0 98%; /* Makes them stack on top of each other */
	margin-left: 1%;  /* Remove left margin for a clean stack */
	margin-right: 1%; /* Remove right margin for a clean stack */
	max-width: 98%; /* Ensure it doesn't exceed the intended size */
}
	
.chart-item.half-width {
	width: 100%;
	flex: 0 0 100%;
}

}


/* Make changes to cssmenu when width is less than 1900px */

@media (max-width: 1900px), 
       (min-resolution: 192dpi) and (max-width: 1900px), 
       (min-resolution: 2dppx) and (max-width: 1900px) {


.menuLog {
	display:none;
}

/* MENU: =
------------------------------*/
#LogoMenu {
	display: flex;
	justify-content: flex-start;  /* Aligns everything to the left */
	align-items: flex-start;      /* Vertically centers items */
	width: 100%;                  /* Ensure full width */
	background-color: #fff;       /* Background color */
}

#Logo {
	background-repeat:no-repeat;
	background-position:top 7px left 2px;
	background-size:30px 30px;
	flex-basis: auto;              /* Default width */
	gap:0px;
}

#Logo h1 {
	padding-left:40px;
}

#menu-button {
    display: flex;               /* Use Flexbox for alignment */
    justify-content: center;     /* Center horizontally */
    align-items: center;         /* Center vertically */
	width:40px;
	height:30px;
	text-decoration: none;
	font-size: 1.6em;
	font-weight: normal;
	color: #000;
	cursor: pointer;
	margin-top:8px;
}

#menu-button i {
    transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth opacity and rotation */
    display: block; /* Necessary for transform effects */
}

#menu-button i.fa-xmark {
    transform: rotate(90deg); /* Optional rotation for a nice effect */
}

#cssmenu.hidden {
  left: -100%; /* Off-screen */
  opacity: 0; /* Invisible */
}

/* Shown state */
#cssmenu.visible {
  left: 0; /* Fully visible */
  opacity: 1;
  animation: fadeInAnimation 0.8s ease-in-out;; /* Apply fade-in animation */
}

#cssmenu {
	order: 1;                     /* Keep it first */
    position: fixed;
	flex:10;
	max-width:300px;
    top: 45px;
    left: -300px; /* Menu off-screen */
    width: 300px;
    height: 100%;
    background: #FFF;
    z-index: 1000;
    transition: left 0.8s ease,opacity 0.6s ease;
	box-shadow: 6px 1px 10px -7px rgba(0,0,0,0.34);
	opacity: 1; /* Fully visible by default */
}

#cssmenu.hidden {
  opacity: 0; /* Fading out */
}

#cssmenu > ul {
    max-height: 90vh;
    overflow: auto;  /* Allow scrolling if content is long */

	}
#cssmenu > ul.open {
	display: block;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	background:#FFF;
	max-height:90vh;
	overflow:auto;
	animation: fadeInAnimation 0.8s ease-in-out;
}

#cssmenu ul li.logout {
	display:block;
}

#cssmenu.align-right > ul {
	float: none;
}

#cssmenu.align-center > ul {
	text-align: left;
}

#cssmenu > ul > li,
#cssmenu.align-right > ul > li {
	float: none;
	display: block;
	position:relative;
	
	border-bottom:1px solid #E5E5E5;
}

#cssmenu > ul > li > a {
	padding: 18px 25px 18px 25px;
	border-right: 0;
	background-color:#FFF;
	color:#000;
}

#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
	/*background: rgba(104, 146, 174, 0.5); */
	background: #EDF0F3;
}

#cssmenu ul ul,
#cssmenu ul li:hover > ul,
#cssmenu > ul > li > ul,
#cssmenu ul ul ul,
#cssmenu ul ul li:hover > ul,
#cssmenu.align-right ul ul,
#cssmenu.align-right ul li:hover > ul,
#cssmenu.align-right > ul > li > ul,
#cssmenu.align-right ul ul ul,
#cssmenu.align-right ul ul li:hover > ul {
	left: 0;
	right: auto;
	top: auto;
	opacity: 1;
	width: 100%;
	padding: 0;
	position: relative;
	text-align: left;
}

#cssmenu ul ul li {
	width: 100%;
}

#cssmenu ul ul li a {
	width: 100%;
	box-shadow: none;
	padding-left: 25px;
}

#cssmenu ul ul li a:hover, #cssmenu ul ul li a:active {
	background: #F5F5F5;
}

#cssmenu ul ul ul li a {
	padding-left: 45px;
}

#cssmenu ul ul li:first-child > a,
#cssmenu ul ul li:last-child > a {
	border-radius: 0;
}

#cssmenu > ul > li.has-sub > a::after,
#cssmenu ul ul li.has-sub > a::after {
	display: none;
}

}