* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; color: #17385f; background: #f3f5f9; font: 16px Arial, sans-serif; }
[hidden] { display: none !important; }
.statement-heading { display: flex; align-items: center; gap: 14px; background: white; border-top: 6px solid #ffe328; border-bottom: 1px solid #d5e0eb; padding: 16px 24px; }
.statement-heading h1 { margin: 0; font-size: 24px; color: #0b5aa0; }
.statement-heading a { display: grid; place-items: center; width: 40px; height: 40px; color: #0b5aa0; }
.statement-toolbar { padding: 20px 24px; display: flex; align-items: end; flex-wrap: wrap; gap: 16px; background: white; border-bottom: 1px solid #d5e0eb; }
.statement-toolbar label { display: grid; gap: 7px; font-size: 14px; font-weight: bold; }
.custom-date-input { width: 150px; max-width: 100%; height: 42px; border: 1px solid #aebfd0; border-radius: 3px; padding: 8px; background: white; color: #17385f; font: inherit; }
#StatementZoom { width: 110px; height: 42px; border: 1px solid #aebfd0; border-radius: 3px; background: white; color: #17385f; padding: 8px; font: inherit; }
.statement-toolbar button { border: 0; border-radius: 3px; padding: 0 18px; height: 42px; background: #20a6bc; color: white; font: bold 14px Arial, sans-serif; cursor: pointer; }
.statement-toolbar button:hover:not(:disabled) { background: #0b5aa0; }
.statement-toolbar button:disabled { opacity: .45; cursor: default; }
.statement-toolbar .icon-button { width: 44px; padding: 0; flex: 0 0 44px; background: #0b5aa0; font-size: 21px; }
.statement-toolbar label[for="StatementZoom"] { margin-left: auto; }
#StatementStatus { margin: 16px 24px; font-size: 14px; }
#StatementStatus:empty { display: none; }
#StatementPreview { display: block; width: 100%; height: calc(100vh - 180px); min-height: 480px; border: 0; }
:focus-visible { outline: 3px solid #0b5aa0; outline-offset: 3px; }
@media(max-width: 520px) {
  .statement-heading { padding: 12px 14px; }
  .statement-toolbar { padding: 14px; gap: 12px; }
  .statement-toolbar label { width: calc(50% - 6px); }
  .statement-toolbar label[for="StatementZoom"] { width: auto; margin-left: 0; }
  .custom-date-input { width: 150px; }
  #StatementPreview { height: calc(100vh - 264px); }
}