@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,700';
:root{
    --bg-c: #162026;
    --bg-c2: #0c1419;
    --fg-c: #959a9d;
    --fg-red: #bb3b1d;
    --fg-yel: #ffd81a;
    --fg-gre: #1dbb6f;
    --XXS: 0.25rem;
    --XS: 0.5rem;
    --S: 0.75rem;
    --M: 1rem;
    --L: 1.3rem;
    --XL: 1.6rem;
    --XXL: 2.4rem;
}
*, *::before, *::after {box-sizing: border-box;}
html {font-size: 12pt;}
html, body {margin: 0; height: 100%;}
body {display: flex; flex-direction: column; background-color: var(--bg-c); text-align: center; font-family: 'Open Sans', sans-serif; font-size: var(--M); color: var(--fg-c);}
#main {flex-grow: 1; position: relative; padding: var(--S);}

@media only screen and (min-width: 750px)
{
    html {font-size: 10pt;}
    body {background-color: white;}
    #main {width: 100%; max-width: 1080px; min-width: 360px; margin: 0 auto; background-color: var(--bg-c);} a.home {display: none;}
}

table, input, select, ul, li, div, p { font-family: inherit; font-size: inherit;}
a {font-family: inherit; font-size: inherit; line-height: inherit; text-decoration: none; color: inherit;}
table {border-collapse: collapse; margin: 0px auto;}
ol, ul {margin: 0px; padding: 0px; 	list-style-position: inside;}

h1 {font-size: var(--XL); text-align: center; line-height: 0.8em; padding: var(--XS) 0; margin: 0; margin-bottom: var(--S); color: white;}
h1.double {padding-bottom: 0;}
h1.double .settings {margin-left: var(--XL);}
h1 div {display: flex; align-items: center; justify-content: center;}
h1 div span {font-size: 0.5em; line-height: 1em;}
h1 div span+span {margin-left: var(--XXS);}
h2 {font-size: var(--L); text-align: center; line-height: 1em; margin: var(--S); color: white;}
h2 span {font-size: 0.7em; line-height: 1em; font-weight: normal;}

h3 {font-size: var(--L); text-align: left; line-height: 1rem; margin: var(--S) 0 0 0; padding: 0; color: white;}
pre {text-align: left;}
.header {display: flex; align-items: center; margin-bottom: var(--M);}
.header img {width: var(--XXL);}
.header h1 {white-space: nowrap; flex-grow: 1; font-size: var(--XL); margin-bottom: 0; font-weight: bold;}
.header .settings {font-size: var(--XL); width: var(--XXL);}

.hide {display: none !important;}
.index {padding-bottom: var(--XXL);}
.app {font-weight: normal; position: fixed; bottom: 0; left: 0; width: 100%; font-size: var(--M); background-color: var(--bg-c2); line-height: var(--XXL); margin: 0;}
.app .ver {color: var(--fg-c); position: absolute; right: var(--S); font-size: inherit;}

.middle {height: 100%; display:flex; flex-direction: column; justify-content: center;}
.middle .logo {flex-basis: 33%; flex-shrink: 0; font-size: 1.5rem; color: white; display: flex; flex-direction: column; justify-content: center;}
.middle .logo img {width: 5rem; display: block; margin: 0 auto;}
.middle form {margin: 0; flex-grow: 1;}
.middle h2 {margin-bottom: 1rem;}

a.home {position: fixed; left: var(--S); z-index: 9999;}
a.home img {width: var(--XXL);}

ul.charlist,
ul.menu {list-style: none;}
ul.menu li {padding: 0.25rem; margin: 0; text-align: center; display: flex;}
ul.menu li label,
ul.charlist li a,
ul.menu li a {display: inline-block; padding: var(--S); margin: 0 var(--XXS); font-size: var(--XL); flex-grow:1; border: 2px solid #617986; border-radius: var(--S); background-color: #0c1419; color: white; font-weight: bold;}
ul.menu li a i {font-size: 1.1em;}

ul.menu li label {display: flex; align-items: center;}
ul.menu li label small {display: inline-block; font-size: 0.9em;}
ul.menu li label.name {width: 76%}
ul.menu li label.training {width: 22%; background-image:url('training.png'); background-repeat: no-repeat; background-position: center center;}
ul.menu li label.special {color: #8eb51e; line-height: 1em; font-size: 1em;}
ul.menu li label .name {flex-grow: 1; text-align: center;}
ul.menu li a:hover {background-color:#445862;}
ul.menu li a.action {background-color:#617986; border-color: white; color: white;}
ul.menu li a.action:hover {background-color: #0c1419;}
ul.menu li a.action.bottom {margin-top: var(--XL);}

ul.menu.main-first-row {display: flex; align-items: center; justify-content: center;}
ul.menu.main-first-row a.ic-live {color: var(--fg-c); position: relative;}
ul.menu.main-first-row a.ic-live .count {position: absolute; width: 100%; top: 2px; left: 0; font-size: var(--S);}
ul.menu.main-first-row a.ic-live .count .nr {margin: 0 var(--XXS);}
ul.menu.main-first-row a.ic-live .nr-today,
ul.menu.main-first-row a.ic-live.today {color: var(--fg-gre);}
ul.menu.main-first-row a.ic-live .nr-live,
ul.menu.main-first-row a.ic-live.live {color: var(--fg-red);}
ul.menu.main-first-row a.ic-live .nr-coming,
ul.menu.main-first-row a.ic-live.coming {color: var(--fg-yel);}
ul.menu.main-first-row li {flex-grow: 1; text-align: center;}

ul.menu.logout {margin-top: var(--L);}

a.anchor {visibility: hidden; position: absolute; left: 0; margin-top: -6rem; display: inline !important; width: 1px !important;}
ul.charlist {padding: var(--M) var(--S); padding-bottom: var(--XXS); display: flex; flex-wrap: wrap; justify-content: center;  position: sticky; top: -0.5em; z-index: 10;}
ul.charlist li {width: 2.6em;}
ul.charlist li a {display: block; font-size: 0.75em; line-height: 1em; text-align: center; margin: 0 2px; margin-bottom: var(--XXS);}

hr {border: 1px dotted #617986;}

div.msg {text-align: center; font-size: var(--XL); padding: var(--S);}
div.error {color: var(--fg-red);}

form {margin: 1rem 0px; padding: 0; text-align: center;}
form input, form select {outline: none;}
form input[type=submit] {-webkit-appearance: none; -webkit-border-radius: none; display: inline-block; width: 90%; font-size: 1.6rem; border: 2px solid white; border-radius: var(--S); background-color: #617986; color: white; font-weight: bold; margin-top: var(--S); padding: var(--S);}
form input[type=submit]:active, ul li a.active {background-color: white; color: black;}
form input[type=submit]:hover {cursor: pointer; background: black;}
form select,
form input[type=password],
form input[type=number],
form input[type=text] {-webkit-appearance: none; -webkit-border-radius: none; padding: var(--S); border-radius: var(--S); font-size: 1.6rem; width: 90%; margin: 0 auto; margin-bottom: var(--S); background-color: white; border: 1px solid white; color:#2b353b;}
::placeholder {opacity: 0.25;}
form select option{text-align:center;}

form.sbmt-fixed {padding-bottom: 3rem;}
form.sbmt-fixed .fixed {position: fixed; bottom: var(--XXS); left: 5%; margin-top: 0;}

.game .navi {display: flex; align-items: center; flex-wrap: wrap; position: relative; z-index: 10; padding-top: var(--XL); padding-bottom: var(--XXL)}
.game .navi input {margin: 0 var(--XS); flex-basis: 25%; flex-grow: 1;}
.game .navi .navi-done {flex-basis: 100%; margin-top: var(--XL); font-size: 3em;}
table.holes {width: 100%; z-index: 10; position: relative;}
table.holes {font-size: 0.9em;}
table.holes td {padding: var(--XXS) 0;}
table.holes td input[type=number] {width: 60px; text-align: center; margin: 0;}
table.holes td.nr {font-size: 2.5em; font-weight: bold; color: white; padding-right: var(--S); text-align: center;}
table.holes td.name {font-size: 1.2em; padding-right: var(--S); font-weight: bold; color: white; text-align: right; line-height: 1em;}
table.holes td.name .score {color: var(--fg-c); font-size: 0.8em;}
table.holes td.inputs .wrap {display: flex; justify-content: center;}
table.holes a.sub {margin-left: var(--XL); margin-right: var(--XS)}
table.holes a.add,
table.holes a.sub {display: inline-block; padding: var(--S); font-size: var(--M); border: 2px solid white; border-radius: var(--S); background-color: #617986; color: white; font-weight: bold; width: 4em; line-height: 2em; text-align: center;}

label input {margin-right: var(--S);}

ul.menu li label.active {background-color: white; color: black;}
ul.menu li label.active.training {background-image: url('training-on.png');}

#holenr {position: absolute; right: var(--S); width: 12rem; overflow: hidden;}
#holenr .nr {position: absolute; top: var(--XXS); width: 100%; color: black; text-align: center; font-weight: bold; font-size: 1.2em;}
#holenr .distance {position: absolute;top: 0; right: 0; background-color: black; padding: var(--XXS) var(--XS); font-size: 0.8em; border-radius: var(--XXS); color: white;}
#holenr.i2 svg .thegroup {fill: #b40000; stroke: #b40000;}
#holenr.i3 .nr,
#holenr.i2 .nr {color: white;}
#holenr.i3 svg .thegroup {fill: #4ba524; stroke: #4ba524;}
#holenr.i0 svg .thegroup {fill: #e1ed44; stroke: #e1ed44;}

table.result {font-size: 0.85em; margin-bottom: var(--XXS);}
table.result tr th {color: white; line-height: 1em; padding: 0 2px; min-width: 2.2rem; padding-bottom: var(--XS);}
table.result tr th span.owner {color: var(--fg-gre);}
table.result tr th span.result {padding-top: var(--XXS); display: block;}
table.result tr td {text-align: center; padding: 1px;}
table.result tr td span {display: block; font-weight: bold;}
table.result tr td span.training {font-weight: normal; color: #999;}
table.result tr td div.starting-hole {font-weight: bold;}
table.result tr td:first-child {font-size: 1em; color: white; text-align:center; line-height: 1em; text-align: right; min-width: 0px; padding-right: var(--S);}
table.result tr td:first-child span {font-size: 0.75em; display: inline; font-weight: normal;}
table.result tr td span.score {background-color: var(--fg-red); color: black; border-radius: var(--XS);} /*red is default after 3xboggey*/
table.result tr td span.v-3 {background-color: white; color: #000; border-radius: 0px;}/*albatross*/
table.result tr td span.v-2 {background-color: transparent; color: #00FF00;}/*holar aka eagle*/
table.result tr td span.v-1 {background-color: transparent; color: #0066cc;}/*birdie*/
table.result tr td span.v0 {background-color: transparent; color: white;}/*par*/
table.result tr td span.v1 {background-color: #efefa5;}
table.result tr td span.v2 {background-color: #f4a526;}
table.result tr td span.v3 {background-color: #f47142;}

.players h2 .next {display: block;}
.players h1 span {font-size: 0.7em;}
.players .menu.games li a {font-size: var(--L); line-height: var(--S);}
.players .menu.games li a .score {font-size: 0.8em;}
.players .menu.games li a .date {font-size: 0.5em; line-height: 0.5em; padding-top: var(--XS); display: inline-block;}
.players .menu.games li a .date small {font-size: 0.8em;}
.players .menu.games li a .names {color: #8eb51e; font-size: 0.5em; padding-top: var(--S); display: inline-block;}

table.stats {min-width: 300px; font-size: var(--S);}
table.stats th {color: white; padding: var(--XXS); padding-top: 0; border-bottom: 1px solid var(--fg-c);}
table.stats td {text-align: center; padding: var(--XS) var(--XXS);}
table.stats td.name {color: white; font-size: 1.3em; text-align: left;}
table.stats td.name a {color: white; font-size: 1em;}
table.stats td.score a {display: block; padding: var(--XXS); border-radius: var(--S); background-color: #617986; color: white;}
table.stats tr.total td {border-top: 1px solid var(--fg-c); color: white;}

.hof h2 {font-weight: normal; font-size: var(--L); border-bottom: 1px solid var(--fg-c); padding: var(--XS) 0; margin: var(--XS) var(--XXL);}
.hof h2 .ranking {font-size: var(--XL);}
div.top {padding-bottom: var(--S);}
div.top table th {font-size: 0.8em;}
div.top table td {padding: 0 var(--XXS); font-size: 1em;}
div.top table td.nr {font-weight: bold;}
div.top table tr.row-1 td {color: yellow; font-size: 1.3em;}
div.top table tr.row-2 td {color: silver;  font-size: 1.2em;}
div.top table tr.row-3 td {color: #8C7853;  font-size: 1.1em;}
div.top table td.name {padding: 0 var(--S);}
div.top table td.score {text-align: center;}
div.top table td.score sup {font-size: 0.6em;}

table.top-holes {margin-bottom: var(--S); font-size: var(--M);}
table.top-holes td.name {text-align: right;}
table.top-holes td.players {text-align: left;}
table.top-holes td {padding: 2px; font-size: 1.20em; color: var(--fg-red);}
table.top-holes td.value {padding: 2px var(--S);}
table.top-holes tr.row-4 td {color: yellow;} /*ACE not actually -4*/
table.top-holes tr.row-3 td {color: #000; background-color: white;}
table.top-holes tr.row-2 td {color: #00FF00;}
table.top-holes tr.row-1 td {color: #0066cc;}
table.top-holes tr.row0 td {color: #959a9d;}
table.top-holes tr.row1 td {color: #efefa5;}
table.top-holes tr.row2 td {color: #f4a526;}
table.top-holes tr.row3 td {color: #f47142;}
table.top-holes td.value {text-align: center;}

#back {padding: var(--M) var(--S); color: white; font-size: var(--XL); display: inline-block; text-align: center; width: 90%; border: 1px solid #617986; border-radius: var(--S); margin: var(--S) auto 0px auto;}
#back:hover {background-color: white; color: black;}

#loader {display: none; position: absolute; top: 0px; right: 0px;}

a span.pos {color: var(--fg-red) !important;}
a span.neg {color: #0066cc !important;}
div.nothing {height: 60px; background: transparent url('nodisc.png') no-repeat center center;}
.graph-cont .graph {overflow: auto; padding-bottom: var(--S);}
.graph-legend {padding-bottom: var(--XXS);}
.graph-legend span {margin: 0px 4px; font-size: 0.9em;}

.courses ul.menu li {position: relative;}
ul.menu li .rating {position: absolute; color: white; background-color: #617986; font-size: 0.75em; padding: 1px 4px; border-radius: 5px; right: 7.5%; top: -2px;}

.courses ul.menu.par {display: flex; flex-wrap: wrap;}
.courses ul.menu.par li {flex-basis: 33%;}
.courses ul.menu.par li label {width: 100%; display: block; text-align: center;}
.courses ul.menu.par li label span.par {margin-left: var(--XS); color: var(--fg-red); font-size: 1.2em;}
.courses ul.menu.par li label span.par-3 {color: white;}

.tag-join {font-size: 0.6em; color: var(--fg-gre); line-height: 1em;}

#metrix-today {padding-top: var(--XL);}