/* VIEW Home */

.login-page-form {
  min-height: 100vh !important;
  background-image: url(../img/more-leaves-on-green.png);
}

.login-page-custom {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

@media screen and (max-width: 1280px) {
  #budgetImg {
    max-width: 40%;
    max-height: 40%;
  }
  #title > .header-title {
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 3px;
    display: block;
    padding-left: 1%;
  }
}

#title-login-page {
  font-family: Montserrat;
  color: rgb(247, 196, 42);
  text-align: center;
  padding: 1% 0;
  font-size: 2rem;
}

.login-page-form form {
  background-color: #ceedc7;
}

/* home-page */

#title {
  font-family: Montserrat;
  background-color: #205d67;
  color: antiquewhite;
  text-align: center;
  padding: 1% 0;
}

.header-title {
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: 3px;
  display: inline;
  padding-left: 1%;
}

#navigation-bar {
  background-color: #cffde1;
  font-family: Ubuntu;
}

.navbar-nav {
  margin: 1% auto;
}

.nav-item {
  padding: 0 30px;
}

.nav-icon {
  padding: 0 5px 0;
  color: rgb(242, 72, 151);
}

.home-page-wall {
  background-image: url("../img/more-leaves-on-green.png");
  text-align: center;
  padding: 10% 0%;
}

@media screen and (max-width: 1280px) {
  .home-page-wall {
    min-height: 68vh;
  }
}

.home-page-quote {
  padding: 0 2%;
  letter-spacing: 6px;
  font-weight: 400;
  font-size: 2.5rem;
  font-family: Montserrat;
}

/* footer */

footer {
  background-color: #fed049;
  text-align: center;
  height: 30px;
  position: static;
  bottom: 0;
  width: 100%;
}

/* expenses */

.header-section {
  text-align: center;
  font-family: Montserrat;
  font-weight: 400;
  font-size: 2.5rem;
  padding: 2% 0;
  background-color: antiquewhite;
  margin-bottom: 0;
  letter-spacing: 3px;
}

form {
  background-color: antiquewhite;
  margin: -16px 0;
  padding-bottom: 1%;
}

.form-group {
  background-color: #ceedc7;
  margin: 1% auto;
  width: 25%;
  text-align: left;
  padding: 1% 1%;
}

.form-group-modal {
  background-color: #ceedc7;
  margin: 1% auto;
  width: 75%;
  text-align: left;
  padding: 1% 1%;
}

.modal-content {
  background-color: antiquewhite;
}

@media screen and (max-width: 991px) {
  .form-group {
    width: 75%;
  }
}

.form-control {
  text-align: left;
}

.expenses-buttons {
  margin: 1% auto;
  width: 25%;
  padding: 1% 1%;
  text-align: center;
}

.input-container {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

.input-group-append {
  position: absolute;
  left: 93%;
}

.input-group-append-reset {
  position: absolute;
  left: 91%;
}

.eye-icon {
  cursor: pointer;
}

.icon {
  padding: 10px;
  background: dodgerblue;
  color: white;
  min-width: 50px;
  text-align: center;
  border-radius: 12%;
}

/* balance */

.cards-container {
  text-align: center;
  font-family: Montserrat;
  background-color: antiquewhite;
  display: flex;
  justify-content: space-around;
  align-items: baseline;
}

@media screen and (max-width: 1023px) {
  .cards-container {
    flex-direction: column;
    align-items: center;
  }
}

.balanceHeader {
  text-align: end;
}

.balanceList {
  font-size: small;
  text-align: start;
  list-style-type: none;
}

.incomeSumColor,
.limitRemainPlus {
  color: #3e7c17;
  font-weight: 600;
}

.incomeColor {
  color: rgb(30, 56, 30);
  font-weight: 600;
}

.expenseSumColor,
.limitRemainMinus {
  color: #dc3535;
  font-weight: 600;
}

.expenseColor {
  color: rgb(155, 35, 35);
  font-weight: 600;
}

.balanceColor,
.expenseLimit {
  color: #3c79f5;
  font-weight: 600;
}

.balanceColorPlus {
  color: #3e7c17;
}

.balanceColorMinus {
  color: #dc3535;
}

.card {
  background-color: #ceedc7;
  margin: 0 1%;
}

.header-incomes {
  color: #3e7c17;
  font-size: 2rem;
  letter-spacing: 3px;
}

.header-expenses {
  color: #dc3535;
  font-size: 2rem;
  letter-spacing: 3px;
}

.header-balance {
  color: #3c79f5;
  font-size: 2rem;
  letter-spacing: 3px;
}

.card-title {
  text-align: left;
}

.dropdown {
  text-align: right;
  padding: 1% 1% 0;
  background-color: antiquewhite;
}

/* Signup messages */

#successSignupMessage {
  font-family: Montserrat;
  background-color: rgb(240, 192, 72);
  border-radius: 10px 100px / 120px;
  padding: 2%;
}

#successSignupMessage > h1 {
  letter-spacing: 3px;
}

#successSignupMessage > p {
  letter-spacing: 2px;
  margin: auto;
}

#accessDeniedMessage {
  font-family: Montserrat;
  background-color: rgb(254, 133, 133);
  border-radius: 10px 100px / 120px;
  padding: 2%;
}

#accessDeniedMessage > h1 {
  letter-spacing: 3px;
  font-size: 2rem;
}

#accessDeniedMessage > p {
  letter-spacing: 2px;
  margin: auto;
}

/* Flash messages */

.alert {
  position: absolute;
  right: 25%;
  width: 50%;
  z-index: 1;
}
.alert-info {
  background-color: #d9edf7;
  justify-content: center;
  text-align: center;
}
.alert-success {
  background-color: #dff0d8;
  justify-content: center;
  text-align: center;
}
.alert-warning {
  background-color: #fbb7b7;
  color: black;
  text-align: center;
}

.btn-close {
  left: auto;
}

/* Reset password */

.reset-password {
  background-color: #ceedc7;
  margin: 1% auto;
  width: 25%;
  text-align: left;
  padding: 3%;
}

@media screen and (max-width: 991px) {
  .reset-password {
    width: 75%;
  }
}

.reset-password-fit {
  min-height: 100vh !important;
  background-color: antiquewhite;
}

/* Settings */

/* Flex */
.flex-container {
  display: flex;
  flex-direction: row;
}

.expense-limit-info {
  justify-content: flex-end;
}

#show-limit {
  display: none;
}

.expenseLimitSpend {
  font-weight: 600;
}