* {
  box-sizing: border-box;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  background: #ffffff;
  color: #1a1a1a;
}

/* HEADER */
.profile-header {
 background:
    url("images/header-bg-element.png") no-repeat center center,
    linear-gradient(to right, #001E50, #003A7F, #0078BF);
  background-size: cover;
  background-blend-mode: screen;
  color: #fff;
  padding: 25px 0;
}

.header-inner {
  width: 1200px;
  max-width: 95%;
  margin: auto;
}

.profile-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatar {
  width: 120px;
  height: 120px;
  border: 3px solid #fff;
}

.profile-info h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 500px;
}

.profile-info p {
  margin: 6px 0 0;
  font-size: 16px;
}

.info-details {
  display: flex;
  align-items: center;
}

.info-details img {
  width: 16px;
  height: 16px;
  margin-top: 5px;
  margin-right: 6px;
}

.info-details p {
  color: #ffffff;
}

/* TABS */
.profile-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.profile-tabs a {
  padding: 8px 21px;
  border: 1px solid #486893;
  color: #fff;
  background: #1A4177;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.profile-tabs a.active,
.profile-tabs a:hover {
  background: #0078BF;
  border: 1px solid #4DA0D2;
}

/* MAIN CONTAINERS */
.userContainer {
  width: 1200px;
  max-width: 95%;
  margin: 40px auto;
  background: #ffffff;
  padding: 32px;
   border: 1px solid #0078BF;
}

.changePassContainer {
  width: 900px;
  max-width: 95%;
  margin: 48px auto;
  background: transparent;
  border: 1px solid #0078BF;
}


.petContainer,
.vehicleContainer,
.emergencyContainer,
.spaceContainer,
.bodContainer {
  width: 1250px;
  max-width: 95%;
  margin: 48px auto;
  background: transparent;
  border: 1px solid #0078BF;
}

.card {
  padding: 30px;
  margin-bottom: 16px;
}

.userCard {
  margin-bottom: 16px;
  background: #F9FAFB;
  border: 1px solid #D9D9D9;
}

h2 {
  color: #001E50;
  margin-bottom: 10px;
  font-size: 40px;
  margin-top: 0;
}

.subtitle {
  font-size: 16px;
  color: #4A5565;
  margin-bottom: 25px;
  line-height: 1.5em;
}

/* ACCORDION */
.accordion summary {
  list-style: none;
  cursor: pointer;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion .part1::after {
  content: "▾";
  font-size: 14px;
  color: #717182;
  margin-left: 10px;
  transition: transform 0.2s ease;
}

.accordion[open] .part1::after {
  transform: rotate(180deg);
}

/* CARD HEADER */
.card-header {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  width: 100%;
}

.card-header .part1 {
  display: flex;
  width: 70%;
  border-left: 5px solid #0078BF;
  align-items: center;
}

.card-header .part1 img {
  width: 28px;
  height: 28px;
  margin: auto 12px;
}

.card-header .part2 {
  width: 30%;
  text-align: right;
}

.card-header h2 {
  font-size: 24px;
  margin: 0;
  color: #001E50;
  text-transform: uppercase;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* BUTTONS */
.primary-btn,
.dark-btn,
.outline-btn,
.light-outline-btn,
.red-outlined-btn {
  color: #fff;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.primary-btn {
  background: #0078BF;
}

.dark-btn{
  background: #001E50;
}

.outline-btn{
  background: transparent;
  border: 1px solid #001E50;
  color: #001E50;
  padding: 10px 24px;
}

.light-outline-btn{
  background: transparent;
  border: 1px solid #0078BF;
  color: #0078BF;
  padding: 10px 24px;
}


.red-outline-btn{
  background: transparent;
  border: 1px solid #DC2626;
  color: #DC2626;
  padding: 10px 24px;
}


.primary-btn:hover {
  background: #046ba8;
}

.dark-btn:hover
 {
  background: #1C407D;
}

.outline-btn:hover
 {
  background: #046ba8;
  border: 1px solid #046ba8;
  color: #ffffff;
}

.light-outline-btn:hover
 {
  background: #0078BF;
  border: 1px solid #0078BF;
  color: #ffffff;
}

.red-outline-btn:hover
 {
  background: #DC2626;
  border: 1px solid #DC2626;
  color: #ffffff;
}


.edit-btn,
.download-btn {
  background: #0078BF;
  color: #fff;
  font-size: 12px;
  padding: 8px 24px;
  pointer-events: auto;
}


.download-btn {
  padding: 8px;
}

.edit-btn img {
  margin-right: 12px;
  vertical-align: middle;
}

.download-btn img {
  margin-right: 7px;
  vertical-align: middle;
}

.form-btn {
  margin-top: 20px;
  background: #0078BF;
  color: #fff;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  font-weight: bold;
  width: 100%;
}

.form-btn:hover {
  background: #046ba8;
}

.actions button {
  border: none;
  padding: 6px 10px;
  margin-left: 5px;
  cursor: pointer;
}

.actions .edit {
  background: #0078BF;
}

.actions .edit:hover {
  background: #046ba8;
}

.actions .delete {
  background: #BF0000;
}

.actions .delete:hover {
  background: #9E0101;
}

/* CARD BODY */
.card-body {
  padding: 22px;
}

/* GRIDS */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.pet-info,
.vehicle-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  flex: 1;
  margin-bottom: 16px;
  font-size: 12px;
  color: #6A7282;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 2;
}

.pet-info span,
.vehicle-info span {
  color: #001E50;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
}

/* LABELS & TEXT */
label {
  font-size: 11px;
  text-transform: uppercase;
  color: #001E50;
  margin-top: 15px;
  display: block;
  font-weight: bold;
}

p {
  margin: 4px 0 0;
  font-size: 16px;
  color: #001E50;
}

/* FORM */
.form label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #001E50;
  text-transform: uppercase;
  margin-bottom: 6px;
  margin-top: 24px;
}

.form input {
  width: 100%;
  padding: 10px;
  border: 1px solid #D1D5DC;
}

.form small {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  color: #6A7282;
}

/* PET & VEHICLE CARDS */
.pet-card,
.vehicle-card {
  border: 1px solid #E5E7EB;
  padding: 24px;
  margin-bottom: 16px;
  background: #fff;
}

.pet-header,
.vehicle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pet-header h3,
.vehicle-header h3 {
  margin: 0;
  color: #001E50;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
  text-transform: uppercase;
}

.pet-header span,
.vehicle-header span {
  font-size: 16px;
  color: #4A5565;
}

.pet-content,
.vehicle-content {
  margin-top: 15px;
}

.pet-photo img,
.vehicle-photo img {
  width: 200px;
  height: 200px;
  margin-bottom: 16px;
}


/* Emergency Styles*/
/* GRID */

.instructions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 24px;
}

.instruction-box {
  border: 1px solid #E5E7EB;
  padding: 24px;
}

.box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16 px;
}

.box-header div{
  display: flex;
  align-items: center;
  gap: 8px;
}

.box-header div img{
  width: 38px;
  height: 38px;
}

.box-header h3 {
  margin: 0;
  font-size: 24px;
  color: #001E50;
  text-transform: uppercase;
}

label {
  display: block;
  font-size: 14px;
  margin-top: 15px;
  margin-bottom: 8px;
  font-weight: 500;
  color: #001E50;
  text-transform: uppercase;
}

input, textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #D1D5DC;
}

textarea {
  min-height: 80px;
  resize: vertical;
}

.icon-btn {
  background: #001E50;
  color: #fff;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
}

.icon-btn:hover {
  background: #0078BF;
}


.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.section-header div{
  display: flex;
  align-items: center;
  gap: 12px;
}



/* TABLE */

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  border-bottom: 1px solid #E5E7EB;
}

thead {
  background: #001E50;
  color: #fff;
}

th {
  padding: 16px;
  text-align: left;
  font-size: 14px;
  text-transform: uppercase;
}

td {
  color: #001E50;
  padding: 21px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
}

tbody tr:nth-child(odd) {
  background: #F9FAFB;
}

.badge {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: bold;
}

.badge.yes,
.badge.active,
.badge.valid {
  background: #DCFCE7;
  color: #016630;
}

.badge.no {
  background: #F3F4F6;
  color: #4A5565;
}

table button {
  border: none;
  padding: 6px 10px;
  margin-left: 5px;
  cursor: pointer;
}

.edit {
  background: #0078BF;
}

.edit:hover {
  background: #046ba8;
}

.delete {
  background: #BF0000;
}

.delete:hover {
  background: #9E0101;
}


/* NOTES & ALERTS */
.notes {
  background: #F9FAFB;
  border-left: 4px solid #0078BF;
  padding: 12px;
  margin-top: 15px;
  color: #6A7282;
  font-size: 12px;
  font-weight: 600;
  line-height: 2;
  text-transform: uppercase;
}

.notes span {
  font-size: 14px;
  font-weight: 500;
  color: #001E50;
  text-transform: none;
}

.tips {
  background: #EFF6FF;
  padding: 16px;
  margin-top: 20px;
  border-left: 4px solid #0078BF;
}

.tips h4 {
  margin-top: 0;
  font-size: 14px;
  color: #001E50;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.tips ul {
  padding-left: 20px;
  margin: 0;
  color: #4A5565;
  font-size: 14px;
  line-height: 1.6em;
}

.reminder {
  background: #FEFCE8;
  border-left: 4px solid #F0B100;
  padding: 16px;
}

.status-note {
  background: #F0FDF4;
  border-left: 4px solid #00C950;
  padding: 16px;
}

.reminder h4,
.status-note h4 {
  margin-bottom: 12px;
  margin-top: 0;
  font-size: 14px;
  color: #001E50;
  text-transform: uppercase;
}

.reminder ul{
  padding-left: 20px;
}

.reminder ul,
.reminder p,
.status-note p  {
  margin: 0;
  color: #4A5565;
  line-height: 1.5;
  font-size: 14px;
}

.guidelines {
  background: #EFF6FF;
  border-left: 4px solid #0078BF;
  padding: 16px;
}

.guidelines h4 {
  margin-bottom: 12px;
  margin-top: 0;
  font-size: 14px;
  color: #001E50;
  text-transform: uppercase;
}

.guidelines ul{
  margin: 0;
  padding-left: 20px;
  color: #4A5565;
  line-height: 1.5;
  font-size: 14px;
}

.emergency-box {
  margin-top: 30px;
  background: #FEF2F2;
  padding: 20px;
  border-left: 4px solid #FB2C36;
}

.emergency-box h4 {
  margin-top: 0;
  color: #001E50;
  font-size: 14px;
}

.numbers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.numbers-grid ul {
  padding-left: 0;
  margin: 0;
}

.numbers-grid ul li{
  list-style: none;
  color: #364153;
}

.numbers-grid ul li span{
  font-weight: bold;
}  




/* SPACE */

.spaceBox{
 border: 1px solid #E5E7EB;
 padding: 24px;
}

.space-card {
  border-top: 1px solid #e6edf5;
  padding: 25px 0;
}

.space-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.space-title {
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
}

.space-title h3 {
  font-size: 24px;
  color: #001E50;
}


.space-fee {
  text-align: right;
}

.space-fee span {
  font-size: 12px;
  color: #6A7282;
  font-weight: 600;
  display: block;
  line-height: 2em;
  text-transform: uppercase;
}

.space-fee h4 {
  color: #0078BF;
  font-size: 24px;
  margin: 0;
}

.space-location span {
  color: #4A5565;
  font-size: 18px;
  display: block;
  margin-bottom: 5px;
}

.space-location p {
  font-size: 14px;
  color: #6A7282;
}

.space-details {
  font-weight: 500;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.space-details label {
  font-size: 12px;
  color: #6A7282;
  display: block;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.space-details p {
  font-size: 14px;
  color: #001E50;
}


.additional-info {
  background: #EFF6FF;
  padding: 16px;
  margin-top: 20px;
  border-left: 4px solid #0078BF;
}

.additional-info label {
  font-size: 12px;
  font-weight: 600;
  color: #6A7282;
  display: block;
  margin: 0;
}

.additional-info p {
  font-size: 14px;
  color: #001E50;
  font-weight: 500;
}

/* SPACE TOTAL BAR */

.total-bar {
  margin: 24px auto;
  background: #001E50;
  padding: 32px;
}

.total-bar h4 {
  font-size: 20px;
  color: #ffffff;
}

.total-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-bar p {
  font-size: 14px;
  color: #ffffff;
}

.total-amount {
  font-size: 48px;
  font-weight: bold;
  color: #ffffff;
}

.spaceContainer .guidelines {
  margin-bottom: 16px;
}

.spaceContainer .reminder button{
 margin-top: 8px;
}

/* BOD */
td.certificate img{
  margin: 0 4px -5px 0;
}

.certification-summary{
  display: flex;
  gap: 20px;
  align-items: center;
}

.cert-item {
  margin-top: 24px;
  padding: 24px;
  width: 100%;
}

.cert-item h4 {
  font-size: 48px;
  color: #ffffff;
  margin: 0;
}

.cert-item p {
  color: #ffffff;
  font-size: 14px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.total-certificate {
  background: #001E50;
}

.valid-certificate{
  background: #00A63E;
}

.continuing-hour{
  background: #0078BF;
}

.bodContainer .reminder {
  margin: 24px auto;
}


.bodContainer .status-note p {
  margin-bottom: 16px;
}

.bodContainer .status-note .primary-btn {
  margin-right: 12px;
}


/* RESIDENT SERVICES*/

/* HEADER */

.resident-header{
background:linear-gradient(to right, #001E50, #003A7F, #0078BF);
padding:35px;
text-align:center;
color:white;
}

.residentHeader{
  width: 1250px;
  max-width: 95%;
  margin: auto;
  text-align: left;
}

.page-header h1{
letter-spacing:2px;
font-size:32px;
}

/* MAIN CONTAINER */

.residentContainer{
  width: 1250px;
  max-width: 95%;
  margin: 48px auto;
  background: transparent;
  border: 1px solid #0078BF;
  color: #001E50;
}

.violationContainer,
.visitorContainer{
 padding-bottom: 24px;
}

.residentContainer{
.residence-info{
padding:24px 32px;
background:#fff;
font-size:16px;
}

/* MAINTENANCE REQUEST */
/* FORM CARD */

.outline-btn
 {
  margin-right: 8px;
}

.form-header h2{
font-size: 24px;
padding: 16px 32px;
background: #F5F5F5;
border-top: 1px solid #D9D9D9;
border-bottom: 1px solid #D9D9D9;
}

/* BUTTONS */

.form-actions{
padding: 16px 32px;
text-align: right;
}

/* FORM GROUP */

.formContent{
padding: 0 32px 50px 32px;
}

.form-group{
margin-bottom:18px;
display:flex;
flex-direction:column;
}


.form-group label{
margin-bottom:6px;
font-size:14px;
color:#333;
}

select:required:invalid {
  color: gray;
}

select {
  appearance: none; }

.form-group label{
text-transform: none;
font-size:16px;

}

.form-group input,
.form-group select,
.form-group textarea{
padding:10px;
border:1px solid #d7d7d7;
font-size:14px;
}

/* CHECKBOX */

.form-group input.checkBox{
    width: auto;
}

.form-group.checkbox {
  display: inline-flex;
  flex-direction:row;
  align-items: center;
  gap: 8px;
  width: auto;
}

.form-group.checkbox input,
 .form-group.checkbox label{
  color: #001E50;
  margin: 0;
}

/* UPLOAD BOX */

.upload-box{
border:1px solid #e1e7ef;
padding:20px;
margin-top:25px;
background:#FAFAFA;
}

.upload-box h3{
margin-bottom:6px;
font-size: 16px;
color:#001E50;
}

.upload-box p{
font-size:14px;
margin-bottom:15px;
color:#666;
}

/* FILE INPUT */

.file-upload{
display:flex;
align-items:center;
gap:12px;
margin-top:10px;
}

.file-upload input{
border:none;
}

.upload-box small{
display:block;
margin-top:8px;
color:#999999;
}


/* VIOLATIONS & PACKAGES*/

/* TABLE HEADER */

.table-header,
.packages-table-header{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;
background:#F5F5F5;
padding:12px 16px;
font-weight:bold;
font-size:14px;
color:#0078BF;
margin: 0 32px;
}

/* ROW */

.violation-row,
.packages-row{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;
border-top:1px solid #D9D9D9;
margin: 0 32px;
padding:16px;
font-size:14px;
align-items:start;
}

.packages-table-header,
.packages-row{
grid-template-columns:1fr 1fr 1fr 1fr 1fr;
}

.violation-row span{
display:block;
font-weight: 500;
margin-bottom:4px;
}

.violation-row p{
font-size:12px;
color:#666;
}

/* PACKAGE STATUS */
.packages-row{
    .forPickup {
      color: #0078BF;
        }
        
    .pickedUp {
      color: #666666;
        }
}

/* NOTIFICATION */
.package-notify{
  margin:32px;
  padding-top: 32px;
  border-top: 1px solid #D9D9D9;
}

.notify-title{
  font-size:16px;
  margin:10px 0;
  color:#001E50;
}

.notify-option{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
  cursor:pointer;
  font-size:16px;
  color: #001E50;
  text-transform: none;
}

.notify-option input{
  cursor:pointer;
  width: auto;
}   

/* BUTTONS */

.row-buttons{
margin-top:12px;
display:flex;
gap:7px;
}

/* VISITORS*/
/*TABLE HEADER */

.visitors-table-header{
display:grid;
grid-template-columns:1fr 2fr 1fr 2fr;
background:#F5F5F5;
padding:12px 16px;
font-weight:bold;
font-size:14px;
color:#001E50;
margin: 0 32px;
}

.visitorInfo h3,
.packagesInfo h3 {
font-size: 24px;
text-transform: uppercase;
margin-bottom: 0;
}


.packagesInfo h3 {
margin-bottom: 24px;
}

/* ROW */

.visitors-row{
display:grid;
grid-template-columns:1fr 2fr 1fr 2fr;
border-top:1px solid #D9D9D9;
margin: 0 32px;
padding:16px;
font-size:14px;
align-items:start;
}

.visitor-buttons button {
margin: 0 3px 5px 0;
}

/* REQUEST RADIO BUTTON */
.request-options{
  display:flex;
  gap:40px;
  margin: 0 32px;
  padding:24px 0;
  border-top: 1px solid #D9D9D9;
}


.radio-option{
  display:flex;
  flex-direction:column;
  cursor:pointer;
}


.radio-line{
  display:flex;
  align-items:center;}

.radio-line span{
  text-transform: none;
}

.radio-line
input{
width: 10%; 
padding: 0;
}


.option-text{
  visibility:hidden;
  margin-top:6px;
  font-size:12px;
  color:#fff;
  background: #0078BF;
  padding: 10px 24px;
  text-decoration: none;
  height:40px; /* reserve space */
}

.radio-option:has(input:checked) .option-text{
  visibility:visible;
}


}

/* FOOTER */

.footer{
margin-top:90px;
background:#2C3E50;
color:#FFFFFF;
text-align:left;
padding:18px;
font-size:14px;
}

.footerContent{
  width: 1250px;
  max-width: 95%;
  background: transparent;
  margin: auto;
}


/* LATEST INFORMATION */


/* HEADER */
.infoHeader {
 background:
    url("images/header-bg-element.png") no-repeat center center,
    linear-gradient(to right, #001E50, #003A7F, #0078BF);
  background-size: cover;
  background-blend-mode: screen;
  color: #fff;
  padding: 40px 0;
  text-align: center;
}

.infoHeader h1 {
  margin: 10px 0;
  font-size: 48px;
}

.infoHeader p{
  font-size: 14px;
  color: #ffffff;
}

.infoHeader .subtitle {
  font-size: 16px;
}

/* CONTAINER */


.InformationContainer {
  width: 1250px;
  max-width: 95%;
  margin: 30px auto;
}

/* CARD */
.LatestInformation .card {
  border: 1px solid #0078BF;
  padding: 40px;
  margin-bottom: 32px;
}

.LatestInformation .card h2 {
  margin-bottom: 20px;
  font-size: 32px;
  color: #000000;
}

/* GRID */
.grid-icons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}

.icon-box {
  border: 1px solid #CBD5E0;
  padding: 24px;
  text-align: center;
  position: relative;
  font-size: 13px;
}

.icon-box p{
 text-align: left;
 font-size: 18px;
}

/* ICON */
.icon {
  font-size: 28px;
  margin-bottom: 10px;
  text-align: left;
}

/* BADGE */
.badge-count {
 font-family: Poppins;
  position: absolute;
  top: 8px;
  right: 8px;
  background: #F05C00;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  min-width: 20px;
  text-align: center;
}

.badge-count:empty {
  display: none;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

/* INFO BOX */
/* ANNOUNCEMENTS */

.info-box {
  border: 1px solid #ddd;
  padding: 20px;
}


.info-box h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.infoIcon{
    display: flex;
    align-items: center;
}

.communityInfo h3{
    font-size: 24px;
    font-family: Poppins;    
    font-weight: 400;
    margin-left: auto;
 }
 
 .communityInfo h4{
    font-size: 16px;
    font-family: Poppins;    
    font-weight: 600;
    color: #001E50;
    margin-bottom: 12px;
 }
 
  .communityInfo h5{
    font-size: 14px;
    font-family: Poppins;
    font-weight: 400;
    color: #001E50;    
 }
 
 .pflex {
  font-family: Poppins;
  color: #001E50;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
 }

.info-box button,
.announcement button {
  margin-top: 50px;
  padding: 9px;
  width: 100%;
  background: #0078BF;
  color: white;
  border: none;
  font-size: 12px;
  text-transform: uppercase;
}

.announcement button {
  margin-top: 10px;
}

.info-box button:hover,
.announcement button:hover {
  background: #0467a2;
}

/* PANEL */
.panel {
  border: 1px solid #CBD5E0;
  margin-bottom: 32px;
}

.panel-header {
  background: #001E50;
  color: white;
  padding: 24px;
  align-items: center;
  display: flex;
}

.panel-header h5{
  margin: 0;
}

.panel-header span{
  background: #0078BF;
  color: white;
  padding: 4px 8px;
  margin-left: 8px;
}

.panel-header p{
  color: white;
  margin-left: auto;
  font-size: 14px;
}

.pannel-content{
    padding: 0 30px;
}

/* FEED */
.feed-item,
.announcement,
.event {
  padding: 30px 0;
  border-bottom: 1px solid #CBD5E0;
  position: relative;
}

.feed-item:last-child,
.announcement:last-child,
.eventContent:last-child .event{
  border-bottom: none;
}

.feed-item h4,
.announcement h4,
.event h4{
  display: flex;
  line-height: 1.5em;
  align-items: center;
  color: #001E50;
  font-weight: 600;
  margin: 0;
}

.feed-item span{
  display: flex;
  align-items: center;
  margin-left: auto;
}

.feed-item p.dateTime,
.announcement p.dateTime,
.event p{
  font-size: 12px;
}

.feed-item p,
.announcement p{
  font-size: 14px;
}


.announcement p{
  margin: 10px 0;
}





.LatestInformation .badge {
  font-size: 12px;
  padding: 4px 8px;
  font-weight: 400;
  color: white;
}

.badgeNotif { background: #EF4444; }
.badgeComplete { background: #22C55E; }
.badgeApproved { background: #F05C00; }




/* EVENTS */
.eventPanel {
display: flex;
align-items: center;
justify-content: space-between;
}

.eventContent {
display: flex;
align-items: center;
justify-content: space-between;
}

.rsvpBadge {
background: #EF4444;
color: white;
font-weight: 700;
padding: 28px 12px;
font-size: 12px;
}

.rsvpBadge:empty {
  display: none;
}

/* STAFF */
/* GRID */
.staff-directory {
  max-width: 1250px;
  margin: 40px auto 60px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* CARD */
.staff-card {
  background: #fff;
  border: 1px solid #d8d8d8;
  text-align: center;
  padding: 36px 24px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* AVATAR */
.staff-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 4px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* AVATAR COLORS */
.staff-card .blue-1 {
  background: #001E50;
}

.staff-card .blue-2 {
  background: #003A7F;
}

.staff-card .blue-3 {
  background: #005A99;
}

.staff-card .blue-4 {
  background: #004070;
}

.staff-card .blue-5 {
  background: #0078BF;
}

/* TEXT */
.staff-card h3 {
  font-size: 14px;
  color: #001E50;
  margin-bottom: 3px;
}

.staff-position {
  font-size: 12px;
  color: #001E50;
  margin-bottom: 3px;
}

.staff-details {
  font-size: 11px;
  color: #9A9A9A;
  margin-bottom: 20px;
}

.staff-details a{
  text-decoration: none;
  color: #9A9A9A;
}

.staff-details a:hover{
  text-decoration: underline;
  color: #001E50;;
}

.staff-card .primary-btn {
  font-size: 11px;
  padding-left: 18px;
  padding-right: 18px;
}



/* FOOTER */
.infoFooter {
  text-align: center;
  padding: 15px;
  background: #2d3e50;
  color: white;
  font-size: 12px;
}







/* MOBILE SIZE */
@media (max-width: 1023px) {
  .info-grid {
    display: block;
  }

  .card-header {
    display: block;
  }

  .card-header .part2 {
    text-align: left;
    margin-top: 20px;
  }
  
  .LatestInformation{
  .grid-icons,
  .grid-2,
  .grid-4 {
  grid-template-columns: repeat(1, 1fr);
}
}

  .staff-directory {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 30px;
  }
}

@media (max-width: 600px) {
  .staff-directory {
    grid-template-columns: 1fr;
  }
}