body { background: #1A1A1A; color: #BABABA; font-family: 'Fira Code', monospace; font-size: 17px; position: relative; }
.container { background: #111; padding: 2em; min-height: 100%; }
h1, .h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5em; }
h2, .h2 { font-size: 1.25rem; margin: 0; margin-bottom: 0.5em; font-weight: 700; }
span { cursor: default; }

.ja { font-family: 'Noto Sans JP', sans-serif; }
fg:before { content: attr(t); display: block; font-size: 50%; text-align: start; line-height: 1.5; }
fg {display: inline-block; text-indent: 0px; line-height: normal; -webkit-text-emphasis: none; text-emphasis: none; text-align: center; line-height: 1; }

svg.bi { width: 1rem; height: 1.5rem; }

.btn-clear { color: inherit; background: none; }
  .btn-clear:hover { color: inherit; }
  
.form-minimal input { background: none; color: inherit; font-family: inherit; border: none; border-bottom: 1px solid #444; padding: 5px;}

.navbar { background-color: #510fbd; position: fixed; top: 0; left: 0; width: 100%; padding: 0 1rem; z-index: 99; }
.navbar .navbar-toggler { font-size: 1rem; padding: 0.1rem 0.4rem; }
.nav-offset { height: 64px; }

ul.nav { cursor: default; } 
  ul.nav > li { display: inline-block; margin-right: 7px; }
    ul.nav > li > a { color: #DDD; padding: 0.5rem;  }
  ul.nav a.active { color: white; font-weight: 700; }
    ul.nav > li > a:hover { text-decoration: none; color: white; }

.now-hr { width: 100%; text-align: center; border-bottom: 1px solid #888; line-height: 0.1em; margin: 10px 0 16px; }
  .now-hr > span { color: #888; background: #1A1A1A; padding:0 10px; }

.button-row { text-align: center; }
  .button-row .btn { margin: 4px; white-space: nowrap; padding: 4px 10px; }

.btn-primary { background-color: #510fbd; border-color: #460ea2; }
  .btn-primary:hover { background-color: #3a1b6d; border-color: #2a0f56; }
  .btn-primary:focus, .btn-primary.focus { background-color: #641ade; box-shadow: 0 0 0 0.2rem rgba(100, 24, 224, 0.5) }
  .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { background: #641ade; border-color: #460ea2; }
  .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(100, 24, 224, 0.5) }
.btn-secondary { background-color: #1a31d2; border-color: #0c21b1 }
  .btn-secondary:hover { background-color: #192894; border-color: #0e1865; }
  .btn-secondary:focus, .btn-secondary.focus { box-shadow: 0 0 0 0.2rem rgb(26, 49, 210, 0.5); }
  .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { background: #0d2bfb; border-color: #102ade; }
  .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgb(26, 49, 210, 0.5); }
.btn-filter { padding: 0; line-height: 1em; }
  .btn-filter:hover { color: white; }

.popover { max-width: 375px; text-align: center; }

/* Preloader Overlay */
.overlay { display:flex; z-index: 50; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); margin-left: 0; }
.overlay-item { background: rgba(81,15,189,0.9); border-radius: 4px; }
  .overlay-item > .sub-text { float:right; position: relative; top: 1px; font-size: 1.25rem; }

/* Groups */
.group {  max-width: 350px; margin: 0 auto; padding-top: 2rem; }
  .group > h2 { text-align: center; }
.group-part { display: inline-block; width: 48%; text-align: center; }

/* Tables */
.table { background-color: inherit; color: inherit;  }
  .table td { padding: 0.2rem; }
  .table tr { white-space: nowrap; }
    .table-shares tr:last-child > td { font-weight: bold; padding-top: 1.5em; }


/* Toasts */
#toast-wrap { position: fixed; bottom: 0; left: 0; padding: 10px; width: 100%; z-index: 50; margin: 0 auto; pointer-events: none; }
.toast { margin: 1em auto; pointer-events: all; color: white; border-color: black; }
  .toast .toast-header { background: rgba(0,0,0,0.8); padding-right: 2px; color: white; border-radius: 2px; border-color: black; font-size: 16px; }
  .toast .close { padding: 0 10px; text-shadow: none; }
    .toast .close > span { cursor: pointer; color: white; }
    .toast .close:focus, .toast .close:hover { outline: none; }

/* Graph */
.share-progress { background-color: rgba(0,0,0,0.3); position: relative; height: 25px; font-size: 15px; margin: 1px 0; border-radius: 0; z-index: 5; }
  .share-progress > .progress-bar { background-color: #400b9b; position: absolute; left: 0; height: 100%; z-index: 10; }
  .share-progress > .progress-info { z-index: 20; margin-left: 0.5em; margin-top: 14px; }
  .share-progress:nth-child(2n) > .progress-bar { background-color: #550ace; }
#bars-wrap { position: relative; }
.graph-lines { position: absolute; top: 0; height: 100%; width: 50%; border: 1px solid #333; border-top: none; border-bottom: none; z-index: 3; }
.graph-legend { font-size: 0.7rem; color: #888; margin-top: 4px; }

/* Graph small */
.graph-sm .share-progress { height: 2px; margin: 0; cursor: pointer; opacity: 0.8; }
  .graph-sm .share-progress > .progress-info { display: none; }

.share-progress:hover { background: rgba(55,55,55,0.2) }
.share-progress:hover > .progress-bar { background: #6200ff }

/* Business colours */
.color-APA { color: #9c4a03; }
.color-ANZ { color: #76c0ff; }
.color-CBA { color: #ffc61f; }
.color-EDV { color: #00c785; }
.color-NAB { color: #f97254; }
.color-SGR { color: #f889ff; }
.color-SUN { color: #fdff92; }
.color-TAH { color: #6a58ff; }
.color-TLC { color: #00aa00; }
.color-TLS { color: #81ffe2; }
.color-WBC { color: #ff5795; }
.color-WOW { color: #b1f348; }