/* G4PACS customer portal - same 2002 chrome as the site */
:root { --navy:#003366; --blue:#6699CC; --pale:#E8EEF4; --silver:#C0C0C0; --orange:#FF6600; --link:#0000CC; --visited:#800080; --ink:#000; --paper:#fff; --bg:#7F99B2; }
* { box-sizing: border-box; }
html { background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%237F99B2'/%3E%3Crect width='1' height='1' fill='%23708AA3'/%3E%3C/svg%3E"); }
body { margin:0; padding:0 16px; font:12px/1.5 Verdana, Tahoma, Arial, sans-serif; color:var(--ink); background:transparent; }
a { color:var(--link); } a:visited { color:var(--visited); } a:hover { color:#f00; }
a:focus-visible, button:focus-visible, input:focus-visible { outline:2px dotted var(--ink); outline-offset:1px; }
h1,h2,h3 { font-family:"Trebuchet MS", Arial, sans-serif; margin:0; }

.page { width:760px; max-width:100%; margin:8px auto 16px; background:var(--paper); border:1px solid #333; box-shadow:4px 4px 0 #556B85; }
.topstrip { display:flex; justify-content:space-between; flex-wrap:wrap; gap:2px; background:var(--pale); border-bottom:1px solid var(--silver); padding:2px 8px; font-size:10px; color:#333; }

.banner { display:flex; justify-content:space-between; align-items:center; min-height:86px; background:linear-gradient(to bottom,#1F4E8C 0%,var(--navy) 45%,#002244 100%); color:#fff; }
.logo { display:flex; align-items:center; gap:10px; padding:8px 14px; text-decoration:none; color:#fff; }
.logo svg { width:64px; height:64px; flex:none; }
.logo .word { display:block; font-family:"Arial Black", Arial, sans-serif; font-weight:900; font-size:34px; letter-spacing:-1px; line-height:1; text-shadow:2px 2px 0 #001122; }
.logo .word span { color:#FFCC00; }
.logo .strap { display:block; font:italic 13px "Times New Roman", Times, serif; color:#CCE0F5; margin-top:3px; }
.banner-right { display:flex; flex-direction:column; align-items:flex-end; gap:6px; padding:8px 10px; font-size:10px; color:#CCE0F5; }
.banner-right b { color:#FFCC00; }
.lock { display:inline-block; width:9px; height:11px; border:2px solid #FFCC00; border-radius:3px 3px 1px 1px; border-bottom-width:6px; vertical-align:middle; }

.btn { font:bold 10px Verdana, sans-serif; color:#000; padding:2px 8px; border:1px solid; border-color:#fff #555 #555 #fff; background:linear-gradient(to bottom,#fff 0%,#E0E0E0 50%,#C8C8C8 51%,#F0F0F0 100%); cursor:pointer; }
.btn:active { border-color:#555 #fff #fff #555; }

.nav { display:flex; flex-wrap:wrap; background:linear-gradient(to bottom,#8AB4E0 0%,var(--blue) 50%,#4C7FB5 51%,#5A8CC0 100%); border-top:1px solid #A8C8E8; border-bottom:2px solid #234; padding:0; margin:0; list-style:none; }
.nav li { flex:1; }
.nav a { display:block; text-align:center; padding:5px 4px; font:bold 11px Verdana, Tahoma, sans-serif; color:#fff; text-decoration:none; border-right:1px solid #3A6B9E; border-left:1px solid #A8C8E8; text-shadow:1px 1px 0 #234; }
.nav a:visited { color:#fff; }
.nav a:hover, .nav a.on { background:linear-gradient(to bottom,#FFE680 0%,#FFCC00 50%,#E6A800 51%,#FFD633 100%); color:var(--navy); text-shadow:none; }


.cols { display:grid; grid-template-columns:170px 1fr; }
.cols.single { grid-template-columns:1fr; }
.side, .main { padding:10px; min-width:0; }
.side { background:var(--pale); border-right:1px solid var(--silver); }
.login-wrap { max-width:420px; }

.box { border:2px outset var(--silver); background:var(--paper); margin-bottom:12px; font-size:11px; }
.box.quiet { border-color:#ddd; }
.box h3 { font:bold 11px Verdana, Tahoma, sans-serif; color:#fff; background:linear-gradient(to right,var(--navy),var(--blue)); padding:3px 6px; }
.box .in { padding:6px 8px; }
.box p { margin:0 0 8px; }
.sidenav { list-style:none; margin:0; padding:0; }
.sidenav li { border-bottom:1px solid #fff; }
.sidenav a { display:block; padding:3px 4px 3px 14px; font-size:11px; text-decoration:none; color:var(--navy); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Cpath d='M0 0l7 3.5L0 7z' fill='%23FF6600'/%3E%3C/svg%3E") no-repeat 3px 6px; }
.sidenav a:hover { background-color:#fff; text-decoration:underline; }

.form label { display:block; margin-top:5px; font-size:10px; }
.form input { width:100%; font:12px Verdana, sans-serif; border:1px solid #7F9DB9; padding:2px 4px; background:#fff; }
.form .btn { margin-top:8px; }
.btn-row { display:flex; gap:6px; flex-wrap:wrap; }
.form input:disabled { background:#eee; color:#555; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
@media (max-width:720px) { .two { grid-template-columns:1fr; } }
.err { color:#c00; font-weight:bold; margin:0 0 6px; }

.main h1 { font-size:20px; color:var(--navy); border-bottom:2px solid var(--blue); padding-bottom:3px; margin-bottom:10px; }
.main h2 { font-size:14px; color:var(--navy); margin:16px 0 5px; padding-left:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect x='1' y='1' width='10' height='10' fill='%236699CC' stroke='%23003366'/%3E%3Crect x='3' y='3' width='4' height='4' fill='%23fff'/%3E%3C/svg%3E") no-repeat 0 3px; }
.main p { margin:0 0 8px; }

table.spec { width:100%; border-collapse:collapse; font-size:11px; margin:6px 0 4px; border:1px solid var(--silver); }
table.spec th, table.spec td { padding:4px 6px; border:1px solid #ddd; text-align:left; vertical-align:middle; }
table.spec th { background:var(--pale); color:var(--navy); font-weight:bold; }
table.spec tr:nth-child(even) td { background:#F7F9FB; }
table.kv th { width:32%; }
.key { display:inline-block; font:bold 14px "Courier New", Courier, monospace; letter-spacing:1px; background:#000; color:#0F0; padding:2px 8px; border:1px inset #666; margin-right:6px; }

.lamp { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; background:#999; border:1px solid #555; vertical-align:middle; }
.lamp.active, .lamp.paid, .lamp.trial { background:#33CC33; border-color:#080; }
.lamp.past_due, .lamp.open { background:#FFCC00; border-color:#960; }
.lamp.canceled, .lamp.void { background:#C00; border-color:#600; }

.checks { list-style:none; padding:0; margin:0; }
.checks li { padding-left:16px; margin:2px 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M1 5.5l3 3 6-7' fill='none' stroke='%23009900' stroke-width='2'/%3E%3C/svg%3E") no-repeat 0 3px; }

.tip { background:#FFFFCC; border:1px solid #CCCC66; padding:6px 8px; font-size:11px; margin:10px 0; }
.tip b { color:#996600; }
.tip.ok { background:#E6F7E6; border-color:#9C9; } .tip.ok b { color:#060; }

.cta-row { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 4px; }
.pill { display:inline-block; font:bold 11px Verdana, Tahoma, sans-serif; color:#fff; padding:5px 14px; border-radius:12px; border:1px solid #1B4570; background:linear-gradient(to bottom,#8FBBE8 0%,#4E86C2 48%,#2B62A0 52%,#4A80BC 100%); text-shadow:1px 1px 0 #1B4570; box-shadow:1px 1px 2px rgba(0,0,0,.4); cursor:pointer; }
.pill:hover { color:#FFFF99; }
.pill.orange { border-color:#994400; background:linear-gradient(to bottom,#FFB366 0%,#FF7F1A 48%,#E05E00 52%,#FF8C2A 100%); text-shadow:1px 1px 0 #994400; }

.ok-line { color:#060; font-weight:bold; }
table.poll { width:100%; border-collapse:collapse; font-size:11px; margin:8px 0 4px; }
table.poll th { text-align:left; font-weight:bold; width:26%; padding:5px 4px; vertical-align:middle; }
table.poll th small { font-weight:normal; color:#555; }
table.poll td { padding:5px 4px; vertical-align:middle; }
table.poll td.pct { width:90px; white-space:nowrap; }
table.poll tr.mine th { color:var(--navy); }
table.poll tr:nth-child(even) { background:#F4F8FC; }
.bar { height:18px; border:2px outset; box-sizing:border-box; background:#ccc; }
.bar.c0 { background:#FF6600; border-color:#FFB380 #994400 #994400 #FFB380; }
.bar.c1 { background:#0066CC; border-color:#80B3E6 #003D7A #003D7A #80B3E6; }
.bar.c2 { background:#339933; border-color:#99CC99 #1F5C1F #1F5C1F #99CC99; }
.bar.c3 { background:#CC0000; border-color:#E68080 #7A0000 #7A0000 #E68080; }
.total { font-size:11px; border-top:1px solid var(--silver); padding-top:6px; margin:4px 0 8px; }
.form .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.footer { border-top:2px solid var(--navy); background:var(--pale); padding:8px 10px; font-size:10px; color:#333; text-align:center; }
.footer p { margin:3px 0; }

@media (max-width:720px) {
  .cols { grid-template-columns:1fr; }
  .side { border-right:0; border-bottom:1px solid var(--silver); }
  .banner { flex-direction:column; align-items:flex-start; }
  .banner-right { align-items:flex-start; }
  .nav li { flex:1 1 33%; }
  .page { box-shadow:none; overflow:hidden; }
  table.spec { display:block; overflow-x:auto; }
}