body {
	padding: 10px 10px 0 10px;
	margin: 0;
	font-family: "Poppins";
	background-color: #ebebeb;
}
h1 {
	font-size: 16px;
	font-weight: 700;
	color: #b1b1b1;
	padding: 2px;
	margin: 0;
}
p {
	font-size: 14px;
	font-weight:600;
	color:black;
	margin: 0;
}
a {
	text-decoration: none;
}

#header {
	display:grid;
	grid-template-columns: 70% 30%;
	align-items:center;
	padding: 10px 0;
}
#header .logo {
	width: 80%;
}
#header .img1 {
	width: 100%;
}
#header .inbox {
	position: relative;
	width: 50%;
	height: auto;
	margin-left: auto;
}
#header .img2 {
	width: 100%;
}

.body-content {
	background: white;
	border-radius: 20px 20px 0 0;
	padding: 10px 10px 80px 10px;
	min-height: 100vh;
}
.job {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items:center;
	text-align:center;
	border: 2px solid #ad7753;
	border-radius: 10px;
	padding: 15px 10px;
	margin-bottom: 10px;
}
	.btns {
		display:grid;
		grid-template-columns: 1fr 1fr 1fr;
		align-items:center;
		grid-gap: 5px;
	}
	
  .btn {
	background: #4F3419;
	font-size: 14px;
	padding: 15px;
	width: 100%;
	font-weight:600;
	color: white;
	border-radius: 10px;
	text-align:center;
	cursor: pointer;
	border: 0;
  }
 
 .job-details {
	border: 2px solid #ad7753;
	border-radius: 10px;
	padding: 15px 10px;
	margin-bottom: 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
 }

	.jname { grid-area: 1 / 1 / 2 / 3; }
	.jclient { grid-area: 2 / 1 / 3 / 3; }

.job-block {
	margin-bottom: 10px;
}

.block-title {
	border-bottom: 1px solid #c1c1c1;
	display:grid;
	grid-template-columns: 95% 5%;
	align-items:center;
	margin-bottom: 10px;
}
.block-title h1 {
	color: #474747;
}
.block-title img {
	width: 100%;
	height: auto;
	margin-left: auto;
}
.dot {
  height: 20px;
  width: 20px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}
.area-title {
	display:grid;
	grid-template-columns: 30px auto 5%;
	align-items:center;
	margin-bottom: 10px;
}
.area-title h2 {
	font-size: 14px;
	margin: 0;
}
.dropdown {
	width: 100%;
	height: auto;
	margin-left: auto;
	transform: rotate(180deg);
}
.job-docs {
	display:flex;
}
.job-docs img {
	width: 20%;
	margin-right: 20px;
}

footer {
	position:fixed;
	bottom: 0;
	left:0;
	width: 100%;
	z-index:9999;
}
#hfuk-footer {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items:center;
    box-shadow: 1px 78px 50px 60px rgba(0,0,0,0.85);
  }
  #hfuk-footer div {
    background: white;
    padding: 10px;
    text-align:center;
    border-right: 1px solid #afafaf;
    color:black;
    font-size: 1em;
    font-weight:700;
  }
  #hfuk-footer div:last-child {
    border-right: 0;
  }
  #hfuk-footer img {
    width: 20px;
    height: 20px;
  }
 

/* ✉️ Notification card */
.notification-card {
  border: 2px solid #ad7753;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 10px 20px;
  background-color: #fff;
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease;
  touch-action: pan-y;
  cursor: pointer;
}

/* 🧾 Heading spacing */
.notification-card h3 {
  margin: 2px;
}

/* 📬 Unread indicator */
.notification-card.unread {
  border-left: 5px solid #4F3419;
  background-color: #f8f3ef;
}

/* 🧱 Swipe wrapper */
.swipe-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

/* 🟥 Red swipe background */
.swipe-background {
  position: absolute;
  inset: 0;
  background-color: #e53935;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
  z-index: 0;
  border-radius: 10px;
  bottom: 10px;
}

/* ❌ Delete icon style */
.delete-icon {
  font-size: 32px;
  color: #fff;
  opacity: 0;
  transform: translateX(50%);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.notification-card {
  transition: margin 0.2s ease, height 0.2s ease;
}

.single-notification {
	border: 0;
	padding: 0;
}
  
.mark-unread {
  background: none;
  color: #4F3419;
  border: 1px solid #ad7753;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.85em;
  margin-top: 6px;
  cursor: pointer;
}

.inbox {
  position: relative;
  display: inline-block;
}

.notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: red;
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: bold;
  z-index: 10;
}

.job-docs, .areas {
	border-bottom: 1px solid #c1c1c1;
	padding-bottom: 10px;
}
.job-docs {
	display:none;
}
.open {
	display:block;
}
.open-rotate {
	transform: rotate(180deg);
}