body {
  font-family: 'IBM Plex Sans', sans-serif;
}

.website-title {
  color: #49906D !important;
  text-align: left;
  text-decoration: none;
  font-size: 24px;
  line-height: 24px;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #DDE1E6;
  color: #21272A;
}

.dropdown-item {
  border-bottom: 1px solid #e0e0e0;
  padding: 1rem;
  min-width: 16rem;
}

@media (max-width: 991.98px) {
  .website-title {
    text-align: center !important;
    font-size: 24px;
    line-height: 20px;
    width: 100%;
  }
}

a {
  color: rgba(44, 94, 101, 1);
  text-decoration: underline;
}


li {
  font-size: 16px !important;
}

.page-link {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: #2c5e65;
  text-decoration: none;
  background-color: var(--bs-pagination-bg);
  border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.active>.page-link,
.page-link.active {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: #2c5e65;
  border-color: #2c5e65;
}

.page-link:hover {
  z-index: 2;
  color: #2c5e65;
  background-color: var(--bs-pagination-hover-bg);
  border-color: var(--bs-pagination-hover-border-color);
}


.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 800px;
}


.date {
  font-weight: 500;
  color: #6c757d;
}

.custum-dropdown-menu {
  --bs-dropdown-min-width: 100% !important;
  --bs-dropdown-padding-x: 1rem !important;
  font-weight: bold;
  background-color: #ffffff;
  border: 0.5px solid #c6cad0;
  border-width: 2px;
}

.user-icon {
  width: 50px;
  height: 50px;
  border: 2px solid #DDE1E6;
  background-color: #f8f9fa;
}

.bg-baby-blue {
  background-color: #F2F4F8;
}


.sidebar {
  background-color: #ffffff;
  padding-top: 20px;
  min-height: 90vh;
  border-top-right-radius: 12px;
}

.form-control {
  border: var(--bs-border-width) solid #878D96;
}

.btn-search-custom {
  --bs-btn-color: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6c757d;
  --bs-btn-hover-border-color: #6c757d;
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6c757d;
  --bs-btn-active-border-color: #6c757d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #6c757d;
  --bs-gradient: none;
}

.btn-search-custom i {
  color: #415046;
}

.btn-search-custom:hover {
  color: rgb(255, 255, 255);
  background-color: #ececec;
  border-color: var(--bs-btn-hover-border-color);
}

.p-2 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.text-bg-pending {
  color: #946F00 !important;
  background-color: #FFF7D6 !important;
}

.text-bg-excuted {
  color: #087990 !important;
  background-color: #9EEAF9 !important;
}

.text-bg-escalated {
  color: #984C0C !important;
  background-color: #FECBA1 !important;
}

.text-bg-pending {
  color: #946F00 !important;
  background-color: #FFF7D6 !important;
}

.text-bg-new {
  color: #1F845A !important;
  background-color: #DCFFF1 !important;
}

.bg-green {
  background-color: #F0FFF4 !important;
}

.v-align {
  padding-top: 24px;
  padding-bottom: 24px;
  vertical-align: middle;
}


.hero {
  /* Radial gradient background to match JS animation */
  background: radial-gradient(circle at 30% 40%, #76b6b9b3 0%, #2C5E65 100%);
  color: white;
  padding: 4rem 3rem;
  box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
  border-radius: 0.75rem;
  margin-bottom: 2rem;
}

.card {
  border-radius: 1rem;
  transition: transform 0.2s;
}

.lite-shadow {
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
}
.container {
  max-width: 1550px !important;
  margin: 0 auto;
  padding: 0 15px;
}


.icon-wrapper {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.3rem; /* rounded corners */
  font-size: 1.5rem; /* icon size */
}


/* Background colors */
.student-bg {
  background-color: #D4F5E9;
  color: #00A992;
}

.reporter-bg {
  background-color: #9EEAF9;
  color: #fff;
}

/* Add more classes for each role */
.chairman-bg {
  background-color: #C5B3E6;
  color: #fff;
}

.student-affairs-bg {
  background-color: #9EC5FE;
  color: #fff;
}

.coordinator-bg {
  background-color: #FCD4DF;
  color: #C92A5D;
}

.college-committee-bg {
  background-color: #FFF0B3;
  color: #B38000;
}

.appeal-committee-bg {
  background-color: #FECBA1;
  color: #fff;
}

.disciplinary-bg {
  background-color: #FFD6D6;
  color: #CC0000;
}

.university-president-bg {
  background-color: #D4EAE6;
  color: #1A6D5A;
}

.vp-bg {
  background-color: #E6F3EC;
  color: #2B8A5F;
}
/* end of user icons */

/* Card hover effect, exclude .no-hover */
.card:hover:not(.no-hover), .card.selected:not(.no-hover) {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 8px 32px rgba(44, 94, 101, 0.15);
  border: 2px solid #49906D;
  cursor: pointer;
}

/* Icon animation on hover */
.card:hover:not(.no-hover) .icon-wrapper {
  box-shadow: 0 0 0 4px #49906D22;
  transition: box-shadow 0.2s;
}

/* Selected card style */
.card.selected {
  background-color: #F0FFF4;
  border-color: #2C5E65;
}

/* Card active (click) effect */
.card.active {

  border-color: #49906D;
  background-color: #DDE1E6;
  transition: box-shadow 0.2s, background 0.1s;
}

.notification-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 1334px;
  background: #DFF6E7;
  color: #13795B;
  text-align: start;
  padding: 1rem;
  margin: 1rem auto;
  font-weight: 500;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(44,94,101,0.08);
  transition: top 0.3s;
  border-radius: 6px;
}

@media (min-width: 768px) {
  .honor-generate-btn {
    width: auto !important;
    display: inline-block;
  }
}
.bg-beige{
  background-color: #F8F5EE;
}
.honor-letter-card {
  cursor: pointer;
}