:root {
  --fonts: "Saira", "Roboto", "Merriweather Sans";
  --whiteText: #E8E8E8;
  --greenText: #00B000;
  --greyText: #C0C0C0;
  --darkgreyText: #404040;
}
/* Reset CSS Start */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
main { display: block; }
h1 { font-size: 2em; margin: 0.67em 0; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 1.171875rem; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; width: 100%; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template { display: none; }
[hidden] { display: none; }
/* Reset CSS End */

*, *::before, *::after { box-sizing:border-box }
html { color:var(--whiteText); font-family:var(--fonts); }
footer, header, main, section { display:block; }
body { background-color:#272b30; background-image: url('../images/fb_bg.png'); color:var(--whiteText); font-family:var(--fonts); font-size:0.9375rem; font-weight:400; line-height:1.5; margin:0; text-align:left; }
hr { box-sizing:content-box; color:var(--whiteText); height:0; overflow:visible }
h1, h2, h3, h4, h5, h6 { color:var(--whiteText); margin-bottom:0.5rem; margin-top:0; font-weight:500; line-height:1.2; }
p { margin-bottom:1rem; margin-top:0; }
img { border-style:none; vertical-align:middle; }
svg { overflow:hidden; vertical-align:middle; }
table { border-collapse:collapse; }
caption {  caption-side:bottom; color:var(--whiteText); padding-bottom:0.75rem; padding-top:0.75rem; text-align:left; }
th { text-align:inherit;}
label { display:inline-block; margin-bottom:0.5rem; }
input[type="checkbox"], input[type="radio"] { box-sizing:border-box; }
textarea { overflow:auto; resize:vertical; }
fieldset {  border:0; margin:0; min-width:0; padding:0; }
select{ font-family: inherit; }
option{ font-family: Arial!important; } /* Does not like anything but Arial */
select > option{ font-family: inherit; }

h1, h2, h3, h4, h5, h6 { color:var(--whiteText); line-height:1.2; margin-bottom:0.5rem; margin-top:0; }
h1 { font-size:2.343750rem; }
h2 { font-size:1.875000rem; }
h3 { font-size:1.640625rem; }
h4 { font-size:1.406250rem; }
h5 { font-size:1.171875rem; }
h6 { font-size:0.937500rem;  }
hr { border-top:1px solid rgba(0,0,0,0.1); margin-bottom:1rem; margin-top:1rem; }

/*
@media (min-width: 576px)  { .container { max-width: 540px } }
@media (min-width: 768px)  { .container { max-width: 720px } }
@media (min-width: 992px)  { .container { max-width: 960px } }
@media (min-width: 1200px) { .container { max-width:1140px } }
@media (min-width: 1400px) { .container { max-width:1340px } }
@media (min-width: 1600px) { .container { max-width:1540px } }
@media (min-width: 1800px) { .container { max-width:1740px } }
@media (min-width: 2000px) { .container { max-width:1940px } }
@media (min-width: 2200px) { .container { max-width:2140px } }
@media (min-width: 2400px) { .container { max-width:2340px } }
@media (min-width: 2600px) { .container { max-width:2540px } }
@media (min-width: 2800px) { .container { max-width:2740px } }
@media (min-width: 3000px) { .container { max-width:2940px } }
*/
.logoImage { border-radius: 10%; height: 75px; object-fit: scale-down; width: 200px; }
.btn_toggle_section { background-color: #64696f; border:1px solid #565656; border-radius:5px; box-shadow:inset 0px 1px 3px 0px #91b8b3; color:#ffffff; display:inline-block; font-size:1.171875rem; padding:5px 23px; text-decoration:none; width: 260px; }
.btn_toggle_section_hr:before{ background-color:rgb(200, 200, 200); content:" "; display:inline-block; height: 1.5px; margin: 0 0px; vertical-align: super; width: 30px; }
.btn_toggle_section_hr:after{  background-color:rgb(200, 200, 200); content:" "; display:inline-block; height: 1.5px; margin: 0 0px; vertical-align: super; width: 30px; }

.container { margin-left:auto; margin-right:auto; padding-left:15px; padding-right:15px; width:100%; }
.containercentre { margin-left: 50%; margin-right: -50%; padding-left: 15px; padding-right: 15px; width: 85%; transform: translate(-50%, 0) }
.row { display:flex; flex:1 0 100%; flex-wrap:wrap; margin-left:15px; margin-right:15px; }
.rowcentre { display:flex; flex:1 0 100%; flex-wrap:wrap; margin-left:15px; margin-right:15px; text-align: center; }
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { padding-left:15px; padding-right:15px; position:relative; width:100% }
.col { flex-basis:0; flex-grow:1; max-width:100% }

.colBtnSpace{ flex:0 0   20px; max-width:  20px }
.colHalf{     flex:0 0   4.1666666666%; max-width:  4.1666666666% }
.col1Qtr{     flex:0 0  10.4166666666%; max-width: 10.4166666666% }
.col1Half{    flex:0 0  12.5000000000%; max-width: 12.5000000000% }
.col75  {     flex:0 0   6.25%;         max-width:  6.25%         }
.col1   {     flex:0 0   8.3333333333%; max-width:  8.3333333333% }
.col2   {     flex:0 0  16.6666666667%; max-width: 16.6666666667% }
.col3   {     flex:0 0  25.0000000000%; max-width: 25.0000000000% }
.col4   {     flex:0 0  33.3333333333%; max-width: 33.3333333333% }
.col5   {     flex:0 0  41.6666666667%; max-width: 41.6666666667% }
.col6   {     flex:0 0  50.0000000000%; max-width: 50.0000000000% }
.col7   {     flex:0 0  58.3333333333%; max-width: 58.3333333333% }
.col8   {     flex:0 0  66.6666666667%; max-width: 66.6666666667% }
.col9   {     flex:0 0  75.0000000000%; max-width: 75.0000000000% }
.col10  {     flex:0 0  83.3333333333%; max-width: 83.3333333333% }
.col11  {     flex:0 0  91.6666666667%; max-width: 91.6666666667% }
.col12  {     flex:0 0 100.0000000000%; max-width:100.0000000000% }

.btn_large { background-color:#7a8288; border-color:#808080; color:var(--whiteText); font-family:Saira; font-size:1.171875rem; height: 35px; overflow: hidden; white-space: nowrap; display: inline-block; text-overflow: ellipsis;}
.btn_large:hover { background-color:#686f74; border-color:#808080; color:var(--whiteText); }
.btn_large:focus, .btn_large.focus { background-color:#686f74; border-color:#62686d; box-shadow:0 0 0 0.2rem rgba(142,149,154,0.5); color:var(--whiteText); }
.btn_large.disabled, .btn_large:disabled { background-color:#7a8288; border-color:#808080; color:var(--darkgreyText); }
.btn_large:not(:disabled):not(.disabled):active, .btn_large:not(:disabled):not(.disabled).active, .show>.btn_large.dropdown-toggle { background-color:#62686d; border-color:#5c6267; color:var(--whiteText);  }
.btn_large:not(:disabled):not(.disabled):active:focus, .btn_large:not(:disabled):not(.disabled).active:focus, .show>.btn_large.dropdown-toggle:focus { box-shadow:0 0 0 0.2rem rgba(142,149,154,0.5) }

.form-check-input { margin-left:-1.25rem; position:absolute; margin-top:0.3rem; }
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label { color:#7a8288 }
.form-check-input { flex-shrink:0; margin-left:0; margin-right:0.25rem; margin-top:0; position:relative; }

.greenText{ color:var(--greenText); }
.greyText{ color:var(--greyText); }

.w190px{ width:190px; }

.hide{ display: none;  }
.show{ display: block; }

#canvas-container { width: 100%; text-align:center; }
canvas { display: inline; }

.flexcentre {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 7%;
    margin-right: 7%;
}
.flexcentrenomargin {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.flexleft {
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 7%;
    margin-right: 7%;
}
.flexleftnomargin {
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
}
.flexright {
    display: flex;
    justify-content: right;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 7%;
    margin-right: 7%;
}
.flexleftnowrap {
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: nowrap;
}
.flexpanelleft {
    flex: 50%;
}
.flexpanelright {
    flex: 50%;
}
/* Responsive layout - makes a one column layout (100%) instead of a two-column layout (50%) */
@media (max-width: 850px) {
    .flexpanelleft, .flexpanelright {
        flex: 100%;
    }
}