html * {max-height:1000000px; -moz-text-size-adjust:none;} /* ugly hack to disable Chrome font size boosting */
body {font-family:Verdana,sans-serif;font-size:90%;color:#3B3C36;line-height:130%;background-color:#F9FDFF;}

.default_form table {background-color:#d9e8ff; border:1px solid gray;}
.default_form td {padding-right:0.5em;}
.default_form th {font-weight:normal; text-align:right; vertical-align:baseline; padding-left:0.5em;padding-right:0.5em;padding-top:0.5em}
.default_form_error {font-weight:bold; color:red;}
.default_form_comment {padding-left:0.8em;}

div.body {display:flex;flex-direction:row}
div.side {padding:4px 4px 12px 4px;vertical-align:top;background-color:#d9e8ff;border-right:5px solid gray}
div.side a {text-decoration:none}
div.content {padding:0;width:100%}
div.content h1 {color:brown;padding-left:12px}
div.footer {display:flex;align-items:flex-start;justify-content:flex-start;font-size:85%;background-color:#d9e8ff;padding-left:3em;border-top:1px solid gray;border-bottom:1px solid gray}
div.footer a {text-decoration:none;margin-left:1em;margin-right:3em;}
div.footer p {margin:0;}

nav.navbar {background-color:#d9e8ff;}
nav ul {display:flex;justify-content:flex-start;flex-direction:column;list-style-type:none;margin:0;padding:0 0 0 0.2em;}
nav ul a {color:blue;text-decoration:none;margin:0;white-space: nowrap;}
nav li {display: block;}
nav #menutoggle {display: none;}
nav .labeltoggle {display: none;}


div.text {max-width:740px;padding:0 8px 0 8px;}
div.tabular {max-width:100%;padding:0 8px 0 8px}

div.submenu {display:flex;vertical-align:bottom;background-color:#d9e8ff;margin:0 0 2em 0;font-size:120%;border-top:3px solid gray;border-bottom:3px solid gray;min-height:1.5em}
div.submenu a {text-decoration:none;padding:0.7em 1em;white-space: nowrap}
div.submenu a.selected {background-color:#99ccff;}
div.submenu a:hover {background-color:#99ccff;}
div.submenu span.info_container {margin-left:-0.5em;}

span.submenu2 {vertical-align:bottom;background-color:#d9e8ff;margin-bottom:1em;padding-top:0.2em;padding-bottom:0.2em;border-top:1px solid gray;border-bottom:1px solid gray}
span.submenu2 a {text-decoration:none;padding-left:1em;padding-right:1em;padding-top:0.2em;padding-bottom:0.2em}
span.submenu2 a.selected {background-color:#99ccff;}
span.submenu2 a:hover {background-color:#99ccff;}

table.list td {vertical-align:top;padding-right:1.5em;border-bottom:1px solid gray;white-space: nowrap}
table.list tr.header td {vertical-align:bottom;}
table.list tr.head td {font-weight:bold;}
table.list td.r {text-align:right;}
table.list td.c {text-align:center;}
table.list td a {text-decoration:none;color:blue;margin-right:0em;}
table.list td input {width:1em}
table.list td p {margin-top:0;margin-bottom:0.5em}
table.list tr.myself td, table.list td.myself {background-color:#ffff33;}
table.list tr.highlight td {background-color:#ffff88;}
table.list td.highlight {background-color:#ffff88;}
table.list tr.highlight2 td {background-color:#ffffcc;}
table.list td.highlight2 {background-color:#ffffcc;}
table.list pre {font-family: monospace;}

table.list_trading button {background-color: #AFEEEE; margin-top:0.5em;margin-bottom:0.5em}
table.list_trading fieldset {border:1px solid SteelBlue; padding-bottom:0;margin-bottom:2px}
table.list_trading fieldset legend {padding: 0em 0.5em; color:SteelBlue;}
table.list_trading td a {text-decoration:none;color:blue;margin-right:1em;}
table.list_matches td a {text-decoration:none;color:blue;margin-right:1em;}
table.list_overall td a {text-decoration:none;color:blue;margin-right:1em;}

div.order {margin-bottom:2px;}

tr.collapsed {display:none;}

tr.bank_trade {border-top:2px solid gray;border-bottom:2px solid gray;}
tr.mob_header {display:none;}

table.r td {text-align:right;}
table.r td.l {text-align:left;}

span.inf {color:#999;font-size:80%;font-weight:normal}
span.inf_highlight {color:red;font-size:80%}
span.coins {font-weight:bold;color:#930;}

span.up, span.down, span.equal {color:#3F3FBF}
/* span.equal {opacity:0} */

span.info_container {vertical-align:top;text-align:left;}
span.info_container img {vertical-align:bottom;}
span.infobox {display:none; position:absolute; width:15em; border:1px solid gray; padding:0.2em; margin-top:1.5em; background-color:#F9F99F;font-weight:normal; z-index:1;white-space: normal}
span.infobox_l {margin-left:-15.5em;}
span.infobox_r {margin-left:-1.0em;}
span.infobox_large {display:none; position:absolute; width:auto; border:1px solid gray; padding:0.2em; margin-top:1.5em; margin-left:-1.0em; background-color:#F9F99F;font-weight:normal; z-index:1;white-space: normal}
span.info_container:hover span.infobox {display:inline;}

button.t {border:none;background-color:inherit;margin:0;padding:0;color:blue;cursor:pointer;}

ul.comp_sort {margin:0;padding:0;list-style-type:none;letter-spacing:1px;}
ul.comp_sort li:hover {background-color:#ddd;cursor:pointer;}

span.radio1x2 input {vertical-align:middle}
span.pr1x2 {font-weight:bold;}

p.breadcrumb {font-size:100%;margin-bottom:2em;}

div.banner {margin:5px}

a.nound {text-decoration:none;}
span.error {font-weight:bold;color:red}

div.logging {text-align:left;white-space:pre;clear:both;overflow:auto;padding-top:1em;}

[v-cloak] {display: none;}

.new_value-enter-active {
 transition: all 180s;
}
.new_value-leave-active {
  transition: all .1s;
}
.new_value-enter, .new_value-leave-to {
  background-color:yellow;
}
.new_value_s-enter-active {
 transition: all 8s;
}
.new_value_s-leave-active {
  transition: all .1s;
}
.new_value_s-enter, .new_value_s-leave-to {
  background-color:yellow;
}

div.cupid-blue {
  font: normal 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  padding: 3px 0 4px 0;
  margin-top: 5px;
  text-align: center;
  width: 110px; }
button.cupid-blue {
  background-color: #d7e5f5;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e5f5), color-stop(100%, #cbe0f5));
  background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);
  background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);
  background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);
  background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);
  background-image: linear-gradient(top, #d7e5f5, #cbe0f5);
  border-top: 1px solid #abbbcc;
  border-left: 1px solid #a7b6c7;
  border-bottom: 1px solid #a1afbf;
  border-right: 1px solid #a7b6c7;
  border-radius: 12px;
  -webkit-box-shadow: inset 0 1px 0 0 white;
  box-shadow: inset 0 1px 0 0 white;
  color: #1a3e66;
  font: normal 12px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  padding: 3px 0 4px 0;
  text-align: center;
  width: 110px; }
button.cupid-blue:hover {
    background-color: #ccd9e8;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccd9e8), color-stop(100%, #c1d4e8));
    background-image: -webkit-linear-gradient(top, #ccd9e8, #c1d4e8);
    background-image: -moz-linear-gradient(top, #ccd9e8, #c1d4e8);
    background-image: -ms-linear-gradient(top, #ccd9e8, #c1d4e8);
    background-image: -o-linear-gradient(top, #ccd9e8, #c1d4e8);
    background-image: linear-gradient(top, #ccd9e8, #c1d4e8);
    border-top: 1px solid #a1afbf;
    border-left: 1px solid #9caaba;
    border-bottom: 1px solid #96a3b3;
    border-right: 1px solid #9caaba;
    -webkit-box-shadow: inset 0 1px 0 0 #f2f2f2;
    box-shadow: inset 0 1px 0 0 #f2f2f2;
    color: #163659;
    cursor: pointer; }
button.cupid-blue:active {
    border: 1px solid #8c98a7;
    -webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
    box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee; }


input.switch {
  opacity: 0;
  position: absolute;
}

label.switch {
  position: relative;
  display: block;
  background: #f8f8f8;
  border: 1px solid #f0f0f0;
  border-radius: 2em;
  padding: .5em 1em .5em 5em;
  box-shadow: 0 1px 2px rgba(100, 100, 100, 0.5) inset, 0 0 10px rgba(100, 100, 100, 0.1) inset;
  cursor: pointer;
  text-shadow: 0 2px 2px #fff;
  width:10em
}
label.switch::before {
  content: '';
  position: absolute;
  top: 50%;
  left: .7em;
  width: 3em;
  height: 1.2em;
  border-radius: .6em;
  background: #eee;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  box-shadow: 0 1px 3px rgba(100, 100, 100, 0.5) inset, 0 0 10px rgba(100, 100, 100, 0.2) inset;
}
label.switch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: .5em;
  width: 1.4em;
  height: 1.4em;
  border: .25em solid #fafafa;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: #ddd;
  background-image: -webkit-linear-gradient(bottom, #fff 0%, #fff 40%, transparent 100%);
  background-image: linear-gradient(to top, #fff 0%, #fff 40%, transparent 100%);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
}
label.switch, label.switch::before, label.switch::after {
  -webkit-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

label.switch:hover, input.switch:focus + label {
  color: black;
}
label.switch:hover::after, input.switch:focus + label::after {
  background-color: #ccc;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

input.switch:checked {
  counter-increment: total;
}
input.switch:checked + label.switch::before {
  background: #1CE;
}
input.switch:checked + label.switch::after {
  -webkit-transform: translateX(2em) translateY(-50%);
          transform: translateX(2em) translateY(-50%);
}


.chart-container {
  box-sizing: border-box;
  width: 850px;
  height: 450px;
  padding: 20px 15px 15px 15px;
  margin-left: 15px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  background: #fff;
  background: linear-gradient(#f6f6f6 0, #fff 50px);
  background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
  background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
  background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
  background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.chart-placeholder {width: 100%; height: 100%; font-size: 14px; line-height: 1.2em;}




span.star {color:#a17f1a;font-size:150%;font-family:monospace,monospace;font-weight:bold;vertical-align:-30%;line-height:50%;}
span.voting_container {vertical-align:middle;color:blue;}
span.votingbox {display:none;position:absolute;width:12em;border:1px solid gray;text-align:left;padding:0.2em;background-color:#ddd;font-weight:normal;z-index:1;color:black;margin-left:0;margin-top:0}
span.votingbox a.stars {color:#a17f1a;font-family:monospace,monospace;font-size:150%;font-weight:bold;vertical-align:-20%}
span.voting_container:hover span.votingbox {display:inline;}




@media screen and (max-width: 752px) {
    
h1 {font-size:130%}
h2 {font-size:110%}

div.body {display:flex;flex-direction:column}

div.side {border-right:0;border-bottom:3px solid gray;padding-bottom:0}
div.side img.logo {width:110px;margin: 0 0 0 1em;padding:0}

div.submenu {margin:0 0 0em 0;font-size:120%;overflow:auto;width:100%}
div.submenu a {padding:0.6em 0.6em;}

div.footer {flex-direction:column;font-size:100%;line-height:150%;padding-left:1em}
div.footer a {margin-left:0;}

nav ul {background-color:#d9e8ff;display:block;height:0;opacity:0;visibility:hidden;text-align:left; padding:0 0 0.2em 0; border-top:3px solid gray;}
nav li {color:#53354A;display:block;padding:0 0 0 0.5em;font-size:130%;line-height:130%}
nav #menutoggle:checked ~ ul {opacity:1; height:100%; visibility:visible;margin-top:0.5em;padding-top:0.5em;}
nav .labeltoggle {cursor:pointer;display:block;float:right; font-size:200%; font-weight:normal; width:0.9em; margin:0.7em 1em 0.25em 0.2em;
  background: linear-gradient(
    to bottom, 
    black 0%, black 12%, 
    #d9e8ff 12%, #d9e8ff 36%, 
    black 36%, black 48%, 
    #d9e8ff 48%, #d9e8ff 70%, 
    black 70%, black 82%,
    #d9e8ff 82%, #d9e8ff 100%
  );
}

div.scroll_c {overflow:auto;}

table.list td a {margin-right:0;margin-left:0.5em;}

table.list_trading, table.list_matches, table.list_overall {margin-top:2em;}
table.list_trading > tbody > tr:first-of-type, table.list_overall > tbody > tr:first-of-type {display:none;}
table.list_trading > tbody > tr, table.list_matches > tbody > tr, table.list_overall > tbody > tr {display: block; margin-bottom: 2em; }
table.list_trading > tbody > tr > td, table.list_matches > tbody > tr > td, table.list_overall > tbody > tr > td {display: block;text-align: right;border-bottom: 0;}
table.list_trading > tbody > tr > td:last-of-type, table.list_matches > tbody > tr > td:last-of-type, table.list_overall > tbody > tr > td:last-of-type {border-bottom: 6px solid gray;}

table.list_matches > tbody > tr.collapsed {display: none;}
table.list_trading span.infobox_large, table.list_matches span.infobox_large, table.list_overall span.infobox_large {left:0;margin-left:0}

table.list_trading .desktop {display:none;}
table.list_trading > tbody > tr > td:empty {display:none;}
table.list_trading > tbody > tr > td:before {float: left; padding-right:1em;font-size:80%}
table.list_trading > tbody > tr > td:nth-child(1):before {content:"Team";}
/* table.list_trading > tbody > tr > td:nth-child(2):before {content:"Anticipated Price";} this is done in code, as different texts are needed */
table.list_trading > tbody > tr > td:nth-child(3):before {content:"Buy Orders";}
table.list_trading > tbody > tr > td:nth-child(4):before {content:"Sell Orders";}
table.list_trading > tbody > tr > td:nth-child(5):before {content:"My Portfolio";}

table.list_trading > tbody > tr.bank_trade > td:nth-child(1):before {content:"";}
table.list_trading > tbody > tr.bank_trade > td:nth-child(2):before {content:"";}
table.list_trading > tbody > tr.bank_trade > td:nth-child(3):before {content:"";}
table.list_trading > tbody > tr.bank_trade > td:nth-child(4):before {content:"";}
table.list_trading > tbody > tr.bank_trade > td:nth-child(5):before {content:"";}

/* table.list_trading > tbody > tr:nth-child(4) {display: none;} this is done in code, as difference between participant and non-participant is needed */
table.list_trading tr.trade_team > td {padding-top:0.5em;padding-bottom:0.5em;border-bottom:1px solid #ddd}
span.trade_action {display:block;margin-top:1.5em;margin-bottom:0;text-align:left}
tr.mob_header {display:block;border:0;}

table.list_matches .desktop {display:none;}
table.list_matches > tbody > tr > td:empty {display:none;}
table.list_matches > tbody > tr > td:before {float: left; padding-right:1em;font-size:80%}
table.list_matches > tbody > tr > td.ms:nth-child(1):before {content:"Start";}
table.list_matches > tbody > tr > td:nth-child(2):before {content:"Match";}
table.list_matches > tbody > tr > td:nth-child(3):before {content:"Result";}
table.list_matches > tbody > tr > td:nth-child(4):before {content:"My Prediction";}
table.list_matches > tbody > tr > td:nth-child(5):before {content:"My Points";}
table.list_matches > tbody > tr > td:nth-child(6):before {content:"Prediction Favorite";}

table.list_overall > tbody > tr > td:empty {display:none;}
table.list_overall > tbody > tr > td:before {float: left; padding-right:1em;font-size:80%}
table.list_overall > tbody > tr > td:nth-child(1):before {content:"Start";}
table.list_overall > tbody > tr > td:nth-child(2):before {content:"Result";}
table.list_overall > tbody > tr > td:nth-child(3):before {content:"My Prediction";}
table.list_overall > tbody > tr > td:nth-child(4):before {content:"My Points";}
table.list_overall > tbody > tr > td:nth-child(5):before {content:"Prediction Favorite";}

table.list_overall div.sublist {margin-top:1.5em;margin-bottom:1em;text-align:left}

table.list td.c {text-align:right;}

label.switch {margin-top:1em;}

.chart-container {
  width: 100%;
  height: 350px;
  padding:0;
  margin: 0;
  margin-bottom: 15px;
}

.mob_h {display:none}

div.logging {display:none;}
}