body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .form-container {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            width: 90%;
            border-top: 5px solid #0061A2; /* Bright orange border */
        }
        h1{
            text-align: center;
            margin-bottom: 20px;
            font-size: 1.4em;
            color: #F37021; /* Purple */
        }

        h2{
            text-align: center;
            margin-bottom: 16px;
            font-size: 1.4em;
            color: #F37021; /* Purple */
        }

        h3{
            text-align: left;
            margin-bottom: 14px;
            font-size: 1.0em;
            color: #F37021; /* Purple */
        }
        
        .small{
            font-size: 0.7em;
        }

  .signature-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 2px dashed #666;
    border-radius: 8px;
    cursor: pointer;
    width: fit-content;
  }

  .signature-box input {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #666;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
  }

  .signature-box input:checked::after {
    content: "✓";
    font-size: 18px;
    color: #4CAF50;
    position: absolute;
    left: 3px;
    top: -2px;
  }

  .signature-text {
    font-size: 1em;
    color: #333;
  }
        
        .left {
            text-align: left;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        label {
            font-weight: bold;
            margin-bottom: 5px;
            display: block;
            color: #F37021; /* Purple */
        }
        input, textarea, select {
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 10px;
            font-size: 1em;
            background: #FFFDF5; /* Light orange-tinted background */
            box-sizing: border-box;

        }
        textarea {
            resize: vertical;
        }
        button {
            background-color: #0061A2; /* Bright orange */
            color: white;
            padding: 12px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            width: 100%;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #F37021; /* Darker orange */
        }
        .custom-file {
            margin-bottom: 15px;
        }
        .custom-file label {
            display: inline-block;
            padding: 10px 20px;
            background-color: #0061A2; /* Bright orange */
            color: white;
            border-radius: 8px;
            cursor: pointer;
            text-align: center;
            transition: background-color 0.3s ease;
        }
        .custom-file label:hover {
            background-color: #CC5E00; /* Darker orange */
        }
        .custom-file input {
            display: none;
        }
        .preview-container {
            margin-top: 10px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .preview-item {
            position: relative;
            width: 50px;
            height: 50px;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .preview-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .preview-item .delete-icon {
            position: absolute;
            top: 0;
            right: 0;
            background-color: rgba(255, 0, 0, 0.7); /* Red with transparency */
            color: white;
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            font-weight: bold;
            border-radius: 50%;
            cursor: pointer;
            opacity: 0.8;
            transition: opacity 0.3s ease;
        }
        .preview-item:hover .delete-icon {
            opacity: 1; /* Fully visible on hover */
        }
        .confirmation-box {
            position: absolute;
            background: #FFFDF5; /* Light orange-tinted background */
            padding: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            border: 1px solid #F37021; /* Purple border */
            display: none;
            z-index: 10;
        }
        .confirmation-box button {
            margin: 5px;
            padding: 5px 10px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
        }
        .confirm-btn {
            background-color: #0061A2; /* Bright orange */
            color: white;
        }
        .cancel-btn {
            background-color: #ddd;
            color: black;
        }
        
        .entry-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .entry-table thead tr th {
            text-align: left;
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }
        
        .entry-table tbody tr td {
            text-align: left;
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }
        
        .status-draft { background-color: #f0f0f0; }
        .status-submitted { background-color: #fff7cc; }
        .status-needs-review { background-color: #ffe4e4; }
        .status-reviewed { background-color: #dff7e1; }
        .status-approved { background-color: #5de868; }

    .back-button {
      background-color: #f2f2f2;
      color: #444;
      text-decoration: none;
      padding: 10px 20px;
      border: 1px solid #ccc;
      border-radius: 4px;
      transition: background-color 0.2s ease, color 0.2s ease;
      margin-right: 10px; /* some spacing */
    }
    .back-button:hover {
      background-color: #ddd;
      color: #000;
    }
    
    .form-buttons {
  display: flex;          /* Use flex layout */
  flex-wrap: wrap;        /* Wrap if smaller screens */
  gap: 10px;              /* Space between buttons */
  margin-top: 20px;       /* Spacing above the buttons */
}

/* Generic button style that applies to both <a> and <button> 
   if they share the .button class */
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #555;    /* Main button background */
  color: #fff;               /* White text */
  text-decoration: none;     /* Remove link underline */
  border: none;              /* Remove default button borders */
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

/* For hover/active states to provide user feedback */
.button:hover {
  background-color: #444;
}

/* Example: Distinguish back vs next if desired */
.back-button {
  background-color: #777;    /* Slightly different color for "Back" */
}

.back-button:hover {
  background-color: #666;
}

            .radio-slider {
              position: relative;
              display: inline-flex;
              border: 1px solid #ccc;
              border-radius: 3rem;    /* Rounded “pill” shape */
              overflow: hidden;
              width: 300px;           /* Fixed width for demo; adjust as needed */
              user-select: none;      /* Prevent text selection while clicking */
              font-family: sans-serif;
            }
            
            .radio-slider-fifty {
              position: relative;
              display: inline-flex;
              border: 1px solid #ccc;
              border-radius: 3rem;    /* Rounded “pill” shape */
              overflow: hidden;
              width: 50%;           /* Fixed width for demo; adjust as needed */
              user-select: none;      /* Prevent text selection while clicking */
              font-family: sans-serif;
            }

                    
            /* Hide the radios visually (still accessible to screen readers) */
            .radio-slider input[type="radio"] {
              display: none;
            }
            
            .radio-slider-fifty input[type="radio"] {
              display: none;
            }

                    
            /* Each label segment */
            .radio-slider label {
              flex: 1;                /* Make each label equally wide */
              text-align: center;
              padding: 0.75rem 0;
              cursor: pointer;
              position: relative;
              z-index: 2;             /* Appear above highlight */
              font-size: 1.2rem;      /* Larger icon */
              transition: color 0.2s ease;
              margin-bottom: 0 !important;
            }

            .radio-slider-fifty label {
              flex: 1;                /* Make each label equally wide */
              text-align: center;
              padding: 0.75rem 0;
              cursor: pointer;
              position: relative;
              z-index: 2;             /* Appear above highlight */
              font-size: 1.2rem;      /* Larger icon */
              transition: color 0.2s ease;
              margin-bottom: 0 !important;

            }

            
            /* Default unselected colors */
            .opt-yes + label {
              color: #0061A2;           /* Yes = green */
            }
            .opt-unsure + label {
              color: gray;            /* Unsure = gray */
            }
            .opt-no + label {
              color: #0061A2;            /* No = red */
            }
            
            /* The highlight “pill” that slides behind the label */
            .radio-slider .highlight {
              position: absolute;
              top: 0;
              left: 33.3333%;         /* Default to the middle (Unsure) */
              width: 33.3333%;        /* One-third width for 3 options */
              height: 100%;
              border-radius: 3rem;
              z-index: 1;
              transition: left 0.25s ease, background-color 0.25s ease;
            }

            .radio-slider-fifty .highlight {
              position: absolute;
              top: 0;
              width: 50%;        /* One-third width for 3 options */
              height: 100%;
              border-radius: 3rem;
              z-index: 1;
              transition: left 0.25s ease, background-color 0.25s ease;
            }
            

            
            /* Move the highlight depending on which radio is checked */
            .opt-yes:checked ~ .highlight {
              left: 0;
              background-color: #0061A2;
            }
            .opt-unsure:checked ~ .highlight {
              left: 33.3333%;
              background-color: gray;
            }
            .opt-no:checked ~ .highlight {
              left: 66.6667%;
              background-color: #0061A2;
            }

            .opt-yes-fifty:checked ~ .highlight {
              left: 0;
            }
            .opt-no-fifty:checked ~ .highlight {
              left: 50%;
            }
            
            /* Change highlight color per selection */
            .opt-yes-fifty:checked ~ .highlight {
              background-color: green;  
            }
            .opt-no-fifty:checked ~ .highlight {
              background-color: red;    
            }
            
            /* Turn the selected icon white for contrast over highlight */
            .opt-yes:checked + label {
              color: #fff;
            }
            .opt-unsure:checked + label {
              color: #fff;
            }
            .opt-no:checked + label {
              color: #fff;
            }

            .opt-yes-fifty:checked + label {
              color: #fff;
            }
            .opt-no-fifty:checked + label {
              color: #fff;
            }