body{
  margin-top: 10px;
  padding: 0;
	border: none;
	font-family: MV Boli;
	background-color: #000;
}

#container {
    display: flex;
  }
p{
	font-family: MV Boli;
}

h{
	font-family: MV Boli;
  font-weight: bold;
  font-size: large;
  
}
.header-R{
	font-family: MV Boli;
	font-size: 3rem;
	text-align: center;
}
#main{
    display: 3;
    margin: 0 auto;
    max-width: 800px;
    padding: 8px;
}
#sigin{
    display: 1;
    margin: 0 auto;
    max-width: 800px;
    padding: 8px;
}
#about{
    display: flex;
    margin: 0 auto;
    max-width: 800px;
    padding: 8px;
}
#more-about{
    display: flex;
    margin: 0 auto;
    max-width: 800px;
    padding: 8px;
}

#p1{
    display: 1;
	text-align: center;

}
#p2{
    display: 1;
    margin-left: 30px;
	text-align: center;
}

#p3{
    display: 1;
    margin-left: 30px;
	text-align: center;

}
.heading{
    font-family: MV Boli;
    font-weight: bold;
	  font-size: 1.5rem;
	  margin-bottom: 5px;
    text-align: center;
    padding-top: 10px;
}

label{
  font-family: MV Boli;
	font-size: 1rem;
	margin-bottom: 5px;
}

#pm{
    font-family: MV Boli;
	font-size: 1.25rem;
}

.form-row {
  display: flex;
  align-items: center;            /* vertically center label + input */
  gap: 12px;
  margin: 10px 0;
}

.header-tittle--blue{
	color:rgb(46, 46, 124)
}

.header-tittle--green{
	color:#307030
}

.header-tittle--black{
	color: #000;
}

.gradient-custom {
/* fallback for old browsers */
background: #6a11cb;

/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1))
}

#month_input{
	display: none;
}

#new_bank_add{
	display: none;
}


 /* login styling page  */
.bg-image-vertical {
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background-position: right center;
background-size: auto 100%;
}

@media (min-width: 1025px) {
.h-custom-2 {
height: 100%;
}
}


.backgroundimage{
	background-image: url('/media/backgroundyardformain.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat; 
	min-height: 100vh;
  margin: 0;
}


.sidenav{
	height: 95%;
	width: 160px;
	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
	z-index: 1; /* Stay on top */
	left: 0;
	background-color: #edf2ee;
	overflow-x: hidden;	/* Disable horizontal scroll */
}

 .content{
	margin-left: 165px;
  }

#line{
	width:80%; 
	margin-left: 10px; 
	margin-top: 0; 
	margin-bottom: 0;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 15px;
  color: black;
  display: block;
}

#logout-btn{
	z-index: 1; /* Stay on top */
	bottom: 20px;
	width: 160px;
	overflow-x: hidden;	/* Disable horizontal scroll */
}


#line-content {
  	padding-bottom: 10px; 
  	padding-top: 10px;
  	width: 160px;
}


a.btn-toggle {
  color: var(--bs-body-color);
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  padding-left:0.75rem;
  padding-bottom: 0;
}

a.btn-toggle:hover {
  color: #4c9cd9;
}
  

.tite-all{
  font-family: MV Boli;
	font-size: 3rem;
}


.hr-with-text {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.hr-with-text::before,
.hr-with-text::after {
    content: "";
    flex: 1;
    border-top: 1px solid #999; /* dotted line */
    margin: 0 10px;               /* space around text */
}

#hr-style{
  font-family: MV Boli;
  font-size: 0.75rem;
  color: #999;
}
.ag-panel-title-bar {
    height: 50px;
}

.container-monthly-view{
  display: flex;
}

.container-monthly-view div{
  height: 500px;
  width: 500px;
}

#account_balance_date{
  display: none;
}

#account_number{
  display: none;
}
#account_number_l{
  display: none;
}

      

/* decorative top cap */
.loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 130px;
  background: #eee;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  overflow: hidden;
  z-index: 1000; /* make sure it's on top */
}


/* The top red cap */
.loader::before {
  content: '';
  position: absolute;
  width: 54px;
  height: 25px;
  left: 50%;
  top: 0;
  transform: translate(-50%, -65%);
  background-image:
    radial-gradient(ellipse at center, transparent 24%, #de3500 25%, #de3500 64%, transparent 65%),
    linear-gradient(to bottom, transparent 34%, #de3500 35%);
  background-size: 12px 12px, 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
  box-shadow: 0 -3px rgba(0, 0, 0, 0.25) inset;
  z-index: 2;
}

/* The animated orange fill */
.loader::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  width: 66%;
  height: 0%; /* Start empty */
  background: linear-gradient(to bottom, #f79577 30%, transparent 31%);
  background-size: 100% 16px;
  z-index: 3;
  animation: writeDown 2s ease-out infinite;
}

/* Animation for fill-down effect */
@keyframes writeDown {
  0%   { height: 0%;  opacity: 0; }
  20%  { height: 0%;  opacity: 1; }
  80%  { height: 65%; opacity: 1; }
  100% { height: 65%; opacity: 0; }
}
      
.main-content {
  display: none;
}




.card-container{
    padding: 16px 16px;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  background-color: #ebf7f3;
}

.amount{
  text-align: center;
  font-size: xx-large;
}



.date{
  text-align: right;
  font-size: 1.5rem;
}

.user{
  text-align: center;
  font-size: 1.5rem;
}


.container{
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

.card-category {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;
}

/* On mouse-over, add a deeper shadow */
.card-category:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.card-table {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;
}

#reloadpage {
  cursor: pointer;
  padding: 5px;
  font-size: 18px;
}

.card-trans-1 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}
.card-trans-2 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}

.alert{
  display: none;
}


.card-target-1 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}
.card-target-2 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}
.card-keyword-1 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}
.card-keyword-2 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}

.card-bank-1 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}
.card-bank-2 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}
.card-trans {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;
  height: 1150px;

}

.card-account-1 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}
.card-account-2 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}
.card-st-1 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}
.card-st-2 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}

.card-income-1 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}
.card-income-2 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}

.card-sg-1 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}
.card-sg-2 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}

.card-tv-1 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}
.card-tv-2 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}

.card-av-1 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}
.card-mv-1 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;
}

.card-av-all {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}

.card-mv-2 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;
  align-content: center;
}
.card-profile {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;
  align-content: center;

}

.card-reset-password{
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 10px 10px 20px 16px;
  margin: 20px 20px 20px 20px;
  position: relative;
  align-content: center;

}
.card-reset-password-page{
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 10px 10px 20px 16px;
  margin: 20px 20px 20px 20px;
  position: relative;
  align-content: center;

}
.family-invitation{
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 10px 10px 20px 16px;
  margin: 20px 20px 20px 20px;
  position: relative;
  align-content: top;

}

.card-tv-3 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 20px 16px;
  position: relative;

}

.card-heading {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 10px 10px 10px 20px;
  margin: 20px 10px 20px 20px;
  position: relative;
  height: 60px;

}


.card-saving{
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 10px 10px 10px 20px;
  margin-top: 20px;
  margin-right: 10px;
  position: relative;
  align-content: center;

}
.card-saving-3{
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 10px 10px 10px 20px;
  margin-top: 20px;
  margin-right: 10px;
  position: relative;
  height: 100px;
  align-content: center;
  height: 340px;
}