:root {
    --primary-color: #6f32d8;
    --primary-hover: #9060e1;
    --secondary-background: #210f40;
    --box-background: #ede5fa;
    --box-alt-background: #d3bff3;
    --text-delight: #aaa;
    --action: #007300;
    --action-hover: #1f921f;
    --logo: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CradialGradient id='rg' cx='.2' cy='.2' r='1.2'%3E%3Cstop offset='0' style='stop-color:transparent'/%3E%3Cstop offset='1' style='stop-color:rgba(0,0,0,1)'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle style='fill:%23833bff' cx='50' cy='50' r='50'/%3E%3Ccircle style='fill:url(%23rg)' cx='50' cy='50' r='50'/%3E%3Cg transform='translate(16.3,23.5) rotate(36) skewX(19) scale(1.08,1.18)'%3E%3Crect width='40' height='30' style='stroke:black; stroke-width:2px; fill:white' rx='9.5' ry='9.5'/%3E%3Cpath d='M12.5 6L7 19 18.5 19M14.5 13.5L14.5 25.5M27 7C34 7 34 24 27 24 20 24 20 7 27 7' style='stroke:%23333; stroke-width:2.8px; fill:none'/%3E%3C/g%3E%3C/svg%3E");
}

svg.progress { width: 100%; height: 2em}
svg.progress rect {
    height: 2em;
    rx: 1em;
    ry: 1em;
    border-radius: 2em;
    fill: var(--text-delight);
}
svg.progress rect + rect { fill: var(--primary-color); }
svg.progress text { translate: 50% calc(50% + 1pt); dominant-baseline:middle; text-anchor:middle; fill:white; font-size:1.5em;}
* { box-sizing: border-box; }

div.logo, div.nav-logo {
    display: inline-block;
    width: 180pt; max-width: 90%; aspect-ratio: 1; margin-bottom: 8pt;
    background-image: var(--logo);
}
div.nav-logo {height: 65pt; width: 65pt;vertical-align: middle; margin: 0 .8em 1em 0}
p,ul,ol,table,dl {text-align: justify; font-size: 14pt}
.center {text-align: center}
ol li +li {margin-top: 0.5em}
p, h2 {padding: 0; margin: 0}
h2 {margin: 0.5em}
table {margin: 0 0.25em 1em 0.25em}
p {margin: 0 0 1em 0}

nav ul {margin: 0 0 1em 0; padding: 0; text-align: center}
nav li, nav section {display: inline-block}

header { padding-top: 0}
header span {display: inline-block; text-align: left; vertical-align: middle}
header span a {display: inline-block; margin-bottom: 0.5em}
header h1 {margin:  0 0 12pt 0; padding:0}

div.sets {vertical-align: top}

.tipNote {
    background-color: var(--box-background);
    width: 250pt; max-width: 95%; border: 2pt black solid; padding: 0.5em; float: right; margin: 0.5em 0 1em 1em
}
.tipNote p, .tipNote h3, .tipNote h4 {margin: 0.5em 0 0 0; padding: 0; font-size:14pt}
.tipNote h4 {font-weight: normal; font-style: italic}
.tipNote h3 {margin: 0}

table.draws caption, label {color: var(--primary-color); font-weight: bold}
table.draws {margin: 0 auto 1em auto}
table.draws {border-collapse: collapse}
table.draws th {border-bottom: 1pt black solid}
table.draws td, table.draws th {padding: 0.25em; text-align: center}
table.draws td:first-child, table.draws th:first-child {padding-left: 0}
table.draws td:last-child, table.draws th:last-child {padding-right: 0}
table.draws td {color: var(--text-delight)}
table.draws b {color: var(--primary-color); font-weight: normal}
table.draws i {font-weight: bold; font-style: normal}

a[href] {color: var(--primary-color)}
a[href]:hover {color: var(--primary-hover)}

.set {
    vertical-align: top;
    background-color: var(--box-alt-background); /*#ddf;*/ 
    border-radius: 5pt;
    display: inline-block; 
}
.set caption {font-weight: bold; color: var(--primary-color); background-color: var(--box-background); border-radius: 5pt 5pt 0 0}

.set td, .ticketErrors tr td:first-child {
    margin: 0 0.5pt 0 0.5pt;
    padding: 3pt 2pt 0pt 2pt;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    width: 23pt; height: 23pt;
}

.set td {
    background-color:white;
}

.fb-like {margin-bottom: 1em; clear: both}
.fblogo {width: 2em; height: 2em}

button, select, a[href].next, a[href].button, nav li a[href] {font-size: 14pt; 
    background-color: var(--primary-color); color: white; border-width: 0; border-radius: 5pt; cursor:pointer;
    padding: 4pt; margin: 2.5pt; font-weight: normal; display: inline-block; text-decoration: none}

button:hover, .button:hover, nav li a[href]:hover {background-color:var(--primary-hover);color:white}

legend {font-weight: bold; color: var(--primary-color); font-size: 16pt; padding: 5pt; text-align: left}
fieldset {border-radius: 8pt; border-color: var(--primary-color); border-width: 3pt; margin: 0 5pt 10pt 5pt; display:inline-table}

table.stats {background-color: var(--box-alt-background); border-radius: 0 0 5pt 5pt; border-collapse: collapse; 
    display: inline-table; overflow: hidden}
table.stats caption {font-weight: bold; color: var(--primary-color); background-color: var(--box-background); border-radius: 5pt 5pt 0 0}
table.stats thead tr > th {background-color: var(--box-background)}
table.stats tbody tr:nth-child(even) > * {background-color: var(--box-background)}
table.stats tr>* {border-left: 2pt white solid; padding: 2pt 4pt 2pt 4pt}
table.stats tbody td {text-align: right}
table.stats tbody tr.notes td { font-size: 8pt; text-align: left }
table.stats sup { font-size: 8pt }
table.stats tr>*:first-child {border-left: none} 
input[type=number], textarea {font-size: 14pt; border: 2pt var(--primary-color) solid; background-color: var(--box-background)}
input[type=number] {width: 3em}
button.next, a[href].next {background-color: var(--action); cursor:pointer}
button.next:hover, a[href].next:hover {background-color: var(--action-hover)}

td.passAlt {background-color: var(--box-background)}
td.invalid {background-color: #f66}
td.duplicate {background-color: #f80}
td.missing {background-color: #dd0}
td.superfluous {background-color: #8af}

table.ticketErrors { margin-left: auto ; margin-right: auto;}

p.result {display: inline-block}

.block {display: inline-block; vertical-align: top}

.build label, dt {font-weight: bold}
.build {display: block}
dd+dt {margin-top: 0.5em}


html {
    background-color: var(--primary-color);
    background-image: 
        linear-gradient(135deg,transparent 34%,var(--primary-color) 34%,var(--secondary-background),var(--primary-color) 66%,transparent 66%),
        linear-gradient(to bottom,var(--primary-color),var(--secondary-background),var(--primary-color));
    background-attachment: fixed, fixed;
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    font-size: 12pt;
}

body {
    min-height: calc(100vh - 50pt);
    margin: 25pt auto;
    padding: 25pt; border-radius: 25pt;
    background-color: white;
    width: 714pt;
    max-width: 100%;
}

article {
    width: 100%;
    max-width: 660pt; 
    margin: 0 auto 0 auto;
    padding: 0 2pt 0 2pt;
    min-height: calc(100vh - 116pt);
}

article.index { min-height: 0 }

@media screen and (max-width:764pt) and (min-width:664pt) {
    body {
        margin: calc((100% - 664pt) / 4);
        padding: calc((100% - 664pt) / 4 + 2pt);
        width: calc(664pt + (100% - 666pt) / 2);
        min-height: calc(100vh - (100vw - 666pt) / 2);
        border-radius: calc((100vw - 664pt) / 4);
    }
}

@media screen and (max-width:664pt) {
    body {
        margin: 0;
        padding: 2pt;
        border-radius: 0%;
        min-height: 100vh;
    }
}

.chart { font-family: 'Roboto', sans-serif; display: inline-block; vertical-align: top; margin: 0 0 1em 0 }

.chart .datagroup1 { fill:  var(--primary-color)}
.chart .datagroup2 { fill:  var(--box-alt-background)}

.chart2 .datagroup1 { fill:  var(--box-background)}
.chart2 .datagroup2 { fill:  var(--primary-color)}
.chart2 .datagroup3 { fill:  var(--box-alt-background)}

.chart text.line { font-size: 5pt; text-anchor: end; dominant-baseline:middle; fill: #666}
.chart text.scale { font-size: 5pt; text-anchor: middle;}
.chart .nums { stroke: #888; stroke-width: 0.25pt; }
.chart .zero { stroke: #000; stroke-width: 0.5pt; }
.chart .nums2 { stroke: #ccc; stroke-width: 0.25pt; }
.chart .title { font-weight: bold; fill: var(--primary-color); font-size: 6pt;  text-anchor:middle}
.chart .legend, .chart .labels { font-size: 6pt; text-anchor:middle; fill: black}
.halfgap { margin: 0 0 0.5em 0 }


/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

svg #fbfill:hover { fill: var(--primary-hover) }

svg.copy { width: 12pt; height: 12pt; stroke: var(--primary-color); cursor: pointer }
svg.copy:hover { stroke: var(--primary-hover) }
svg.copy:active { stroke:var(--action) }

footer { margin: 0; padding: 0; }