:root{
  --overall_width: 90%;
  /*--redish: #d89094;*/
  --redish: #f0a898;
  /*--blueish: #bad0eb;*/
  --blueish: #c7d7e9;
  
}


html, body {
  margin: auto;
  padding-bottom: 30px;
  /*height:100%;
  width: 100%;*/
  text-align: center;
  /*font-family: Arial, Helvetica, sans-serif;*/
  font-family: 'Courier New', monospace;
  /*background: black url("bg.png") fixed;
  background-size: 75px auto;*/
}

body {
	color: white;
  /*color: var(--blueish);*/
  background-color: black; 
/*  	border-style: solid;
  	border-width: 2px;
  	border-color: blue;*/
  	
}


table {
	margin: auto;
	padding: 0px;
	width:var(--overall_width);
	border: 1px solid;
	/*background-color: lightgrey;*/
  background-color: var(--blueish);
	color: black;
	/*display: none;*/
	/*border-collapse: collapse;*/
}

table.rankings {
	margin: auto;
	width:var(--overall_width);
	border: 1px solid;
	/*background-color: lightgrey;*/
  background-color: var(--blueish);
	color: black;
}

td {
	border: 1px solid;
}

tr.me {
  font-weight: bold;
  /*background-color: darkgrey;*/
  background-color: var(--redish);
}

/*canvas {
  border:1px solid black;
  background-color: #E3E3E3;
}*/


#background_canvas {
  position:fixed;
  left:0;
  top:0;
  /*background-color: #164979;*/
  width:100%;
  height:100%;
  margin: 0;
  padding: 0;
  z-index:-1;
} 

#myChartContainer{
  /*border:1px solid blue;*/
  width: var(--overall_width);
  margin: auto;
  padding: 2px;
  background-color: #E3E3E3;
}


.congratulations{
  border: 2px solid white;
  background-color: #8c0000;
  padding: 5px;
  width: var(--overall_width);
  margin: auto;
}

.preseason_box{
  /*border: 2px solid white;
  background-color: #8c0000;*/
  padding: 5px;
  width: var(--overall_width);
  margin: auto;
}

.cong_img{
  border: 1px solid white;
  width: 80%;
}

h1 {
	margin: auto;
	text-decoration: overline underline;
	padding: 8px;
	font-family: Impact, fantasy;
}

small.underlined{
	text-decoration: underline;	
}

.headerimage {
  max-width: 100%;
  padding: 1em;
  box-sizing : border-box;

}


.pos_up {
  color: green;
  transform: rotate(90deg);
}

.pos_down {
  color: red;
  transform: rotate(270deg);
}


.scroll-left {
 height: 30px;	
 overflow: hidden;
 position: fixed;
 bottom: 0;
  left: 0;
  right: 0;
 background: red;
 color: white;
 border: 1px  white;
 border-style: solid none none;
}

.scroll-left p {
 position: absolute;
 /*width: 100%;*/
 height: 100%;
 white-space: nowrap;
 margin: 0;
 line-height: 30px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 15s linear infinite;
 -webkit-animation: scroll-left 15s linear infinite;
 animation: scroll-left 15s linear infinite;
}

/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}


.collapsible {
  display: block;
  width: var(--overall_width);
  padding-top: 3px;
  padding-bottom: 3px;
  /*border: 1px solid white;*/
  border: 2px solid var(--blueish);
  margin: auto;
  margin-bottom: 1rem;
  background-color: black;
}
.collapsible input {
  position: absolute;
  left: -9999px;
}
.collapsible input:focus ~ .collapser {
  /*border-color: grey;*/
}
.collapsible .collapser {
  cursor: pointer;
  border: 1px transparent dotted;
}
.collapsible .arrow {
  float: right;
  margin-left: 0.5em;
  margin-right: 0.5em;
  display: inline-block;
  transform: rotate(90deg);
  transition: transform 0.25s ease-out;
}

.collapsible input:checked ~ .arrow,
.collapsible input:checked ~ .collapser .arrow {
  transform: rotate(270deg);
}

.collapsible .collapsed {
  font-size: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  height: auto;
  /* fade out, then shrink */
  transition: opacity 0.25s, margin 0.5s 0.25s, font-size 0.5s 0.25s, padding 0.5s 0.25s;
}

/*canvas {
  border:1px solid black;
  background-color: #E3E3E3;
}*/

.collapsible .collapsed .collapsed_canvas{
  width: 0px;
  height: 0px;
  border-spacing: 0px;
	border: none;
	margin-top: 0px;
	margin-bottom: 0px;
  margin:auto;
	padding: 0px;
  /*object-fit: cover;
  object-position: bottom;*/
}

.collapsible input:checked ~ .collapsed .collapsed_canvas{
  width: 100%;
  height: auto;
  /*height: 0px;*/
  margin:auto;
  margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
}

.collapsible .collapsed .collapsed_table{
	border-spacing: 0px;
	border: none;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
}

.collapsible input:checked ~ .collapsed .collapsed_table{
	border-spacing: 1px;
	border: 1px solid black;
	padding: auto;
}

.collapsible input:checked ~ .collapsed {
  font-size: 16px;
  opacity: 1;
  height: auto;
  padding: 5px 0;
  /* grow, then fade in */
  transition: margin 0.25s, padding 0.25s, font-size 0.25s, opacity 0.5s 0.25s;
}

.outerchat {
  text-align: left;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: auto;
  width: var(--overall_width);
  /*background-color: lightgrey;*/
  background-color: var(--blueish);
  color: black;
}

.chat_text {
  margin: 10px;
  padding: 10px;
  /*background-color: darkgrey;*/
  background-color: var(--redish);
  border: 1px solid black;
  
}

.single_line{
  overflow: auto;
  margin: 2px;
  padding: 1px;
  /*background-color: lightgrey;*/
  background-color: var(--blueish);
}

.chat_text input[type=button]{
  background-color: grey;
  text-decoration: none;
  border: 1px solid black;
  color: white;
}

.chat_form {
  margin: 10px;
  padding: 5px;
  text-align: center;
  background-color: darkgrey;
  border: 1px solid black;
}

.chat_form input[type=text]{
  box-sizing : border-box;
  width: 79%;
  background-color: white;
  color: black;
  padding: 2px;
  border: 1px solid black;
}

/*input[type=text]{
  background-color: white;
  color: black;
  padding: 2px;
  border: 1px solid black;
  height: 1.5em;
}*/

.chat_form input[type=text]:focus {
  border: 3px solid #555;
}

/*input[type=submit]{
  background: lightgrey;
  background-size: 1.2em;
  height: 2em;
}*/

.chat_form input[type=submit]{
  box-sizing : border-box;
  width: 19%;
  min-width: 5em;
  padding: 2px;
  background: lightgrey url("send.png") no-repeat center;
  background-size: 1em;

  height: auto;
}

.chat_delete_button {
  display: inline;
  float: right;
}

.chat_delete_button input[type=submit] {
  background-color: grey;
  text-decoration: none;
  border: 1px solid black;
  color: white;
  background: grey url("trash.png") no-repeat center;
  background-size: 1em;
  height: auto;
}

img.medals {
    width: 1em;
    height: 1em;
}

.progressbar {
  margin: auto;
  display: flex;
  width: var(--overall_width);
  height: 25px;
  line-height: 25px;
  /*color: darkred;*/
  border-width: 1px;
  border-style: solid;
  border-color: white;
}

.progresslow {
  margin-left: 0px;
  /*display: inline-block;*/
  /*width: 50%;*/
  background-color: green;
}

.progressgradient {
  /*display: inline-block;*/
  width: 5%;
  /*background-color: yellowgreen;*/
  /*background: rgb(0,128,0);*/
   background: rgb(0,128,0);
  background: -moz-linear-gradient(90deg, rgba(0,128,0,1) 0%, rgba(0,128,0,0) 100%);
  background: -webkit-linear-gradient(90deg, rgba(0,128,0,1) 0%, rgba(0,128,0,0) 100%);
  background: linear-gradient(90deg, rgba(0,128,0,1) 0%, rgba(0,128,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#008000",endColorstr="#008000",GradientType=1);

}

.progresstext {
  text-align: center;
  width: var(--overall_width);
  position: absolute;
  font-size: small;
  /*border: 2px red solid;*/
}

.scale_container{
  width: var(--overall_width);
  margin: auto;
  display: flex;
  /*background-color: blueviolet;*/
  border-left: 1px white solid;
  border-right: 1px white solid;
  /*text-align: left;*/
  /*align-items: baseline;*/
  /*justify-content: baseline;*/
}


.scale_item{
  padding-top: 10px;
  padding-left: 2px;
  text-align: left;
  font-size: small;
  border-left: 1px white solid;
  /*background-color: aqua;*/
  height: 10px;
  /*line-height: 40px;*/
  vertical-align: bottom;
}

.scale_item:first-child {
  border: none;
  /*background-color: aqua;*/
}

/*snow*/

.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}

/*snow end end*/


/*fireworks*/

.pyro > .before, .pyro > .after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: -120px -218.66667px blue, 248px -16.66667px #00ff84, 190px 16.33333px #002bff, -113px -308.66667px #ff009d, -109px -287.66667px #ffb300, -50px -313.66667px #ff006e, 226px -31.66667px #ff4000, 180px -351.66667px #ff00d0, -12px -338.66667px #00f6ff, 220px -388.66667px #99ff00, -69px -27.66667px #ff0400, -111px -339.66667px #6200ff, 155px -237.66667px #00ddff, -152px -380.66667px #00ffd0, -50px -37.66667px #00ffdd, -95px -175.66667px #a6ff00, -88px 10.33333px #0d00ff, 112px -309.66667px #005eff, 69px -415.66667px #ff00a6, 168px -100.66667px #ff004c, -244px 24.33333px #ff6600, 97px -325.66667px #ff0066, -211px -182.66667px #00ffa2, 236px -126.66667px #b700ff, 140px -196.66667px #9000ff, 125px -175.66667px #00bbff, 118px -381.66667px #ff002f, 144px -111.66667px #ffae00, 36px -78.66667px #f600ff, -63px -196.66667px #c800ff, -218px -227.66667px #d4ff00, -134px -377.66667px #ea00ff, -36px -412.66667px #ff00d4, 209px -106.66667px #00fff2, 91px -278.66667px #000dff, -22px -191.66667px #9dff00, 139px -392.66667px #a6ff00, 56px -2.66667px #0099ff, -156px -276.66667px #ea00ff, -163px -233.66667px #00fffb, -238px -346.66667px #00ff73, 62px -363.66667px #0088ff, 244px -170.66667px #0062ff, 224px -142.66667px #b300ff, 141px -208.66667px #9000ff, 211px -285.66667px #ff6600, 181px -128.66667px #1e00ff, 90px -123.66667px #c800ff, 189px 70.33333px #00ffc8, -18px -383.66667px #00ff33, 100px -6.66667px #ff008c;
  -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; }

.pyro > .after {
  -moz-animation-delay: 1.25s, 1.25s, 1.25s;
  -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
  -o-animation-delay: 1.25s, 1.25s, 1.25s;
  -ms-animation-delay: 1.25s, 1.25s, 1.25s;
  animation-delay: 1.25s, 1.25s, 1.25s;
  -moz-animation-duration: 1.25s, 1.25s, 6.25s;
  -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
  -o-animation-duration: 1.25s, 1.25s, 6.25s;
  -ms-animation-duration: 1.25s, 1.25s, 6.25s;
  animation-duration: 1.25s, 1.25s, 6.25s; }

@-webkit-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-moz-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-o-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-ms-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-webkit-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-moz-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-o-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-ms-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-webkit-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@-moz-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@-o-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@-ms-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }


/*fireworks end*/


@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.5;}
}
.blink{
	color: white;
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 2.6s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}