body {
   font-family: 'Arial', sans-serif;
   background-color: #f8f9fa;
   font-size: 0.9em;
   margin: 0;
   padding: 0;
}

.container {
   max-width: 600px;
   margin: 20px auto;
}

/* Task Styling */
.task {
   background-color: white;
   border: 1px solid #ddd;
   padding: 12px;
   margin-bottom: 12px;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   transition: background-color 0.3s ease-in-out; /* Smooth transition */
}

/* Task Header */
.task .top-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 4px;
}

/* Timer Style */
.task .timer {
   font-weight: bold;
   color: #007bff;
   font-size: 1rem;
   width: 100px;
}

/* Time Range */
.task .time-range {
   color: grey;
   text-align: right;
   flex-grow: 1;
   font-size: 0.95rem;
}

/* Task Title */
.task h5 {
   font-size: 1.1rem;
   margin: 0;
   font-weight: 500;
   text-align: left;
}

/* Task Buttons */
.task button {
   background: none;
   border: none;
   color: grey;
   cursor: pointer;
   transition: color 0.2s;
}

.task button:hover {
   color: #333;
}

/* Expiring Task Highlight */
.task-expiring .timer {
   color: #ff6347;
}

/* Expired Task Styling */
.task-expired {
   opacity: 0.6;
   background-color: #f8d7da; /* Light red for expired tasks */
}

.task-expired span {
   color: grey !important;
}

/* Hide Tasks */
.task-hide {
   display: none !important;
}

/* Flash Animation for Expiring Tasks */
@keyframes flash-task {
   0%, 100% { background-color: white; } 
   50% { background-color: #fff9c4; } /* Light yellow */
}

.flash-task {
   animation: flash-task 0.5s 4 alternate; /* Flash 4 times */
}

.task-duration {
   color: grey;
}
.task-future {
   background-color: #f6fafd;
   opacity: 0.5;
}