/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/*	--------------------------------------------------
=Design Tokens (CSS Custom Properties)
-------------------------------------------------- */

:root {
  /* Brand greens */
  --color-brand-green:       #70A032;
  --color-brand-green-light: #84b84b;
  --color-brand-green-pale:  #cfe5ad;
  --color-brand-green-bg:    #E0EBD0;

  /* Interactive */
  --color-link:        #3597b2;
  --color-link-hover:  #007d9a;
  --color-button-blue: #2D9FBE;

  /* Text */
  --color-text-base:       #333;
  --color-text-medium:     #555;
  --color-text-muted:      #777;
  --color-text-faint:      #999;
  --color-text-very-faint: #aaa;

  /* Backgrounds / borders */
  --color-bg-light:      #eee;
  --color-bg-lighter:    #f5f5f5;
  --color-border:        #ccc;
  --color-border-light:  #ddd;
  --color-border-subtle: #eee;
  --color-input-dim:     #bbb;

  /* Semantic — up / down / neutral */
  --color-positive: #3da72e;
  --color-negative: #bf1f11;
  --color-neutral:  #999;

  /* Typography scale */
  --font-size-xs:          9px;  /* compact UPPERCASE labels: nav trader, order ticket, trade button */
  --font-size-sm:         11px;  /* secondary / caption text: abstracts, stats, sublabels, captions */
  --font-size-body:       12px;  /* normal content: broker buttons, trade info, portfolio tables */
  --font-size-heading-xs: 14px;  /* sub-section h5-level headings and form field labels */

  /* Surface */
  --color-white:            #fff;
  --color-black:            #000;
  --color-dark-surface:     #464646;
  --color-nav-bg:           #8f8f8f;
  --color-sorted-header-bg: #222;
}

/*	--------------------------------------------------
=Global Reset
-------------------------------------------------- */

/*html,*/
body {
  min-width: min-content;
  margin:0;
  /* padding:0; */
}

h1,h2,h3,h4,h5,h6,
p,blockquote,img,a,
pre,abbr,acronym,address,cite,code,del,dfn,q,s,samp,small,strike,strong,em,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,button,
table,caption,tbody,tfoot,thead,tr,th,td {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  line-height:1;
  font-family:inherit;
  max-width: inherit;
}

/* table reset merged into =Tables section below; ol/ul reset merged into =Typography section below */
q:before,
q:after,
blockquote:before,
blockquote:after { content:""; }

.print-info {
  display:none;
  }

  /* -------------------------------------------- */
  /*                   BUTTONS                    */
  /* -------------------------------------------- */

button,
.button,
.btn {
  display: inline-block;
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(228,228,228,1) 55%, rgba(228,228,228,1) 100%);
  min-width: max-content;
  width: max-content;
  padding: 5px 11px 5px 11px;
  border-radius: 5px;
  text-transform: uppercase;
  font-size: 9px;
  color: var(--color-button-blue);
  -webkit-text-fill-color: var(--color-button-blue);
  -webkit-text-stroke-width: 0.05em;
  -webkit-text-stroke-color: var(--color-button-blue);
  box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.75);
  cursor: pointer;
  text-decoration: none;
}

button:hover,
.button:hover,
.btn:hover {
  background: rgb(255,255,255);
}

button:active,
.button:active,
.btn:active {
          box-shadow: none;
          filter: brightness(1.1);
  border: none;
}

button.blue,
.button.blue,
.btn.blue {
  background: rgb(68,170,197);
  background: linear-gradient(180deg, rgba(68,170,197,1) 0%, rgba(41,142,170,1) 75%, rgba(41,142,170,1) 100%);
  color: var(--color-white);
  -webkit-text-fill-color: var(--color-white);
  -webkit-text-stroke-width: 0.02em;
  -webkit-text-stroke-color: var(--color-white);
}

button.blue:hover,
.button.blue:hover,
.btn.blue:hover {
  background: rgb(68,170,197);
}

button.red,
.button.red,
.btn.red {
  background: rgb(217,58,33);
  background: linear-gradient(180deg, rgba(217,58,33,1) 0%, rgba(203,44,19,1) 50%, rgba(190,32,6,1) 100%);
  color: var(--color-white);
  -webkit-text-fill-color: var(--color-white);
  -webkit-text-stroke-width: 0.02em;
  -webkit-text-stroke-color: var(--color-white);
}

button.red:hover,
.button.red:hover,
.btn.red:hover {
  background: rgb(217,58,33);
}

button.green,
.button.green,
.btn.green {
  background: rgb(146,183,88);
  background: linear-gradient(180deg, rgba(146,183,88,1) 0%, rgba(130,167,72,1) 50%, rgba(119,156,60,1) 100%);
  color: var(--color-white);
  -webkit-text-fill-color: var(--color-white);
  -webkit-text-stroke-width: 0.02em;
  -webkit-text-stroke-color: var(--color-white);
}

button.green:hover,
.button.green:hover,
.btn.green:hover {
  background: rgb(146,183,88);
}

button.black,
.button.black,
.btn.black {
  background: var(--color-black);
  color:  var(--color-white);
  -webkit-text-fill-color: var(--color-white);
  -webkit-text-stroke-width: 0.02em;
  -webkit-text-stroke-color: var(--color-white);
  border: 1px solid var(--color-black);
}

button.black:hover,
.button.black:hover,
.btn.black:hover {
  background: var(--color-border);
  color: var(--color-black);
  -webkit-text-fill-color: var(--color-black);
  -webkit-text-stroke-width: 0.05em;
  -webkit-text-stroke-color: var(--color-black);
}

button.small,
.button.small,
.btn.small {
  min-width: 10px;
  padding: 6px 10px 6px 10px;
  font-size: 10px;
}

button.tiny,
.button.tiny,
.btn.tiny {
  min-width: 10px;
  padding: 3px 7px 3px 7px;
  font-size: 8px;
}

button.med,
.button.med,
.btn.med {
  padding: 8px 14px 7px 14px;
  font-size: 10px;
}

/* -------------------------------------------- */


/*	--------------------------------------------------
=Links
-------------------------------------------------- */

a,a:visited {
  color:var(--color-link);
  text-decoration:underline;
  outline:0;
  font-style:inherit;
  font-weight:inherit;
  }
a:hover { color:var(--color-link-hover); }

h1 a,
h1 a:visited,
h2 a,
h2 a:visited,
h3 a,
h3 a:visited {
  color:var(--color-text-base);
  text-decoration:none;
  }
h4 a,
h4 a:visited,
h5 a,
h5 a:visited {
  text-decoration:none;
  line-height:inherit;
  }
h3 a:hover { color:auto; }
h4 a:hover,
h5 a:hover { text-decoration:underline; }
p a,
p a:visited { line-height:inherit; }

a.nav_link,
a.nav_link:visited { text-decoration:underline; }
a.nav_link:hover { text-decoration:none; }

/*	--------------------------------------------------
=Typography
-------------------------------------------------- */

h1,h2,h3,h4,h5,h6 {
  color:var(--color-text-base);
  font-weight:bold;
  }
h1 {
  font-size:2.4em;
  line-height:1.2;
  color:var(--color-text-base);
  }
h2 {
  font-size:1.8em;
  line-height:1.25;
  margin:0 0 9px 0;
  }
h3 {
  font-size:1.5em;
  line-height:1;
  margin:0;
  padding:0px 0 7px 0;
  text-transform:uppercase;
  position:relative;
  }

h1.small,
h2.small,
h3.small { text-transform:uppercase; }
h1.small { font-size:1.8em; }
h2.small { font-size:1.4em; }
h3.small { font-size:1.2em; }

div.more-hack {
  font-size: 9px;
  /* float applies when more-hack is not used in an a.more wrapper */
  float: right;
}

h3.block {
  padding-top: 8px;
  padding-right: 10px;
  margin-bottom: 14px;
  border-radius: 5px;
  display: flex;
          flex-direction: row;
}

h3 a.more {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  margin-top: auto;
  margin-bottom: auto;
  padding-right: 5px;
  margin-left: auto;
}

h3.block.green {
  background: var(--color-brand-green-bg);
  border-left: 12px solid var(--color-brand-green-light);
  padding-left: 5px;
}

h3.block.green a.more { color:var(--color-text-muted); }

h3.block.black {
  color:var(--color-white);
  background: var(--color-black);
  border-left: 12px solid var(--color-brand-green-light);
  padding-left: 5px;
}

h3.block.black a.more { color:var(--color-border); }

h4 {
  font-size:var(--font-size-sm);
  display:block;
  background:#eaeaea;
  height:12px;
  padding:5px 0 5px 7px;
  font-weight:normal;
  color:#797979;
  margin-bottom:12px;
  position:relative;
  }
h4 a {
  font-size:var(--font-size-sm);
  position:absolute;
  right:10px;
  top:5px;
  color:var(--color-text-faint);
  text-decoration:underline;
  }

h5 {
  font-size:1.2em;
  line-height:1.285714;
  }
h6 {
  font-size:1.0em;
  line-height:1.5;
  }

p {
  font-size:var(--font-size-body);
  line-height:1.5;
  margin:0 0 1.2em;
  color:var(--color-text-base);
  /* max-width: fit-content; */
  }

em {
  font-style:italic;
  font-weight:inherit;
  line-height:inherit;
  color:var(--color-text-muted);
  }
strong {
  font-style:inherit;
  font-weight:bold;
  line-height:inherit;
  }

p small {
  font-size:91.666667%;
  line-height:1.616161;
  color:var(--color-text-muted);
  }
h1 small {
  font-size:66.666667%;
  color:var(--color-text-muted);
  }

h1.muted,
h2.muted,
h3.muted,
h4.muted,
h5.muted { font-weight:normal; }

hr {
  border:0;
  border-top:1px solid var(--color-border-light);
  clear:both;
  margin:11px 0 12px;
  height:0;
}
hr.spacious { margin:26px 0 27px; }

address {
  color:var(--color-text-base);
  font-size:1.2em;
  line-height:1.5;
  margin:0 0 1.5em;
  }

code,pre {
  font:1.2em/1.6 "Monaco","Courier New","Courier",monospace;
  color:var(--color-text-base);
  }

blockquote {
  margin-top:10px;
  font-size:var(--font-size-sm);
  }

/*	--------------------------------------------------
=Lists
-------------------------------------------------- */

dt {
  font-size:1.2em;
  line-height:1.5;
  font-weight:bold;
  color:var(--color-text-base);
  }
dd {
  margin:0 0 1.5em;
  font-size:1.2em;
  line-height:1.5;
  }

ol,ul { list-style:none; margin:0 0 1.8em 2.6em; }
ol { list-style:decimal; }

ul {
  list-style:square;
  /*
  min-width: max-content;
  */
}

li {
  font-size:1.2em;
  line-height:1.5;
  }
li ol,li ul { margin:0 2em; }
li li { font-size:1em; }

/*	--------------------------------------------------
=Tables
-------------------------------------------------- */

table {
  /* width:100%; */
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 0 1.8em;
  }
thead,
ul li.thead {
  background:var(--color-text-medium);
  cursor:pointer;
  }
thead.nopoint { cursor:default; }
td,
th,
ul li.thead span {
  font-size:1.2em;
  line-height:1.5;
  padding:2px 3px;
  }
th,
ul li.thead span {
  font-weight:bold;
  color:var(--color-white);
  }
tr.alt td { background:var(--color-bg-lighter); }
tr { border-bottom:solid 1px var(--color-bg-light); }

table a,
table a:visited { text-decoration:none; }

th.headerSortUp { background:url(/images/column_sort_up.gif) no-repeat right var(--color-sorted-header-bg); }
th.headerSortDown { background:url(/images/column_sort_down.gif) no-repeat right var(--color-sorted-header-bg); }

th.right {
  text-align:right;
  background-position:left;
  }
td.right { text-align:right; }

table.sortable {
  width: 100%;
}

table.sortable tbody tr:hover {
  background: var(--color-bg-light);
}

table.light {
  margin:0 0 28px 0;
  padding:0;
  border:none;
  width: 100%;
}

table.last-in-line { margin-bottom:0; }
table.light tr { border-bottom:solid 1px var(--color-bg-light); }
table.light td {
  padding-left:0;
  border:none;
}
table.light td.right {
  text-align:right;
  font-weight:bold;
  }

/*

UP/DOWN Arrows on Price/% Changes

*/


span.up {
    font-weight:bold;
    color:var(--color-positive);
    white-space: nowrap;
}

span.down {
  font-weight:bold;
  color:var(--color-negative);
  white-space: nowrap;
}

span.no_change {
  font-weight:bold;
  color:var(--color-text-faint);
  white-space: nowrap;
}

span.no_change::before,
span.up::before,
span.down::before {
  content: '\27A4';
  display: inline-block;
  font-size: 0.8em;
  /* margin-right: -0.3em; */
}

span.no_change::before,
span.up::before {
  transform: rotateZ(-90deg) scaleY(1.4);
  padding-left: 0.3em;
}

span.down::before {
  transform: rotateZ(90deg) scaleY(1.4);
  padding-right: 0.3em;
}

span.no_change::before {
  color: #9990;
}


span.high {
  font-weight:bold;
  color:var(--color-positive);
}
span.low {
  font-weight:bold;
  color:var(--color-negative);
}

/*
col { border-right:solid 1px var(--color-border-light); }
*/

tfoot tr td {
  background:var(--color-bg-light);
  font-weight:bold;
  }

/*	--------------------------------------------------
=Forms
-------------------------------------------------- */

form {
  margin:0 0 1.5em;
  text-align:left;
  }
form input { clear:both; }

div.form_block {
  display:block;
  padding:8px;
  margin-bottom:14px;
  margin-top:8px;
  }
div.form_block span {
  margin:0;
  padding:0;
  font-size:var(--font-size-body);
  }
div.form_block span a { color:var(--color-black); }
div.form_block.error {
  border-left:solid 10px red;
  background:#f9c5c5;
  color: var(--color-black);
  font-size:14px;
  font-weight: bold;
}
div.form_block.info {
  border-left:solid 10px blue;
  background:#d0e8f7;
  color: var(--color-black);
  font-size:14px;
  font-weight: bold;
}
div.form_block.warn {
  border-left:solid 10px orange;
  background: lightgoldenrodyellow;
  color: var(--color-black);
  font-size:14px;
  font-weight: bold;
}
div.form_block.success {
  border-left:solid 10px green;
  background: #d1ffd1;
  color: var(--color-black);
  font-size:14px;
  font-weight: bold;
}


input[type=text],
input[type=password],
textarea {
  background:var(--color-white);
  display:block;
  margin:0 0 1em;
  padding:3px 4px;
  font:1.2em/1.5 Helvetica Neue,"Arial",Helvetica,Verdana,sans-serif;
  text-shadow:0 0 0 var(--color-black);
  border:1px solid var(--color-border-light);
  border-top-color:var(--color-text-muted);
  border-left-color:var(--color-text-muted);
  color:var(--color-text-medium);
  display:inline;
  }
input.large.input { width:90%; }

form input[type=text] {
  width:200px;
  margin-right:8px;
  }
form input[type=password] {
  width:200px;
  margin-right:8px;
  }

form label {
  position:relative;
  top:-3px;
  margin-top:6px;
  font-size:var(--font-size-body);
  font-weight:bold;
  line-height:1.5;
  cursor:pointer;
  }
form input[type=text] + label { top:-3px; }
form label.above { top:0px; }

form textarea {
  clear:both;
  width:400px;
  height:120px;
  }

form p { margin-bottom:4px; }

div.form_error {
  display:inline-block;
  height:16px;
  font-size:var(--font-size-sm);
  padding:5px 8px 0px 14px;
  font-size:var(--font-size-sm);
  color:var(--color-white);
  background:url(/images/inline_error_background.gif) no-repeat top left #cb2c13;
  position:relative;
  left:4px;
  bottom:5px;
  border-radius:4px;
}

div.form_error a {
  color:var(--color-white);
  text-decoration:underline;
  }

/* =Utilities
   Single-purpose helpers extracted from inline styles (Pass 5+).
   !important is intentional — utility classes must win over element rules
   (e.g. the base "tr { border-bottom: ... }" in this file).
---------------------------------------------------------------- */

/* Suppress all borders. Applied to <table>, <col>, <tr>, <td> elements
   that previously used style="border: none;" / style="border: 0px;" */
.no-border { border: none !important; }

/* Error-red text. !important beats div.form_error { color: white } (0-1-1)
   and any other container colour rule. */
.text-error { color: #cd1e00 !important; }

/* Bold error heading used as the title inside div.form_block.error / .info.
   !important beats the div.form_block span { font-size: 12px } reset (0-1-1). */
.message-error-inline { font-size: 14px !important; font-weight: bold !important; color: #cd1e00 !important; }

/* Link-blue override for <a> inside h3/p on static content pages (about/,
   help/). These links are otherwise suppressed to color-text-base by the
   "h3 a { color: var(--color-text-base) }" rule (specificity 0-0-2).
   Class specificity 0-1-0 beats that without needing !important. */
.link-blue { color: #007d9a; }

/* Glossary A-Z section headings. h2 has no colour rule in CSS so no
   !important is needed — class wins over bare element styles. */
.glossary-letter { color: #007d9a; text-decoration: underline; }

/* Center-aligned text. No !important needed — no competing element rule
   sets text-align on p/h4/div. */
.text-center { text-align: center; }
.content-pad { padding: 15px 30px !important; }
/* Remove right border on icon/separator columns and cells. No !important needed —
   the only competing rule (col { border-right: solid 1px }) is commented out. */
.no-border-right { border-right: none; }

/* Compact filter-row inputs (report page). !important beats input[type=text]
   (0-1-1) which sets padding: 3px 4px; margin: 0 0 1em. */
.reset-input { padding: 0 !important; margin: 0 !important; }

/* Generic spacing utility. Class (0-1-0) beats any bare element margin rule. */
.mb-10 { margin-bottom: 10px; }

/* Typography utilities. Class (0-1-0) beats element selectors (0-0-N). */
.text-sm { font-size: var(--font-size-body); }
.text-underline { text-decoration: underline; }
.font-bold { font-weight: bold; }
/* Muted small print — date stamps and character-count hints.
   #777 = var(--color-text-muted). No !important needed on span elements. */
.text-faint-sm { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Comment thread layout (blog/comment, blog/view, league/comment, league/view).
   Same pattern repeated across all four templates — extracted together. */
/* Wrapper <table> and borderless submit-row <td> */
.comment-table { border: none; margin-top: 10px; margin-bottom: 10px; padding: 10px; }
/* Comment display row <td> with bottom separator line */
.comment-cell { padding: 10px; margin-top: 10px; margin-bottom: 10px; border-bottom: solid 1px var(--color-border-light); }
/* Post-comment textarea row <td> with light gray background */
.comment-post-bg { padding: 10px; margin-top: 10px; margin-bottom: 10px; background-color: var(--color-border-light); }
/* Commenter username label. Normalises color:black → body text (#333). */
.comment-username { font-size: 13px; font-weight: bold; }
/* Very small text (11px). Pairs with .text-faint-sm which adds muted colour. */
.text-xs { font-size: var(--font-size-sm); }

/* Portfolio percentage-change colour indicators (no arrow, unlike span.up/span.down).
   Use on the <span> wrapping pct_price_change / pct_worth_change values in portfolio tables. */
.pct-up   { font-weight: bold; color: var(--color-positive); }
.pct-down { font-weight: bold; color: var(--color-negative); }
.pct-flat { font-weight: bold; color: var(--color-text-faint); }

/* Security list movie-poster thumbnail. Matches .poster-background.sml (layout.css). */
.thumb-sm { width: 47px; height: 68px; }

/* Layout utilities */
.clear-both { clear: both; }
.float-left  { float: left; }
.float-right { float: right; }

/* Admin: encrypt-passwords script status indicator */
#encrypt_passwords #status.status-running  { color: blue; }
#encrypt_passwords #status.status-done     { color: magenta; }
#encrypt_passwords #status.status-error    { color: red; }
#encrypt_passwords #status.status-stopped  { color: black; }