/* ----------------------------------------------------------------------------*/
/* General Page Setup Settings                                                 */
/*-----------------------------------------------------------------------------*/
/* default logo color: #4db8ad; */
/* Members Sidebar/Cards icon colors */
/* All members color: #4db8ad */
/* Pending members color: #adb5bd */
/* Active members color: #4CAF50 */
/* Inactive members color: #FFA726 */
/* Suspended members color: #EF5350 */

/* Gender Chart colors */
/* Male color: #36a2ebb3 */
/* Female color: #ff6384b3 */

/* Group Chart colors */
/* loans color: #2196F3 */
/* Balances color: #FFA726 */

/* Loan icons colors */
/* All loans color: #4db8ad */
/* Pendind loans color: #adb5bd */
/* Active loans color: #0d6efd */
/* Completed loans color: #4db8ad */
/* Defaulted loans color: #dc3545 */

/* Loan Chart colors */
/* Disturbised color: #4CAF50 */
/* Completed Loans color: #2196F3 */
/* Outstanding Loans color: #FFA726 */
/* Interest Earned color: #66BB6A */
/* Total Interest color: #81C784 */
/* Penalties color: #EF5350 */
/* Processing Fees color: #7E57C2 */
/* Total Repayments color: #26A69A */

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Tahoma, sans-serif !important;
  /* display: flex; */
  /* min-height: 100vh; */
}

.loginbg {
  background-color: #4db8ad;
}

.loginitem{
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/*-----------General Page Settings Ends Here--------------------------------- */



/* Members sidebar/cards icon Styling */
.allmemicon {
  color: #4db8ad;
}
.pendingmemicon {
  color: #adb5bd;
}
.activememicon {
  color: #4CAF50;
}
.inactivememicon {
  color: #FFA726;
}
.suspendedmemicon {
  color: #EF5350;
}
/* End of Members Cards Styling */


/* Loans sidebar icon Styling */
.allloanicon {
  color: #4db8ad;
}
.pendingloanicon {
  color: #adb5bd
}
.activeloanicon {
  color: #0d6efd
}
.completedloanicon {
  color: #4db8ad;
}
.defaultedloanicon {
  color: #dc3545
}
/* End of Loan sidebar icons Styling */



/* ------------Sidebar styling-------------- */
/* Sidebar Styles */
.sidebar {
  position: fixed;
  /* top: 0; */
  /* left: 0; */
  overflow-y: auto;
  z-index: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 20%;
  min-width: 20%;
  background-color: #EAEAEA;
}

.logo {
  margin-top: 20px;
  margin-bottom: 20px;
}

.sidebar a {
  padding: 15px;
  padding-left: 30px;
  color:#000;
  font-size: 18px;
}

.sidebar a:hover {
  background-color: #4db8ad;
  color: #fff;
  transition: background 0.3s;

  /* members sidebar icons */
  .allmemicon {
    color: #fff;
  }
  .pendingmemicon {
    color: #fff;
  }
  .activememicon {
    color: #fff;
  }
  .inactivememicon {
    color: #fff;
  }
  .suspendedmemicon {
    color: #fff;
  }

  /* loan sidebar icons */
  .allloanicon {
    color: #fff;
  }
  .pendingloanicon {
    color: #fff
  }
  .activeloanicon {
    color: #fff
  }
  .completedloanicon {
    color: #fff;
  }
  .defaultedloanicon {
    color: #fff
  }
}

.sidebar a.active {
  background-color: #4db8ad;
  color:#fff;

  /* members sidebar icons */
  .allmemicon {
    color: #fff;
  }
  .pendingmemicon {
    color: #fff;
  }
  .activememicon {
    color: #fff;
  }
  .inactivememicon {
    color: #fff;
  }
  .suspendedmemicon {
    color: #fff;
  }

  /* loan sidebar icons */
  .allloanicon {
    color: #fff;
  }
  .pendingloanicon {
    color: #fff
  }
  .activeloanicon {
    color: #fff
  }
  .completedloanicon {
    color: #fff;
  }
  .defaultedloanicon {
    color: #fff
  }
}

.sidebar i {
  margin-right: 10px;
}

/* Main Body Content */
.main-content {
  margin-left: 20%;
  width: calc(100% - 20%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #EAEAEA;
}
/* ------------End of sidebar styling------- */



/* Cards Styling */
.cardtitle {
  color: #4DB8AD;
}
.cardicon {
  color: #4DB8AD;
  align-items: center;
}
.dashcard {
  transition: transform 0.3s;
  cursor: pointer;
}
/* End of Cards Styling */



/* Group Cards Styling */
.grouploan {
  color: #2196F3;
}
.groupbalance {
  color: #FFA726;
}
/* End of Group Cards Styling */



/* Loan Cards Styling */
.disturbisedicon {
  color: #4CAF50;
}
.completedicon {
  color: #2196F3;
}
.outstandingicon {
  color: #FFA726;
}
.interesticon {
  color: #66BB6A;
}
.totalinteresticon {
  color: #81C784;
}
.penaltiesicon {
  color: #EF5350;
}
.processingfeesicon {
  color: #7E57C2
}
.totalrepaymentsicon {
  color: #26A69A
}
/* End of Loan Cards Styling */



/* Cards Hovering Styling */
.dashcard:hover {
  background-color:#4DB8AD;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  transition: all 0.2s ease-in-out;
  color: #ffffff;

  .cardtitle {
    color: #fff;
  }
  .cardicon {
    color: #fff;
  }
  /* members cards */
  .pendingmemicon {
    color: #fff;
  }
  .activememicon {
    color: #fff;
  }
  .inactivememicon {
    color: #fff;
  }
  /* group cards */
  .suspendedmemicon {
    color: #fff;
  }
  .grouploan {
    color: #fff;
  }
  .groupbalance {
    color: #fff;
  }
  /* loan cards */
  .disturbisedicon {
    color: #fff;
  }
  .completedicon {
    color: #fff;
  }
  .outstandingicon {
    color: #fff;
  }
  .interesticon {
    color: #fff;
  }
  .totalinteresticon {
    color: #fff;
  }
  .penaltiesicon {
    color: #fff;
  }
  .processingfeesicon {
    color: #fff
  }
  .totalrepaymentsicon {
    color: #fff
  }
}

/* Chart Styling */

.chart-container {
  font-family: Arial, sans-serif;
  max-width: 680px;
  margin: 20px auto;
  padding: 20px;
  text-align: center;
}
/* .chart-wrapper {
  position: relative;
  height: 400px;
  width: 400px;
  margin: 0 auto;
}
.stats-summary {
  margin-top: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}
.total-amount {
  font-size: 24px;
  font-weight: bold;
  color: #2196F3;
  margin-top: 10px;
} */
/* End of Chart Styling */

.clickable-row {
  cursor: pointer;
}
/* End of Cards Hovering Styling */



/* Loading spinner */
.loading-spinner {
  display: none;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  border-top: 3px solid transparent;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading .loading-spinner {
  display: inline-block;
}
/* End of Loading spinner */


/* Media Queries */
@media screen and (max-width: 768px) {

  .main-content {
    margin-left: 0; /* Remove left margin */
    width: 100%; /* Full width */
  }
}
/* End of Media Queries */