/* .card-navy {
    background-color: #2167adfb;
} */

.modal-navy {
    background-color: #0f1e3dfb;
}

.card-green {
    background-color: #206d85f6;
}

.card-lavender {
  background-color: #8a70cff6;
}

.modal-olive {
    background-color: #3d9970;
}

.modal-green {
    background-color: #1e6650fb;
}

.close-button {
    color: white;
    /* Set the color to white */
}

.modal-body-bg {
    background-color: #e9ece9;
}

/*Card Design*/
:root {
    --main-color: #363636fb;
}

.cardTitle {
    color: var(--main-color);
    padding: 10px 0 0;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.cardTitle:before {
    content: "";
    border-radius: 15px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 35px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    border: 2px solid var(--main-color);
}

.cardTitle .heading {
    background: #fff;
    font-size: 18px;
    font-weight: bold;
    line-height: 45px;
    padding: 0 5px;
    margin: 0 auto 25px;
}

/*Dashboard Cards*/

/* Update the .small-box class to use flex */
.small-box {
    border-radius: 0.25rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem !important;
    height: 100%; /* Adjust this value as needed */
  }

  /* Apply min-height to the .inner element */
  .small-box > .inner {
    padding: 10px;
    flex-grow: 1;
    /*min-height: 160px !important;  Adjust this value as needed */
    /*height: 100% !important;  Adjust this value as needed */
  }

  .small-box > .small-box-footer {
    position: relative;
    z-index: 10;
    display: block;
    padding: 3px 0;
    color: rgb(13, 33, 77); /* Darker text color */
    text-align: center;
    text-decoration: none;
    /*background-color: rgba(255, 204, 153, 0.5);  Lighter orange background with transparency */
    transition: background-color 0.3s ease; /* Add smooth transition for background color change */
  }

  .small-box > .small-box-footer:hover {
    color: #fff; /* White text color on hover */
    background-color: rgba(
      0,
      0,
      0,
      0.3
    ); /* Darker semi-transparent background on hover */
  }

  .small-box h3,
  .small-box .h3 {
    font-size: calc(1rem + 0.5vw); /* Adjusted font size */
    padding: 0;
    margin: 0 0 5px; /* Reduced margin for tighter spacing */
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden; /* Prevent text overflow */
    text-overflow: ellipsis; /* Add ellipsis (...) for truncated text */
  }
  .light-green-bg {
    background-color: #596785; /* Light green color */
  }
  .text-green {
    color: #f7f8fa; /* Dark green color #055724*/
  }
  .text-white {
    color: #f7f8fa; /* Dark green color #055724*/
  }

  .small-box p {
    font-size: 1rem;
  }
  .small-box p > small,
  .small-box p > .small {
    display: block;
    margin-top: 5px;
    font-size: 0.9rem;
    color: #f8f9fa;
  }
  .small-box h3,
  .small-box .h3,
  .small-box p {
    z-index: 5;
  }
  .small-box:hover {
    text-decoration: none;
  }