/* Here you can add your CSS classes */

body
  {margin:0; background-color:#F4F7FB; color:#1A1A1A;
   font-family:"Segoe UI", Tahoma, sans-serif; font-size:16px}

.dfm_page
  {max-width:560px; margin:0 auto; padding:16px; box-sizing:border-box}

.dfm_title
  {margin:8px 0 0 0; color:#0047AB; font-size:1.6em}

.dfm_owner
  {margin:0 0 16px 0; font-size:1.2em; font-style:italic}

.dfm_owner a
  {color:#0047AB}

.dfm_label
  {display:block; margin:12px 0 4px 0; font-weight:bold}

.dfm_group
  {display:flex; gap:8px}

.dfm_input
  {flex:1; width:100%; min-width:0; box-sizing:border-box; padding:8px;
   font-size:16px; font-family:Consolas, monospace;
   border:1px solid #9AA9C0; border-radius:4px; background-color:#FFFFFF}

.dfm_input[readonly]
  {background-color:#EEF2F8}

.dfm_top
  {align-items:flex-start}

.dfm_button
  {flex:none; padding:8px 14px; font-size:16px; cursor:pointer;
   color:#FFFFFF; background-color:#0047AB; border:none; border-radius:4px}

.dfm_button:hover
  {background-color:#003580}

.dfm_status
  {min-height:1.4em; margin-top:16px; color:#0047AB; font-weight:bold}

.dfm_footer
  {margin:32px 0 8px 0; text-align:center; font-size:1em; color:#5A6B85}

.dfm_footer a
  {color:#0047AB}

.dfm_wide
  {max-width:960px}

.dfm_drop
  {display:block; margin-top:8px; padding:28px 16px; text-align:center; cursor:pointer;
   color:#0047AB; background-color:#FFFFFF; border:2px dashed #29ABE2; border-radius:8px}

.dfm_drop:hover, .dfm_drop.dfm_over
  {background-color:#E6F4FB; border-color:#0047AB}

.dfm_drop_text
  {font-weight:bold}

.dfm_file
  {display:block; margin:12px auto 0 auto; max-width:100%; font-size:14px}

.dfm_buttons
  {display:flex; gap:8px; margin:8px 0}

.dfm_button:disabled
  {cursor:default; background-color:#9AA9C0}

.dfm_text
  {resize:vertical; white-space:pre; overflow:auto; overflow-wrap:normal;
   font-size:14px; line-height:1.4; min-height:240px}

.dfm_note
  {margin:8px 0 0 0; font-size:0.9em; color:#5A6B85}