form {  font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: darkblue}
   td {  font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: darkblue}
   select {  font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10px; color: darkblue}
   input {  font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10px; color: darkblue}
   textarea {  font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10px; color: darkblue; white-space: pre-wrap;}

   /* Style for the popup container */
        .popup-container {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: lightblue;  
            padding: 20px;
            border: 1px solid #ddd;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            max-width: 300px;
            text-align: center;
            border-radius: 20px;   /* rounded corners */
        }

        /* Style for the question icon */
        .question-icon {
            cursor: pointer;
        }
        
       .scrollable-container {
            width: 700px; /* Set width as per your requirement */
            height: 200px; /* Set height as per your requirement */
            overflow-y: auto; /* Enable vertical scrolling */
            border: 1px solid #ccc; /* Optional: Add border for visualization */
            padding: 10px; /* Optional: Add padding for spacing */
        }
        .text-field1 {
            margin-bottom: 5px; /* Optional: Add margin between text fields */
            width: 30%; /* Make text fields occupy full width */
        }
        .text-field2 {
            margin-bottom: 5px; /* Optional: Add margin between text fields */
            width: 30%; /* Make text fields occupy full width */
        }
        .text-field3 {
            margin-bottom: 5px; /* Optional: Add margin between text fields */
            width: 100%; /* Make text fields occupy full width */
        }
        .instructions {
            color: firebrick; /* Blue color for links */
            text-decoration: none; /* Remove underline */
            transition: color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease; /* Transition for smooth hover effect */
            padding: 2px; /* Add padding for spacing */
            border-radius: 3px; /* Add border radius for rounded corners */
            font-style: italic;
            font-family: 'Instrument Sans'; /* Apply font family */
            font-weight: 200; /* Apply font weight */
            font-size: 16px;
        }   
        .instructions2 {
            color: firebrick; /* Blue color for links */
            text-decoration: none; /* Remove underline */
            transition: color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease; /* Transition for smooth hover effect */
            padding: 2px; /* Add padding for spacing */
            border-radius: 3px; /* Add border radius for rounded corners */
            font-style: italic;
            font-family: 'Audiowide'; /* Apply font family */
            font-weight: 400; /* Apply font weight */
            font-size: 16px;
        }   
        .spacewarnred {
            color: firebrick; /* Blue color for links */
            text-decoration: none; /* Remove underline */
            transition: color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease; /* Transition for smooth hover effect */
            padding: 2px; /* Add padding for spacing */
            border-radius: 3px; /* Add border radius for rounded corners */
            font-style: italic;
            font-family: 'Instrument Sans'; /* Apply font family */
            font-weight: 200; /* Apply font weight */
            font-size: 10px;
        }   
        summary {
            list-style: none; /* Remove the default marker */
            cursor: pointer;  /* Make it clickable */
            display: inline-block;
            width: auto;          /* Or set a fixed width */
            max-width: fit-content;
            padding: 0;           /* Adjust if needed */        
        }

        summary::before {
            content: "⯈ ";  /* Custom diamond/arrow symbol */
            font-size: 1.5em; /* Increase its size */
            display: inline-block;
            transition: transform 0.2s ease; /* Add a smooth rotation */
        }

        details[open] summary::before {
            transform: rotate(90deg); /* Rotate symbol when expanded */
        }

        /* Floating timer style */
        .floating-timer {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #f9f9f9;
            border: 2px solid #333;
            padding: 15px;
            z-index: 1000;
            text-align: center;
            width: 130px;
        }
        .floating-timer button {
            margin: 5px;
            padding: 2px 5px;
            font-size: 12px;
        }
        .timer-display {
            font-size: 24px;
            margin-bottom: 10px;
        }
        .button-row {
            display: flex;
            justify-content: center;
            gap: 5px;
        }
        .close-btn {
            position: absolute;
            top: -10px;
            right: -10px;
            background-color: #ff4d4d;
            border: none;
            color: white;
            font-size: 14px;
            cursor: pointer;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
        }
        /* ── small PDF drop-zone next to Plaintiff/Defendant ── */
        #pdfDropzone {
          float:right;                  /* anchor to the right edge of the cell */
          vertical-align:middle;   /* keep inline-block alignment       */
          position:relative;       /* let us shift it without reflow    */
          top:-18px;                /* nudge the box 8 px upward – tweak */
          margin-left: 20px;      /* keep it next to the case-style inputs          */
          margin-top:  -20px;      /* let it rise 6 px above the table cell          */
          margin-bottom: 0px;    /* … and hang 6 px below — row height unchanged   */
          width: 200px;           /* a bit wider                                    */
          padding: 6px 4px;      /* taller hit-area (12 px top/bottom, 8 px sides) */
          border: 2px dashed #888;
          border-radius: 8px;
          font-size: 12px;
          color: #555;
          text-align: center;
          cursor: pointer;
          user-select: none;
          /* translucent yellow background, just like index.php’s big dropZone */
          background: rgba(255,255,0,0.9);
        }

        #pdfDropzone.dragover {
          /* translucent green on hover, if you like */
          background: rgba(200,255,200,0.9);
        }    
        
        input[name="JobNumber"] {
          vertical-align: middle !important;
          margin-top: 0 !important;
          margin-bottom: 0 !important;
          position: relative !important;
          top: 0 !important;
        }

        /* ▨ reset-block button ▨ */
        /* keep this for the TEXT pill ---------------------------- */
        .reset-btn{
          background:#dcdcdc;
          border:1px solid #888;
          border-radius:4px;
          color:#c00;
          font-weight:bold;
          font-size:11px;
          padding:2px 8px;
          text-align:center;
          cursor:pointer;
          display:inline-block;
        }

        /* NEW: transparent skin for the IMG button --------------- */
        .reset-img{
          background:none;
          border:none;
          padding:0;
          cursor:pointer;
        }

        /* floats pill right, offsets it left                       */
        .reset-wrap{float:right;margin-right:80px;margin-left:10px;}

        /* ── floating checklist ────────────────────────────── */
        #checklistBox{
          position:fixed;             /* <<< key change */
          top:20%; left:50%;
          transform:translateX(-50%);
          z-index:2000;               /* above everything else */
          border:2px solid #ccd;
          background:aliceblue;
          padding:12px;
          border-radius:10px;
          width:300px;
          max-width:400px;
          box-shadow:0 4px 12px rgba(0,0,0,.25);
          display:none;
          pointer-events:auto; position:fixed;
          cursor: move;        /* default everywhere … */
          user-select: none;   /* … but no accidental selection */
        }
        .check-item{margin:6px 0;}
        .check-link{color:blue;cursor:pointer;text-decoration:underline;font-style:italic;}
        .check-link:hover{color:red;}

        .close-btn-check{
          position:absolute;             /* sit on the corner */
          top:-10px; right:-10px;
          width:24px; height:24px;
          border:none; border-radius:50%;
          background:#ff4d4d; color:#fff;
          font-weight:bold; cursor:pointer;
        }

        /* make the headline the “grab handle” */
        #checklistBox h3{
          cursor: move;          /* little “move” icon under the mouse */
          user-select: none;     /* stop accidental text highlight */
        }

        /* tiny square button, visually similar to your stopwatch icons */
        .titlecase-btn{
          display:inline-block;
          width:14px; height:14px; line-height:14px;
          font: 10px/14px Arial, sans-serif;
          font-weight:bold;
          color:#004;
          background:#dcdcdc;
          border:1px solid #888;
          border-radius:2px;
          text-align:center;
          cursor:pointer;
          user-select:none;
          margin-left:4px;
        }
        .titlecase-btn:hover{ background:#c0c0c0; }
        
  /* Modal overlay styling */
  #customModalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;  /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  /* Modal content styling */
  #customModal {
    background: linear-gradient(135deg, #ffcccc, #ffff99); /* Reds and yellows */
    border: 5px solid #ff0000;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    max-width: 400px;
  }
  #customModal button {
    background: #ff0000;
    color: #fff;
    border: none;
    padding: 10px 20px;
    margin-top: 15px;
    cursor: pointer;
    border-radius: 5px;
  }
  
  /* wipe out Ffox default disc buttons, use center dots */
      input[type="radio"] {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      }
    input[type="radio"] {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      display: inline-block;
      width: 14px;
      height: 14px;
      border: 1px solid #0000FF;
      border-radius: 50%;
      position: relative;
      outline: none;
      cursor: pointer;
    }

    input[type="radio"]:checked::before {
      content: "";
      display: block;
      width: 8px;
      height: 8px;
      background-color: #000;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    /* whatever class or id you gave the row – example:  .link-row  */
    #readinBar a{
      text-decoration: none;      /* removes the underline */
    }

    /* optional – show underline (or color-swap) only on hover */
    #readinBar a:hover{
      background: yellow;
      color: red;
    }
    
    /* ── tiny ASSIGNMENT-NOTICE drop-zone (job number) ───────────────── */
    #jobDropzone{
      float:right;                  /* anchor to the right edge of the cell */
      display:inline-block; 
      margin-left:12px;             /* small gap from the banner text */
      /* (keep any negative top/bottom margins you added earlier) */
      width:180px;                  /* same width as before */
      padding:2px 4px;
      border:2px dashed #888;
      border-radius:4px;
      font:11px/1.2 Arial, sans-serif;
      color:#555; text-align:center;
      cursor:pointer; user-select:none;
      background:rgba(255,255,0,.90);   /* same yellow tint */
    }
    #jobDropzone.dragover{
      background:rgba(200,255,200,.90); /* gentle green on hover */
    }

    /* gently centre the yellow Job-Number box in its row  */
    input[name="JobNumber"]{
      position:relative;   /* lets us nudge without breaking flow */
      top:2px;             /* + pushes it down, – lifts it up – tweak to taste */
    }
    
    /* floating quick-tip icon above Ordering-Atty table */
    .quicktip-icon{
      position:absolute;
      top:6px;       /* ~30 px above the table border */
      right:26%;       /* 25 % in from the right edge of the table */
      width:125px;
      height:44px;
      cursor:pointer;
    }

    .hidden{display:none !important;}   /* important beats inline style for special instructions link */

    td.vcenter {
        vertical-align: middle;
    }
    .vcenter-flex {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
    }

    /* new class just for layout */
    .reqlink {
      display:inline-block;
      margin-left:100px;          /* or whatever spacing you like */
      vertical-align:middle;
    }

    /* ── Special-requirements link ───────────────────────────── */
    #reqLinkSpan a{
      display:inline-block;
      background:yellow;         /* soft yellow */
      border:3px solid #d00;      /* red frame */
      padding:6px 8px;
      font-weight:bold;
      color:#b00;                 /* dark red text */
      text-decoration:none;       /* ← no underline */
      border-radius:6px;
    }
    #reqLinkSpan a:hover{
      background:#fff28a;         /* a hair darker on hover */
    }

    /* ── Modal refinements ───────────────────────────────────── */
    #reqModal .req-title{
      font:700 22px/1.3 "Arial",sans-serif;
      color:#d00;
      margin:0 0 12px 0;
      text-align:center;
    }
    #reqModal .req-item span.bad{
      color:#b30000;      /* ← deeper red than #d00 */                 /* highlight non-normal items */
      font-weight:600;
    }
    #reqModal .req-inner{
      width:70vw;        /* 90 % of viewport width */
      max-width:900px;   /* but never exceed 800 px */
    }

    .req-inner{
      width:clamp(400px, 90vw, 900px);   /* 400 px–900 px, max 90 % of screen */
    }
    
    /* *************************************************
       Special-requirements modal – inner white panel
       ************************************************* */
    #reqModal .req-panel{
      background:#fff;
      width:clamp(420px , 80vw , 900px);   /* min 420 px, max 900 px */
      margin:6vh auto;                     /* centre with some top air */
      padding:24px;
      border-radius:12px;
      box-shadow:0 4px 12px rgba(0,0,0,.5);

      /* nice-to-haves */
      overflow-wrap:anywhere;              /* break *really* long words/URLs */
      font:16px/1.5 Arial, sans-serif;
    }
    
    
    .floating-label {
      position: absolute;
      left: 10px;
      background-color: #fff8dc;
      padding: 2px 8px;
      font-size: 12px;
      border: 1px solid #ccc;
      color: #000;
      border-radius: 4px;
      font-family: sans-serif;
      z-index: 1000;
      transition: opacity 0.5s ease;
    }

    .hidden-label {
      opacity: 0;
      pointer-events: none;
    }

    .visible-label {
      opacity: 1;
      pointer-events: auto;
    }

    .fading-out {
      opacity: 0;
    }

    /* ==== This one is the pulsing border, completely independent from the pulsing thing above ===== */
    @keyframes dash {
      to {
        stroke-dashoffset: 400;
      }
    }
    .bubble-anim-border {
      border: 3px dashed red;
      position: relative;
      animation: none;
    }
    .bubble-anim-border::after {
      content: '';
      position: absolute;
      inset: -3px;
      border: 3px dashed #d00;
      border-radius: 16px;
      pointer-events: none;
      z-index: 1;
      width: calc(100% + 6px);
      height: calc(100% + 6px);
      animation: dash-ants 2s linear infinite;
    }

    @keyframes dash-ants {
      100% {
        border-style: dashed;
        border-color: #d00;
        border-width: 3px;
        border-radius: 16px;
        background-position: 100% 0;
      }
    }

    /* ==== This one is the pulsing border, completely independent from the animated thing above ===== */
    .bubble-pulse {
      border: 3px solid #d00;
      animation: pulse-border 0.8s infinite alternate;
    }

    @keyframes pulse-border {
      0%   { box-shadow: 0 0 0 0 #ff3535; border-color: #d00; }
      100% { box-shadow: 0 0 12px 4px #ff9797; border-color: #ff3535; }
    }


/* ==== Compact Y/N pill buttons for doc share (smaller version) ==== */
    .witYNbox {
      margin-left: 20px;          /* less gap between witness sets */
      display: inline-flex;
      align-items: center;
      gap: 1.5px;
      font-size: 0.86em;          /* shrink witness label */
    }
    .wit-label {
      font-weight: 600;
      color: #364657;
      margin-right: 2.5px;        /* slightly less space */
      font-size: 0.95em;          /* smaller label */
    }
    .pillYN {
      display: inline-block;
      padding: 1px 6px 1px 6px;   /* was 1.5px 8px 1.5px 8px */
      font-family: monospace;
      font-size: 12px;            /* was 16px */
      border: 2px solid #888;
      border-radius: 6px;         /* was 7px */
      cursor: pointer;
      background: #f7f7f7;
      color: #374;
      transition: background 0.2s, color 0.2s;
      margin-right: 1.5px;
      line-height: 1.1em;
    }
    .pillYN.y-btn.yn-selected {
      background: #31d245;
      color: #fff;
      border-color: #228A33;
    }
    .pillYN.n-btn.yn-selected {
      background: #fd4251;
      color: #fff;
      border-color: #d22;
    }

    #reminderModal button {
    display: block;
    margin: 15px auto 0 auto;
    text-align: center;
    }

    .toggleChecklistBtn {
        position: absolute;
        top: 8px;
        left: 8px;
        background: #f3f3f3;
        border: 1px solid #888;
        padding: 2px 6px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
    }

    /* stuff for clickable links in submit-blocking error list */
    .flash-highlight {
        background: yellow !important;
        transition: background 0.4s ease;
    }
    .errlink {
        color: blue;
        text-decoration: underline;
        cursor: pointer;
    }
    .errlink:hover {
        color: darkblue;
    }