@import url('./guide.css');



/* Normalisation */
/* Prevent Firefox autofill colour */
input:autofill {
  background-color:     #ffffff;
}




body {
    margin:             0;
    background-color:   var(--blotto-color-bgd-body);
    padding:            0;
    font-family:        var(--blotto-dfn-fnt-default);
    font-size:          var(--blotto-dfn-fsz-default);
    height:             100%;
}

h2 {
    font-family:        var(--blotto-dfn-fnt-title);
    font-weight:        var(--blotto-dfn-fwt-title);
}

h3 {
    font-family:        var(--blotto-dfn-fnt-subtitle);
    font-weight:        var(--blotto-dfn-fwt-subtitle);
}


body.unloading {
    background-image:   var(--blotto-url-wait);
    background-repeat:  no-repeat;
    background-attachment: fixed;
    background-position: center;
}

body.unloading * {
    visibility:         hidden;
}

textarea {
    width:              60vw;
    height:             24em;
}

hr {
    clear:              both;
    height:             0;
    border-width:       0;
}

h2, h3, caption {
    text-shadow:        var(--blotto-shadow-heading);
    color:              var(--blotto-color-fgd-heading);
}

h2 {
    font-size:          var(--blotto-dfn-fsz-title);
    font-weight:        var(--blotto-dfn-fwt-title);
}

h3, caption {
    font-size:          var(--blotto-dfn-fsz-subtitle);
    font-weight:        var(--blotto-dfn-fwt-subtitle);
}

table {
    margin-top:         1em;
    table-layout:       fixed;
    border-collapse:    collapse;
    border:             1px solid var(--blotto-color-bdr-table);
}

table:first-of-type {
    margin-top:         0;
}

table caption {
    margin:             0  0  0.5em 0;
    text-align:         left;
    font-weight:        bold;
    white-space:        nowrap;
}

table.report code {
    display:            inline-block;
    width:              10em;
    font-size:          90%;
}
table.report td:nth-of-type(2) code {
    width:              4em;
    text-align:         right;
}

th, td {
    padding:            0.3em 0.5em 0.3em 0.5em;
    font-size:          var(--blotto-font-size-table);
    vertical-align:     top;
}

tbody tr:nth-child(odd) {
    background-color:   var(--blotto-color-bgd-row-odd);
}

tbody tr:nth-child(even), tfoot tr {
    background-color:   var(--blotto-color-bgd-row-even);
}

tfoot td {
    text-align:         center;
}

button[data-close] {
    position:           absolute;
    top:                0.6em;
    right:              0.6em;
    background-image:   url('./close.png');
    background-size:    contain;
    width:              2em;
    height:             2em;
}


nav.links {
    width:              100%;
    text-align:         center;
}

a.link-resource,
a.link-profit {
    margin:             0 0 0 0.2em;
    display:            inline-block;
    width:              1.5em;
    height:             2em;
}
a.link-resource {
    margin:             0.5em 0.2em 0 0;
}

a.link-image > img {
    width:              100%;
    height:             100%;
    content:            var(--blotto-url-link-image);
}

a.link-table > img,
a.link-profit.html > img {
    width:              100%;
    height:             100%;
    content:            var(--blotto-url-link-table);
}

a.link-csv > img,
a.link-profit.csv > img {
    width:              100%;
    height:             100%;
    content:            var(--blotto-url-link-csv);
}

a.help {
    text-decoration:    none;
}

a.draw-report, a.invoice, a.statement {
    display:            inline-block;
    width:              20em;
    margin:             0.3em;
    border-style:       solid;
    border-width:       2px;
    border-radius:      0.3em;
    border-color:       var(--blotto-color-bdr-button);
    background-color:   var(--blotto-color-bgd-button);
    padding:            0.1em 0.4em 0.1em 0.4em;
    font-weight:        bold;
    font-size:          var(--blotto-font-size-button-default);
    text-align:         left;
    text-decoration:    none;
    color:              var(--blotto-color-fgd-button);
}

#built {
}

#options {
    box-sizing:         border-box;
    margin:             0.4em 0 0.4em 0.4em;
    border-style:       solid;
    border-width:       1px;
    border-color:       var(--blotto-color-bdr-layout);
    width:              calc(100% - 0.6em - 2px);
    height:             var(--blotto-dims-header-height);
    padding:            var(--blotto-dims-header-nudge) 0.5em 0 8em;
    text-align:         right;
}

button, input[type="submit"] {
    margin:             0 0 0 0.05em;
    border-style:       solid;
    border-width:       2px;
    border-radius:      0.3em;
    border-color:       var(--blotto-color-bdr-button);
    background-color:   var(--blotto-color-bgd-button);
    padding:            0.1em 0.4em 0.1em 0.4em;
    text-align:         center;
    text-decoration:    none;
    color:              var(--blotto-color-fgd-button);
    font-size:          var(--blotto-font-size-button-default);
    font-weight:        var(--blotto-dfn-fwt-default);
    cursor:             pointer;
}

section.update-message {
    display:            none;
    position:           absolute;
    z-index:            1000;
    margin:             3em 1em 1em 1em;
    left:               0;
    top:                0;
    width:              0;
    height:             0;
    background-color:   var(--blotto-color-bgd-body);
    padding:            2em;
    overflow:           hidden;
}
section.update-message.active {
    display:            block;
    width:              28em;
    height:             auto;
    border-style:       solid;
    border-width:       1px;
}

#options a {
    display:            inline-block;
    margin:             0 0 0.3em 0.05em;
    border-style:       solid;
    border-width:       2px;
    border-radius:      0.3em;
    border-color:       var(--blotto-color-bdr-button-opt);
    background-color:   var(--blotto-color-bgd-button);
    padding:            0.1em 0.4em 0.1em 0.4em;
    font-family:        var(--blotto-dfn-fnt-header);
    font-weight:        var(--blotto-dfn-fwt-header);
    font-size:          var(--blotto-dfn-fsz-header);
    text-align:         center;
    text-decoration:    none;
    color:              var(--blotto-color-fgd-button-opt);
}
#options a:hover {
    border-color:       var(--blotto-color-bdr-button-opt);
    background-color:   var(--blotto-color-bgd-button);
    color:              var(--blotto-color-fgd-button-opt-hvr);
}
#options a.active {
    cursor:             default;
    text-decoration:    var(--blotto-text-decor-header-acv);
}
#options a.active, #options a.active:hover {
    border-color:       var(--blotto-color-bdr-button-opt-acv);
    background-color:   var(--blotto-color-bgd-button-opt-acv);
    color:              var(--blotto-color-fgd-button-opt-acv);
}
#options a.active, #options a.active:hover {
    border-color:       var(--blotto-color-bdr-button-opt-acv);
}
#options a#logout {
    border-color:       var(--blotto-color-bdr-button-opt-acv);
    background-color:   var(--blotto-color-bdr-button-lgt);
    color:              var(--blotto-color-fgd-button-opt-acv);
}
#options a#logout:hover {
    border-color:       var(--blotto-color-bdr-button-lgt-hvr);
    background-color:   var(--blotto-color-bgd-button-lgt-hvr);
    color:              var(--blotto-color-fgd-button-lgt-hvr);
}

#frame {
    box-sizing:         border-box;
    margin:             0 0 0 0.4em;
    border-style:       solid;
    border-width:       1px;
    border-color:       var(--blotto-color-bdr-layout);
    width:              calc(100% - 0.6em - 2px);
    height:             calc(100vh - var(--blotto-dims-header-height) - 3.8em - 6px);
    overflow-y:         scroll;
}

#footer {
    box-sizing:         border-box;
    margin:             0.2em 0 0 0.4em;
    border-style:       solid;
    border-width:       1px;
    border-color:       var(--blotto-color-bdr-layout);
    width:              calc(100% - 0.6em - 2px);
    height:             2.6em;
    padding:            0.2em 0.8em 0 18em;
    text-align:         left;
}

#footer a {
    float:              right;
    display:            inline-block;
    margin:             0 0.3em 0 0;
    padding:            0.4em;
    font-size:          var(--blotto-dfn-fsz-footer);
    font-weight:        var(--blotto-dfn-fwt-footer);
    text-decoration:    none;
    color:              var(--blotto-color-fgd-lk-aux);
}

#footer a:hover {
    text-decoration:    none;
    color:              var(--blotto-color-fgd-lk-aux-hvr);
}

#footer a.active {
    color:              var(--blotto-color-fgd-lk-aux-acv);
    text-decoration:    var(--blotto-text-decor-footer-acv);
}

#small-print {
    display:            none;
    position:           fixed;
    left:               20vw;
    top:                1em;
    width:              60vw;
    height:             calc(100vh - 6em);
    border-style:       solid;
    border-width:       1px;
    background-color:   white;
    opacity:            0.85;
    padding:            2em;
    overflow-x:         auto;
    overflow-y:         scroll;
    color:              black;
}
#small-print.visible {
    display:            block;
}
#small-print h2 {
    margin-top:         0;
}

/* Login component */
#login {
    position:           fixed;
    top:                calc(50vh - 6em);
    box-sizing:         border-box;
    width:              100vw;
    height:             12em;
    background-color:   var(--blotto-color-bgd-login);
    background-image:   var(--blotto-url-login-bgd);
    background-repeat:  repeat-y;
    background-position: var(--blotto-align-bgd-login);
    background-size:    var(--blotto-size-bgd-login);
    text-align:         center;
    padding:            0 16em 0 16em;
}
#login.insecure {
    background-color:   #ffaaaa;
}
#login.insecure input {
    color:              #008888;
}
form.login {
    display:            flex;
    align-items:        center; /* gobbledegook for vertical */
    justify-content:    center; /* gobbledegook for horizontal */
    box-sizing:         border-box;
    width:              100%;
    height:             15em;
    padding:            0.6em;
    vertical-align:     middle;
    font-size:          0.8em;
    font-weight:        var(--blotto-dfn-fwt-default);
    text-align:         center;
}
form.login p {
    margin:             0 0 0.8em 0;
}
form.login .form-content > * {
    margin:             0.8em 0 0.8em 0;
}
form.login .component {
    position:           relative;
}
form.login .component {
    position:           relative;
}
form.login .error {
    color:              var(--blotto-color-fgd-login-error);
}
form.login input {
    margin:             0;
    height:             2.4em;
    box-sizing:         border-box;
    text-align:         center;
}
form.login input.squeezed {
    /* Input fields having overlaid elements and the ends */
    padding-left:       2.4em;
    padding-right:      2.4em;
}
form.login input.hidden {
    position:           absolute;
    display:            inline-block;
    margin:             0;
    width:              0;
    height:             0;
    padding:            0;
    overflow-x:         hidden;
    overflow-y:         hidden;
    visibility:         none;
}
form.login input.text {
    /* Input fields that are GUI text boxes - text, email, password, etc */
    width:              28em;
}
form.login input.image {
    /* A submit button that wants to look like an image link */
    position:           absolute;
    right:              0;
    margin:             1px 1px 0 0;
    width:              1.6em;
    height:             1.6em;
    border-style:       solid;
    border-radius:      0;
    border-width:       1px;
    border-color:       var(--blotto-color-bgd-button-lgn);
    background-color:   var(--blotto-color-bgd-button-lgn);
    background-image:   var(--blotto-url-button-login);
    background-repeat:  no-repeat;
    background-size:    20%;
    background-position: center;
    cursor:             pointer;
    color:              transparent;
}
form.login .blank {
    display:            inline-block;
    width:              20em;
    height:             2em;
    border-color:       transparent;
    background-color:   transparent;
}
form.login input.link {
    /* A submit button that want to look like a text link */
    height:             1.5em;
    border-style:       none;
    background-color:   transparent;
    background-image:   none;
    cursor:             pointer;
    color:              var(--blotto-color-fgd-lk-aux);
    padding:            0;
    font-size:          inherit;
    font-weight:        inherit;
    text-align:         center;
}
form.login input.link:hover {
    /* A submit button that want to look like a text link */
    color:              var(--blotto-color-fgd-lk-aux-hvr);
}
form.login a.link {
    color: var(--blotto-color-fgd-lk-aux);
    text-decoration:    none;
}
form.login a.link:active, form.login a.link:visited, {
    color: var(--blotto-color-fgd-lk-aux);
}
form.login a.link:hover {
    color: var(--blotto-color-fgd-lk-aux-hvr);
    text-decoration:    none;
}
form.login .timer {
    position:           absolute;
    left:               0;
    display:            block;
    margin:             1px 0 0 1px;
    box-sizing:         border-box;
    border-style:       none;
    width:              2em;
    height:             2em;
    background-color:   var(--blotto-dfn-clr-gold-lo);
    padding:            0;
    text-align:         left;
}
form.login .timeremaining {
    display:            inline-block;
    margin:             0;
    box-sizing:         border-box;
    width:              100%;
    height:             100%;
    border-style:       none;
    background-color:   var(--blotto-dfn-clr-black);
    padding:            0;
}
form.login .timeremaining > span {
    display:            inline-block;
    height:             1em;
    padding:            0.55em 0 0 0.27em;
    font-size:          0.85em;
    font-weight:        bold;
    color:              var(--blotto-dfn-clr-white);
    text-align:         left;
    text-decoration:    none;
}
form.login .copy {
    cursor:             pointer;
    text-decoration:    underline;
}
form.login .copy:hover {
    text-decoration:    none;
}

form#change-mandate,
form#change-supporter {
    display:            none;
    position:           fixed;
    left:               20vw;
    top:                0.5em;
    height:             calc(100vh - 1em);
    border-style:       solid;
    border-width:       1px;
    border-color:       var(--blotto-color-bdr-popup);
    background-color:   var(--blotto-color-bgd-body);
    overflow-x:         auto;
    overflow-y:         scroll;
}
form#change-mandate.active,
form#change-supporter.active {
    display:            block;
}

form#change-mandate.active.blocked td,
form#change-supporter.active.blocked td {
    color:              grey;
}

form#change-mandate > label:first-of-type,
form#change-supporter > label:first-of-type {
    display: inline-block;
    margin-top: 0.35em;
    margin-left: 11.8em;
}

form#change-mandate button,
form#change-supporter button {
    border-color:       var(--blotto-color-bdr-popup);
}

form#change-mandate button.form-close,
form#change-supporter button.form-close {
    position:           fixed;
    left:               calc(20vw + 0.4em);
    top:                1em;
    font-size:          0.8em;
}

form#change-mandate button#post-mandate,
form#change-supporter button#post-supporter-mandate-block,
form#change-supporter button#post-supporter {
    position:           fixed;
    left:               calc(20vw + 5em);
    top:                1em;
    font-size:          0.8em;
}
/* Argh! have it both ways then */
form#change-supporter button#post-supporter-mandate-block,
form#change-supporter button#post-supporter-anl-resend,
form#change-supporter button#post-supporter-resend-anl {
    position:           static;
    float:              right;
    margin-top:         0.3em;
    margin-right:       0.3em;
}
form#change-supporter button#post-supporter-anl-resend,
form#change-supporter button#post-supporter-resend-anl {
/* TODO - temporary 
visibility: hidden; */
    font-size:          0.8em;
}

form#change-mandate thead,
form#change-supporter thead {
    height:             1.8em;
}

form#change-mandate tr td:nth-child(1),
form#change-supporter tr td:nth-child(1) {
    width:              10em;
    text-align:         right;
}

form#change-mandate input[type="checkbox"],
form#change-mandate input[type="radio"],
form#change-supporter input[type="checkbox"],
form#change-supporter input[type="radio"] {
    width:               initial;
}

form#change-mandate input,
form#change-supporter input {
    width:              30em;
}

form#change-supporter button.change-supporter:disabled {
    opacity: 0.5;
    /*color: red;*/
}

#about {
    float:              left;
}

#list button, a.draw-report, a.invoice, a.statement {
    color:              var(--blotto-color-fgd-button-lst);
}
#list button:hover, a.invoice:hover {
    border-color:       var(--blotto-color-bdr-button);
    background-color:   var(--blotto-color-bgd-button);
    color:              var(--blotto-color-fgd-button-lst);
}
#list .month button.active, #list .month button.active:hover {
    border-color:       var(--blotto-color-bdr-button-lst-acv);
    background-color:   var(--blotto-color-bgd-button-lst-acv);
    color:              var(--blotto-color-fgd-button-lst-acv);
}

#logo {
    position:           fixed;
    left:               0.7em;
    bottom:             0.55em;
}

#logo-login-form {
    position:           fixed;
    left:               5.65em;
    top:                calc(50vh - 21px);
    width:              auto;
    height:             34px;
}

#logo-login {
    position:           fixed;
    width:              auto;
    height:             var(--blotto-dims-logo-login-height);
    left:               1em;
    top:                var(--blotto-dims-logo-login-top);
}

#logo-blotto {
    position:           fixed;
    width:              auto;
    height:             var(--blotto-dims-logo-blotto-height);
    left:               1em;
    top:                var(--blotto-dims-logo-blotto-top);
}

.blink {
    animation:          2s blinker linear infinite;
}
@keyframes blinker {  
  0% {
    background-color:   transparent;        
  }
  5% {
    background-color:   var(--blotto-color-bgd-blink);        
    color:              white;
  }
  70% {
    background-color:   var(--blotto-color-bgd-blink);        
    color:              white;
  }
  75% {
    background-color:   transparent;        
    color:              black;
  }
  100% {
    background-color:   transparent;        
  }
}

.content {
    padding:            2em 2em 2em var(--blotto-content-margin-left);
    width:              calc(100% - 2em - var(--blotto-content-margin-left));
}

.content.about {
    width:              auto;
}

.content > h2,
.content.about h2 {
    box-sizing:         border-box;
    margin:             0 0 1em 0;
    padding:            0;
}

h3 {
    margin-top:         0.5em;
    margin-bottom:      0.5em;
}

form#list-aux {
    position:           fixed;
    z-index:            100;
    right:              2em;
    top:                1.8em;
    border-style:       solid;
    border-width:       1px;
    border-color:       var(--blotto-color-bdr-form-options);
    background-color:   var(--blotto-color-bgd-body);
    padding:            0.1em 0.3em 0.1em 0.3em;
    white-space:        nowrap;
}

form#list-aux h3:first-of-type {
    margin:            0 0 0 0;
    text-align:        center;
    font-size:         var(--blotto-font-size-form-group-by);
}

form#list-aux label {
    position:          relative;
    top:               -0.15em;
    font-size:         var(--blotto-font-size-form-group-by);
}


img.close {
    content: url('./close.png');  
    width:              1.2em;
    height:             auto;
    cursor:             pointer;
}

#list h2 {
    margin-bottom:      1.4em;
}
#list .row {
    display:            block;
    margin:             1em 0 1em 0;
}
#list .row:nth-child(2n+0) {
    background-color:   var(--blotto-color-bgd-list-stripe);
}
#list .row button {
    margin:             0;
}
#list .row > *, #list .row > .col3 > * {
    display:            inline-block;
    text-align:         center;
}
#list .row > .col3 {
    display:            inline;
}
#list .row > *, #list .row > .col3 > * {
    width:              var(--blotto-dims-column-spacing);
}
#list .row > .choices > button[data-go] {
    font-size:          1em;
    padding:            0;
}
#list .subtitle, #list .row > h3 {
    display:            inline-block;
    padding:            0;
    font-family:        var(--blotto-dfn-fnt-subtitle);
    font-size:          var(--blotto-dfn-fsz-subtitle);
    font-weight:        var(--blotto-dfn-fwt-subtitle);
    text-align:         left;
    width:              calc(var(--blotto-dims-column-spacing) - 2.8em);
}
#list .row > .col1.subtitle {
    margin-left:        -1em;
    padding-left:       1em;
    width:              calc(var(--blotto-dims-column-spacing) - 1.8em);
}
#list .row.month button[data-date] + .choices {
    position:           relative;
    display:            inline-block;
    left:               0;
    top:                0;
    width:              6em;
    text-align:         center;
}

#list .choices button {
    cursor:             pointer;
    font-size:          var(--blotto-font-size-button-choices);
    padding:            0.1em 0.2em 0.1em 0.2em;
}

.lottery-number {
    display:            none;
    border-style:       solid;
    border-width:       2px;
    border-radius:      0.6em;
    border-color:       var(--blotto-color-bdr-winning-nr);
    padding:            0.1em;
    color:              var(--blotto-color-fgd-winning-nr);
}

.splash {
    position:           fixed;
    right:              2em;
    top:                4.25em;
    opacity:            0;
    animation:          fadeout 5s;
    margin:             0;
    border-radius:      0.25em;
    padding:            0.1em 0.35em 0.1em 0.35em;
}

.wait button {
    margin-top:         0.4em;
}

@keyframes fadeout {
    from { opacity:     1.0; }
      5% { opacity:     0.5; }
     10% { opacity:     1.0; }
     15% { opacity:     0.5; }
     20% { opacity:     1.0; }
     75% { opacity:     1.0; }
      to { opacity:     0.0; }
}

.negative,
[data-negatize] {
    color:              var(--blotto-color-fgd-negative-nr);
}

.msg {
    font-weight:        bold;
    background-color:   var(--blotto-color-bgd-message-msg);
    color:              var(--blotto-color-fgd-message);
}

.err {
    background-color:   var(--blotto-color-bgd-message-err);
    color:              var(--blotto-color-fgd-message);
}

.wrn {
    background-color:   var(--blotto-color-bgd-message-wrn);
    color:              var(--blotto-color-fgd-message);
}

.ok {
    background-color:   var(--blotto-color-bgd-message-ok);
    color:              var(--blotto-color-fgd-message-ok);
}

.changed, .changed tr, .changed th, .changed td {
    background-color:   var(--blotto-color-bgd-message-wrn) !important;
    color:              var(--blotto-color-fgd-message);
}

@keyframes slideup {
    from { height:      0; }
      to { height:      calc(100vh - 8.2em - 8px); }
}


#visual {
    padding-bottom:     5em;
}

#visual h2 {
    margin-bottom:      0.3em;
}

#visual hr:last-of-type {
    visibility:         hidden;
}

#visual > form.dates {
    position:           fixed;
    z-index:            1000;
    display:            block;
    background-color:   white;
}


.chart {
    position:           relative;
    margin:             0 auto 8em auto;
    width:              42em;
}
.chart-overlay {
    position:           absolute;
    left:               0;
    top:                3em;
    width:              100%;
    height:             5em;
    overflow-y:         visible;
    padding-top:        1em;
    font-size:          0.6em;
}

.chart-overlay-labels {
    position:           relative;
    top:                4.5em;
}

.chart-overlay-label {
    position:           relative;
    top:                -0.2em;
}

.chart-overlay-box,
.chart-overlay-box,
.chart-overlay-box,
.chart-overlay-box {
    display:            inline-block;
    width:              5.2%;
    height:             1em;
    overflow:           hidden;
}

.chart-title {
    width:              0;
    height:             0;
    overflow:           hidden;
    font-family:        var(--blotto-dfn-fnt-default);
    font-weight:        bold;
    color:              var(--blotto-color-fgd-chart-legend);
}

.chart-legend {
    width:              0;
    height:             0;
    overflow:           hidden;
    font-size:          var(--blotto-font-size-chart-legend);
    color:              var(--blotto-color-fgd-chart-legend);
}

.chart-grid {
    width:              0;
    height:             0;
    overflow:           hidden;
    background-color:   var(--blotto-color-bgd-chart-grid);
    color:              var(--blotto-color-fgd-chart-grid);
}

.chart-bar-1,
.chart-bar-6,
.chart-bar-11,
.chart-bar-16,
.chart-bar-21,
.chart-bar-26,
.chart-overlay-1 {
    background-color:   var(--blotto-color-bgd-chart-bar-1);
}

.chart-bar-2,
.chart-bar-7,
.chart-bar-12,
.chart-bar-17,
.chart-bar-22,
.chart-bar-27,
.chart-overlay-2 {
    background-color:   var(--blotto-color-bgd-chart-bar-2);
}

.chart-bar-3,
.chart-bar-8,
.chart-bar-13,
.chart-bar-18,
.chart-bar-23,
.chart-bar-28,
.chart-overlay-3 {
    background-color:   var(--blotto-color-bgd-chart-bar-3);
}

.chart-bar-4,
.chart-bar-9,
.chart-bar-14,
.chart-bar-19,
.chart-bar-24,
.chart-bar-29,
.chart-overlay-4 {
    background-color:   var(--blotto-color-bgd-chart-bar-4);
}

.chart-bar-5,
.chart-bar-10,
.chart-bar-15,
.chart-bar-20,
.chart-bar-25,
.chart-bar-30,
.chart-overlay-5 {
    background-color:   var(--blotto-color-bgd-chart-bar-5);
}

#reconciliation {
    margin-left:        12em;
    margin-top:         -3em;
    width:              calc(100vw - 32em);
    text-align:         left;
}

#reconciliation > form.dates {
    position:           fixed;
    left:               15em;
    top:                2.1em;
    background-color:   white;
}

#reconciliation .reconcile {
    margin:             1em 0 3em 0;
}

#reconciliation .reconcile > a:first-of-type {
    margin-left:        12em;
}

#reconciliation .reconcile table {
    text-align:         left;
    width:              26em;
    white-space:        nowrap;
}

#reconciliation .reconcile caption {
    text-align:         center;
    overflow:           visible;
}

#reconcile-table-reconcile tbody tr:nth-of-type(1),
#reconcile-table-reconcile tbody tr:nth-of-type(8),
#reconcile-table-reconcile tbody tr:nth-of-type(14),
#reconcile-table-reconcile tbody tr:nth-of-type(19) {
    font-weight:        bold;
}

#reconcile-table-reconcile tbody td:nth-of-type(1),
#reconcile-table-reconcile tbody td:nth-of-type(2) {
    text-align:         right;
}

#reconcile-table-reconcile tbody td:nth-of-type(1),
#reconcile-table-reconcile tbody td:nth-of-type(3):first-letter {
    text-transform:     uppercase;
}
#reconcile-table-reconcile tbody td:nth-of-type(1) {
    width:              3em;
}
#reconcile-table-reconcile tbody td:nth-of-type(2) {
    width:              6em;
}

#reconcile-table-revenue-ccc thead th:nth-of-type(2),
#reconcile-table-revenue-ccc tbody td:nth-of-type(2) {
    text-align:         right;
}

#reconcile-table-draw-summary tbody td:nth-of-type(3),
#reconcile-table-draw-summary tbody td:nth-of-type(4) {
    text-align:         right;
}

#reconcile-table-draw-summary-super tbody td:nth-of-type(2),
#reconcile-table-draw-summary-super tbody td:nth-of-type(3) {
    text-align:         right;
}

#profit {
    position: fixed;
    left: 44em;
    top: 3.7em;
    width: max-content;
    text-align: left;
}
#profit label {
    display: inline-block;
    width: 16em;
    text-align: left;
}
#profit input {
    box-sizing: border-box;
    width: 8em;
    text-align: right;
}
#profit input[type="button"] {
    text-align: center;
}
#profit a {
    font-size: 0.85em;
}
#profit a:hover {
    cursor: pointer;
    color: var(--blotto-color-fgd-button-opt-hvr);
}

#profit [data-profit-headings] {
    display:none;
}
.search-result-inactive {
    color: var(--blotto-dfn-clr-grey-deep);
}
#system-info {
    float: right;
}

#guide-video {
    width:              calc(100vw - 50em);
}

#support form button {
    font-size:          1.1em;
    float:              right;
}
#support table tr:nth-child(3) td:nth-child(2) {
    padding-right:      0;
}

@media screen and (max-width: 1200px) {
    #options {
        height:         4.5em;
    }
    #frame {
        height:         calc(100vh - 10.2em - 6px);
    }
    #list {
        min-width:      50em;
    }
    #footer {
        height:         4.5em;
        padding-left:   1em;
    }
}


@media screen and (max-width: 1050px) {
    #list {
        font-size:      0.8em;
    }
}


@media screen and (max-width: 830px) {
    #options {
        height:         6.4em;
    }
    #frame {
        height:         calc(100vh - 12.1em - 6px);
    }
    #list {
        padding-right:  0;
        font-size:      0.65em;
    }
    .chart {
        width:          22em;
        margin-left:    1em;
    }
}


@media screen and (max-width: 650px) {
    #frame {
        height:         calc(100vh - 14em - 6px);
    }
    #footer {
        height:         6.4em;
    }
    .chart {
        width:          20em;
        margin-left:    0.5em;
    }
}


@media screen and (max-width: 560px) {
    #options {
        height:         9.3em;
    }
    #frame {
        height:         calc(100vh - 15.9em - 6px);
    }
    .chart {
        width:          18em;
        margin-left:    0.3em;
    }
}