godaun for all * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: #ffffff; } body { font-family: "Times New Roman", Times, serif; background: #ffffff; color: #000000; padding: 24px 18px; } .container { max-width: 980px; margin: 0 auto; background: #ffffff; padding: 22px 28px 26px; border: 1px solid #000000; box-shadow: none; border-radius: 0; } /* Make the whole form look like a printed sheet with ruled boxes */ .container { position: relative; } .sheet-area { border: 1px solid #000; padding: 10px; background: #ffffff; } .header { text-align: center; margin-bottom: 20px; border-bottom: 1.5px solid #111111; padding-bottom: 18px; } .header h1, .header h2, .header h3 { text-transform: uppercase; font-weight: 900; letter-spacing: 0.5px; color: #000000; line-height: 1.15; margin: 0; } .header h1 { font-size: 22px; margin-bottom: 6px; } .header h2 { font-size: 14px; margin-bottom: 6px; } .header h3 { font-size: 12px; } .section-title { background: transparent; color: #000000; padding: 0; margin: 20px 0 12px; font-size: 18px; font-weight: 700; border: none; border-radius: 0; } form { display: block; } .form-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px 22px; align-items: end; } .form-group { margin-bottom: 8px; padding: 6px 0 6px 6px; border-bottom: 1px solid #000000; min-height: 44px; } .form-group label { display: block; font-weight: 700; margin-bottom: 6px; color: #000000; font-size: 13px; } input, select, textarea { width: 100%; border: none; border-bottom: 1px solid #000000; background: transparent; border-radius: 0; padding: 6px 6px; font-size: 14px; color: #000000; min-height: 28px; } textarea { resize: vertical; min-height: 90px; border: 1px solid #000000; padding: 8px; } select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%); background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 11px) calc(50% - 3px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; } .priority-section { border: none; padding: 6px 0 6px; margin: 6px 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; } .priority-section h3 { width: 100%; margin: 0 0 10px; font-size: 18px; font-weight: 700; color: #000000; } .priority-section label { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 18px 0 0; font-weight: 400; color: #000000; } .record-table { width: 100%; border-collapse: collapse; margin-top: 8px; } .record-table td { border: 1px solid #000; padding: 6px 8px; vertical-align: top; } .record-table .cell-label { background: #ffffff; font-weight: 700; width: 30%; } .checkbox-row { display: flex; align-items: center; gap: 12px; } .priority-cell { text-align: center; } .priority-cell input { margin-top:6px; width:18px; height:18px; } /* make radio inputs look like small squares to match scan */ .priority-cell input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 18px; height: 18px; border: 1px solid #000; display: inline-block; border-radius: 2px; margin: 0; position: relative; } .priority-cell input[type="radio"]:checked { background:#000; } .priority-section input[type="radio"]:checked { background: #000000; } .priority-label-text { font-size: 12px; } button { padding: 8px 14px; border: 1px solid #000000; border-radius: 0; background: #000000; color: #ffffff; font-size: 13px; font-weight: 700; cursor: pointer; margin-top: 12px; } button:hover { background: #333; } .reset-btn { background: #666; border-color: #666; margin-left: 10px; } .reset-btn:hover { background: #444; } .success { background: #e8f5e9; color: #1f5d32; border: 1px solid #9ec7a6; padding: 12px 14px; margin-bottom: 18px; border-radius: 0; } @media print { button, .reset-btn { display: none !important; } body { padding: 0; } .container { border: none; padding: 6mm; } input, select { border-bottom: 1px solid #000; } } @media (max-width: 700px) { body { padding: 12px; } .container { padding: 20px 18px; } .form-row { grid-template-columns: 1fr; } .priority-section { gap: 12px 18px; } .priority-section label { width: 100%; } button { width: 100%; margin-bottom: 10px; } .reset-btn { margin-left: 0; } }