/* Minification failed. Returning unminified contents.
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,28): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(47,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(60,16): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(72,28): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(80,16): run-time error CSS1039: Token not allowed after unary operator: '-light'
(95,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(106,28): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(109,35): run-time error CSS1039: Token not allowed after unary operator: '-light'
(118,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(143,28): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(144,17): run-time error CSS1039: Token not allowed after unary operator: '-light'
(176,25): run-time error CSS1039: Token not allowed after unary operator: '-light'
(186,44): run-time error CSS1039: Token not allowed after unary operator: '-light'
(188,29): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(209,32): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(244,28): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(316,29): run-time error CSS1039: Token not allowed after unary operator: '-light'
(380,32): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(411,28): run-time error CSS1039: Token not allowed after unary operator: '-light'
(415,28): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(433,32): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(437,31): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(442,29): run-time error CSS1039: Token not allowed after unary operator: '-dark50'
(443,28): run-time error CSS1039: Token not allowed after unary operator: '-dark50'
(447,28): run-time error CSS1039: Token not allowed after unary operator: '-light'
(453,28): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(454,17): run-time error CSS1039: Token not allowed after unary operator: '-light'
(463,28): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(464,28): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(480,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(492,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(493,28): run-time error CSS1039: Token not allowed after unary operator: '-light'
(518,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(521,29): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(544,26): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(545,21): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(578,26): run-time error CSS1039: Token not allowed after unary operator: '-light'
(649,28): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(653,17): run-time error CSS1039: Token not allowed after unary operator: '-light'
(657,21): run-time error CSS1039: Token not allowed after unary operator: '-light'
(707,29): run-time error CSS1039: Token not allowed after unary operator: '-light'
(708,26): run-time error CSS1039: Token not allowed after unary operator: '-light'
(749,33): run-time error CSS1039: Token not allowed after unary operator: '-light'
(750,30): run-time error CSS1039: Token not allowed after unary operator: '-light'
(788,30): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(873,28): run-time error CSS1039: Token not allowed after unary operator: '-light'
(874,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(891,23): run-time error CSS1039: Token not allowed after unary operator: '-light'
(901,16): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(909,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(913,28): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(921,28): run-time error CSS1039: Token not allowed after unary operator: '-light'
(930,27): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(932,20): run-time error CSS1039: Token not allowed after unary operator: '-gridwidth'
(943,27): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(944,16): run-time error CSS1039: Token not allowed after unary operator: '-light'
(961,32): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(964,28): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(972,28): run-time error CSS1039: Token not allowed after unary operator: '-light'
(973,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(990,43): run-time error CSS1039: Token not allowed after unary operator: '-gridwidth'
(1005,21): run-time error CSS1039: Token not allowed after unary operator: '-gridwidth'
(1006,22): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1015,32): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1029,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1030,28): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1042,20): run-time error CSS1039: Token not allowed after unary operator: '-gridwidth'
(1043,20): run-time error CSS1039: Token not allowed after unary operator: '-gridwidth'
(1056,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1067,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1075,17): run-time error CSS1039: Token not allowed after unary operator: '-light'
(1076,28): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1160,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1161,28): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1162,16): run-time error CSS1039: Token not allowed after unary operator: '-gridwidth'
(1169,32): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1172,21): run-time error CSS1039: Token not allowed after unary operator: '-light'
(1180,35): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1181,37): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1185,36): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1306,28): run-time error CSS1039: Token not allowed after unary operator: '-light'
(1314,32): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1377,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1378,28): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1395,28): run-time error CSS1039: Token not allowed after unary operator: '-light'
(1398,31): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1405,32): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1427,27): run-time error CSS1039: Token not allowed after unary operator: '-dark50'
(1436,1): run-time error CSS1019: Unexpected token, found '@import'
(1436,9): run-time error CSS1019: Unexpected token, found 'url("https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Dosis:wght@300;400;500;600;700&display=swap")'
(1437,1): run-time error CSS1019: Unexpected token, found '@import'
(1437,9): run-time error CSS1019: Unexpected token, found 'url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap")'
(1438,1): run-time error CSS1019: Unexpected token, found '@import'
(1438,9): run-time error CSS1019: Unexpected token, found 'url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css")'
(1446,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1447,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1448,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1475,35): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1487,28): run-time error CSS1039: Token not allowed after unary operator: '-dark50'
(1511,16): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1518,16): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1533,16): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1548,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
 */
@import url("https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Dosis:wght@300;400;500;600;700&display=swap");
@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap);
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0px;
}

:root {
    --dark: rgba(36,44,98,1);
    --dark50: rgba(36,44,98,.5);
    --light: rgba(235,191,36,1);
    --mid: rgba(100,0,100,1);
}

body:first-child {
    margin: 43px;
}

html {
}

.container {
}

body {
    font-family: "Dosis", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0 auto 2rem auto;
    background-color: var(--dark);
    min-height: calc(100vh - 2rem);
}

.pagehead {
    font-family: "Racing Sans One", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    background-color:darkred;
    font-size:1.5rem;
    padding:6px 12px;
    color:white;
}

h1, h2, h3, h4, h5, h6 {
    /*    */
    font-weight: 700;
    margin: 0;
    color: var(--dark);
}

.text-danger {
    color: darkred;
    font-size: 10pt;
    /*display: block;*/
    margin-top: 3px;
}

.text-info {
    font-size:1rem;
    font-style:italic;
    color:var(--dark);
    margin:0 auto 1rem auto;
    text-align:center;
}

label {
    margin: 0;
}

footer {
    position: fixed;
    bottom: 0;
    background-color: var(--dark);
    height: 2rem;
    width: 100%;
    z-index: 2000;
    color:white;
}

footer a {
    color:var(--light);
}

.copyright {
    line-height: 2rem;
    text-align: center;
    margin: 0 auto;
}

.main,.main25 {
    position: relative;
    top: 0;
    margin: 0 auto;
    padding: 59px 1em 1em 1em;
    background-color: white;
    color: var(--dark);
    min-height: inherit;
    z-index: 4;
    background-color: rgba(255,255,255,.7);
}


header {
    display: grid;
    position: fixed;
    grid-template-columns: .1fr auto;
    background-color: var(--dark);
    text-align: center;
    width: 100%;
    border-bottom: 3px solid var(--light);
    z-index: 200;
}

h1, h2, h3, h4, h5, h6, p {
    /*    font-family: "Bubblegum Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
    font-weight: 700;
    margin: 0;
    padding: 0;
    color: var(--dark);
}

body:first-child {
    margin: 43px;
}

.nav-right {
    margin-left: auto;
}

img.logo {
    min-height: 48px;
    max-height: 48px;
}

header .logo {
    height: 40px;
    margin-top: -3px;
}

nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: var(--dark);
    color: var(--light);
    border: 0;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

.dropdown button {
    border: 0;
    font-size: inherit;
    font-family: inherit;
}

nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    margin-left: auto;
}

    nav ul li,
    nav button {
        display: inline;
        text-decoration: none;
        font-weight: 700;
        margin: 0 4px;
        outline: 0;
    }


        nav ul li a,
        nav button {
            color: var(--light);
            text-decoration: none;
            padding: 2px 6px;
            border-radius: .3rem;
        }

            nav a:hover,
            nav button:hover {
                content: '';
                border: 0;
                border-top: 3px solid var(--light);
                background-color: white;
                color: var(--dark);
            }

.nav-toggle {
    display: none;
}

.nav-toggle-label {
    display: none;
}

.dropdown {
    position: relative;
    height: inherit;
    display: flex;
}

    .dropdown ul {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: var(--dark);
        line-height: 2rem;
        opacity: 0;
        visibility: hidden;
    }

    .dropdown button:focus + ul {
        opacity: 1;
        visibility: initial;
        pointer-events: all;
    }

    .dropdown li:hover {
        display: block;
    }

.menu-admin,
.menu-league,
.menu-account,
.menu-nfl {
    position: relative;
}

.menu-account {
    width: fit-content;
}

.menu-subleague,
.menu-subadmin,
.menu-sub1,
.menu-sub {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    background-color: var(--dark);
}
    .menu-sub {
        width:220px;
    }
    .menu-subadmin {
        width:220px;
    }
    .menu-subleague {
        width:160px;
    }
    .menu-subadmin li,
    .menu-subleague li,
    .menu-sub1 li,
    .menu-sub li {
        display: block;
        line-height: 2rem;
    }

.menu-sub1 {
    right: 0;
    left: initial;
    width: 160px;
    display: none;
}

li.menu-admin:hover .menu-subadmin,
li.menu-league:hover .menu-subleague,
li.menu-account:hover .menu-sub1,
li.menu-nfl:hover .menu-sub {
    display: block;
}

@media screen and (max-width:1350px) {
    .main,.main25 {
        width: 100%;
        min-width: initial;
    }
}

@media screen and (max-width:680px) {
    nav {
        position: absolute;
        top: 59px;
        display: none;
        text-align: left;
    }

    header {
        display: flex;
    }


        header .logo {
            height: 56px;
            margin: 0 auto;
        }

    img.logo {
        min-height: 56px;
        max-height: 56px;
    }

    nav ul {
        display: block;
    }

        nav ul li {
            display: block;
        }

            nav ul li a {
                color: var(--light);
                text-decoration: none;
                padding: 2px 6px;
                border-radius: .3rem;
                line-height: 2rem;
            }

    .dropdown {
        position: relative;
        height: inherit;
        display: block;
    }

        .dropdown ul {
            top: 0;
            left: 100%;
        }

    .nav-toggle:checked ~ nav {
        display: block;
    }

    .nav-toggle-label {
        position: absolute;
        top: 0;
        left: 0;
        margin-left: 1em;
        height: 100%;
        display: flex;
        align-items: center;
    }

        .nav-toggle-label span,
        .nav-toggle-label span::before,
        .nav-toggle-label span::after {
            display: block;
            background-color: white;
            height: 2px;
            width: 1.5em;
            border-radius: 2px;
            position: relative;
        }

            .nav-toggle-label span::before,
            .nav-toggle-label span::after {
                content: '';
                position: absolute;
            }

            .nav-toggle-label span::before {
                bottom: 7px;
            }

            .nav-toggle-label span::after {
                top: 7px;
            }

    .menu-subadmin,
    .menu-subleague,
    .menu-sub1,
    .menu-sub {
        left: 100%;
        top: 0;
        display: none;
        background-color: var(--dark);
    }


}

@media screen and (max-width:640px) {
    .rules h1::before {
        content: '';
        width: initial;
    }

    .main,.main25 {
        padding: 59px 1em 1em 1em;
        width: 100%;
        min-width: initial;
    }
}

@media screen and (max-width:500px) {
    h1 {
        font-size: 2.15rem !important;
    }
    .main, .main25 {
        padding: 59px 1em 1em 1em;
        width: 100%;
        min-width: initial;
    }
}

.bg-light {
    background-color: var(--light) !important;
}

.bg-dark {
    background-color: var(--dark) !important;
    color: white;
}

p + p {
    margin-top: 10px;
}

table {
    /*margin-top: 1rem;*/
    border-spacing: 0;
}

tr {
    text-align: center;
}

    tr:empty {
        background-color: var(--dark);
    }

    tr:first-child {
        border-left: 1px var(--dark) solid;
    }

td, th {
    padding: 2px 4px;
    border-bottom: 1px var(--dark50) solid;
    border-right: 1px var(--dark50) solid;
}

th {
    background-color: var(--light);
}

.conference {
    font-weight:800;
    font-size: 1.25rem;
    background-color: var(--dark);
    color: var(--light);
}

h1 {
    font-size:2.5rem;
}
.result-flex {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--dark);
    border: 2px solid var(--dark);
    width: min-content;
    border-radius: 8px;
    overflow: hidden;
    gap: 1px;
    margin: auto;
}

.result-scores {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr repeat(4, 1fr);
    gap: 1px;
    min-width: 230px;
}

.result-player {
    color: var(--dark);
    background-color: white;
    flex-basis: 100%;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
}

.result-flex .head,
.result-flex .body,
.result-flex .prime-time {
    color: var(--dark);
    background-color: var(--light);
    padding: 0 4px;
    text-align: center;
}

.result-flex .prime-time,
.result-flex .head {
    font-size: .8rem;
    font-weight: 700;
}

.result-flex .body {
    background-color: white;
}

.result-flex .prime-time {
    background-color: red;
}

/*RULES CSS*/
.rules {
    display: grid;
    grid-template-columns: 3fr 5fr;
    gap: 1.5rem;
    background-color: white;
    color: var(--dark);
    border-radius: 8px !important;
    padding: 1rem 0;
    border-bottom: 3px var(--dark) solid;
    margin: 0;
}

.standings {
    grid-template-columns: 2fr 6fr;
}

    .rules + .rules {
        margin-top: 1.5rem;
    }

.rules-with-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

    .rules-with-table p {
        margin-top: 2em;
    }

    .rules-with-table table {
        border: 1px var(--dark) solid;
        color: var(--dark);
    }

.rules h1 {
    position: sticky;
    background-color: white;
    top: 73px;
    font-size: 2rem;
    padding: 15px;
    align-self: start;
    align-items: start;
    text-align: right;
    letter-spacing: 1px;
}

.rules .sidebar {
    position: sticky;
    background-color: white;
    top: 73px;
    font-size: 2rem;
    padding: 15px;
    align-self: start;
    align-items: start;
    text-align: right;
    letter-spacing: 1px;
}
.rules .sidebar::before {
    content: '';
    position: absolute;
    width: calc(100% + 1.5rem);
    top: -.75rem;
    left: 0;
    height: 100px;
    border-top: 6px var(--light) solid;
    border-radius: 10px;
}


.standings h1 {
    position:initial;
}

.standings-left {
    position: sticky;
    top: 73px;
}

.rules h1::before {
    content: '';
    position: absolute;
    width: calc(100% + 1.5rem);
    /*top: -.75rem;*/
    left: 0;
    height: 100px;
    /*border-top: 6px var(--light) solid;*/
    border-radius: 10px;
}

    .rules h1::after {
        content: '';
        position: absolute;
        width: calc(100% + 1.5rem);
        top: 102%;
        right: -5px;
        top: 0;
        line-height: 4.5rem;
    }

.rules p {
    font-size: 1rem;
    background-color: rgba(255, 255, 255, .2);
    text-align: justify;
    margin-top: 10px;
}

.rules h4 {
    font-size: 1.2rem;
    text-align: justify;
    margin: 12px 0;
}

.rules h3 {
    font-size: 1.5rem;
    text-align: justify;
    margin-top: 1rem;
}

.buttons ul {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    font-size: 1rem;
}

    .buttons ul:last-child {
        margin: 15px;
    }

.buttons li {
    display: block;
    margin: 0 4px 8px 4px;
    background-color: var(--dark);
    padding: 2px 10px;
    border-radius: 4px;
    line-height: 1.5rem;
    color: var(--light);
}

    .buttons li a {
        color: var(--light);
        font-family: inherit;
        border: 0;
        font-size: inherit;
        text-decoration: none;
        padding: 0;
        margin: 0;
    }

.buttons a:hover {
    opacity: 70%;
    color: white;
}

.break {
    flex-basis: 100%;
    height: 0;
}

.highlight {
    background-color: rgba(220,220,220,1);
    padding: 5px 20px;
    height: 100%;
    margin-right: 15px;
}

ul + p {
    margin-top: 15px;
}

.rules_head, .rules_important_head {
    font-size: 2rem;
    padding: 10px 20px;
    align-content: start;
}

.rules_important_head {
    color: red !important;
    border-radius: 8px 0 0 8px;
}

.rules_text {
    font-size: 1.6rem;
    padding: 5px 30px;
}

.rules-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    border-bottom: 3px var(--light) solid;
    border-top: 6px var(--light) solid;
    border-radius: 10px;
}

.rules-col-4 {
    grid-column: span 4;
}

.rules-col-3 {
    grid-column: span 3;
}

.rules-col-2 {
    grid-column: span 2;
}

.rules-row-2 {
    grid-row: span 2;
}

.rules-body {
    padding: 5px 20px;
    font-size: 1rem;
    text-align: justify;
}

@media (max-width:768px) {
    .rules-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem 0;
    }

    .rules h1::after {
        content: '';
    }

    .rules {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        border-bottom: 3px var(--light) solid;
        border-top: 6px var(--light) solid;
        border-radius: 10px;
    }

        .rules + .rules {
            margin-top: 1.5rem;
        }

        .rules h1 {
            justify-content: flex-start;
            text-align: center;
            letter-spacing: 1px;
            border: 0;
            top: 43px;
        }

        .rules + .rules {
            margin-top: 1rem;
        }

    .highlight {
        background-color: white;
    }

    .rules h1::before {
        border: none;
        width: 100%;
    }

    .rules-with-table {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

        .rules-with-table table {
            margin: 0;
            padding: 0;
            border: 1px var(--dark) solid;
        }

        .rules-with-table p {
            margin-top: 10px;
        }
}


.form-flex {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    margin-bottom: 1rem;
    /*margin-top: 1rem;*/
}

.form-grp {
    display: flex;
    gap: .5em;
    border-radius: .3rem;
}

.form-grp-rows {
    margin: 0 0 1rem 0;
    border-radius: .3rem;
}

    .form-grp-rows .form-input {
        margin-bottom: 1rem;
        /*min-width: var(--gridwidth);*/
    }

.form-input {
    position: relative;
    font-size: 1.25rem;
}
    .btn,
    .btn-red,
    .btn-light,
    .form-grp button,
    .form-grp-rows button,
    .form-input button,
    .form-grp a,
    .form-grp-rows a,
    .form-input a {
        background-color: rgba(36,44,98,1);
        border-radius: .3rem;
        color: white;
        border: 0;
        font-family: inherit;
        font-weight: 500;
        font-size: 1.25rem;
        margin: 0 0 2px 0;
        padding: 2px 8px 3px 8px;
        text-transform: uppercase;
        box-shadow: #aaa 3px 3px 5px;
        text-decoration: none;
    }

.btn {
    display:inline-block;
    margin-top:1rem;
}

.btn-close {
    margin:0;
}
.form-grp a, .form-grp button {
    display: inline-block;
    margin: 14px 0 0 0;
}

.btn-red {
    background-color:darkred;
    color:white;
}

.btn-red:hover {
    background-color:orangered;
}

.btn:hover,
.form-input button:hover,
.form-input a:hover {
    background-color: var(--light);
    color: var(--dark);
}

input, select, textarea {
    border: 0;
    border-top: 3px solid rgba(235,191,36,1) !important;
    border-radius: .3rem;
    overflow: hidden;
    padding-top: .8rem;
    padding-right: 1rem;
    width: fit-content;
    font-size: inherit;
    font-family: inherit;
    box-shadow: #aaa 3px 3px 5px;
}

    input:focus, select:focus, textarea:focus {
        outline: var(--light) 2px solid;
    }

.form-input label {
    position: absolute;
    left: .2rem;
    top: .1rem;
    z-index: 999;
    font-size: .7em;
    font-weight: bold;
    color:var(--dark) !important;
}

.field-validation-error {
    display:block;
}
/*PICKS CSS*/
:root {
    --gridwidth: 328px;
}

.nopicks {
    border: 2px solid var(--dark);
    grid-column: 1/-1;
    grid-row: 1/-1;
    padding: 2px;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    justify-content: center;
    background-color: var(--light);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.byes {
    display:flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(6, 1fr);
    border:2px solid var(--dark);
    border-radius:8px;
    max-width:var(--gridwidth);
    color:white;
    width:230px;
    gap:0px;
    text-align:center;
    justify-content:center;
    height:fit-content;
    background-color:white;
}

.byeshead {
    background-color:var(--dark);
    color:var(--light);
    text-align:center;
    grid-column:1 / 7;
    font-size:1.25rem;
    height:1.75rem;
    flex-basis:100%;
    /*width:stretch;*/
}

.byeteam {
    width:50px;
    padding:2px;
}

.tiebreakchoice {
    grid-column: 1 / span 6;
    padding: 8px;
    border-top: 2px solid var(--dark);
}
.tiebreakchoice a {
    background-color: var(--dark);
    color:white;
    border-radius:3px;
    text-decoration:none;
    padding:0 4px 2px 4px;
}
.tiebreakdone,
.tiebreakgame {
    background-color: var(--light);
    color: var(--dark);
    grid-column-start: 1;
    grid-column-end: 5;
    padding: 4px;
    text-align: center;
    font-weight:600;
}

.tiebreakdone {
    grid-column-start: 1;
    grid-column-end: 7;
}

.picks-grid, .results-grid {
    font-family: "Dosis", "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(4, var(--gridwidth));
    gap: 1rem;
    justify-content: center;
}
.results-grid {
    gap:1px;
}

.score-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.legends {
    max-width: var(--gridwidth);
    border: 2px var(--dark) solid;
    height: fit-content;
    background-color: white;
    border-radius:8px;
    overflow:hidden;
    text-wrap:wrap;
}

    .legends h2 {
        background-color: var(--dark);
        color: white;
        text-align: center;
    }

    .legends .legend-body {
        margin: 8px;
    }

.score-game-grid,
.game-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 1fr 1fr 1fr;
    gap: 1px;
    color: var(--dark);
    border: 2px solid var(--dark);
    border-radius: 8px;
    overflow: hidden;
    background-color: white;
    height:fit-content;
    /*margin:auto;*/
}

.score-game-grid {
    width:fit-content;
}
.game-grid {
    max-width:var(--gridwidth);
    min-width:var(--gridwidth);
}

.score-game-grid {
    grid-template-columns: 1fr 2fr;
}

.team-record {
    position: absolute;
    z-index: 1000;
    bottom: 0;
    right: 0;
    text-align: right;
    color: var(--dark);
    background-color: rgba(255,255,255,.6);
    font-size: .75rem;
    padding: 0 4px;
    pointer-events: none;
    font-weight:700;
}

.game-banner {
    font-size: 12px !Important;
    line-height: 19px;
    color: var(--dark);
    font-weight: 700;
    text-align: center;
    height: 19px;
}

.game-city {
    grid-column: span 2;
    color: var(--light);
    background-color: var(--dark);
}

.game-teams {
    padding: 0px;
    background-color: #ddd;
    text-align: center;
    position:relative;
    align-content:center;
    max-height:51px;
}

    .game-teams img:hover {
        background-color: rgba(0,60,60,.2);
    }

.game-numbers {
    min-width: 40px;
    font-size: 24px;
    font-weight: bold;
    line-height: 50px;
}

.game-image {
    padding: 0px;
    margin: 0px;
}

.winner, .loser, .thepick {
    position: relative;
    overflow:hidden;
}
.winner {
    background-color: #CAA887 !important;
    font-weight:700;
}

.loser {
    background-color: rgba(0,0,0,.4);
    color: black;
    opacity: 50%;
}

.tied {
    background-color: #CCC;
}

.game-result {
    grid-column: span 4;
}

.game-result {
    grid-column: span 3;
}

.leading {
    background-color: #ccc;
}

.scoring {
    background-color: #444444;
}

.prime-time {
    background-color: #F30;
}

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

.weekly-results-grid {
    display:grid;
    grid-template-columns:1fr 1fr 1fr; 
    gap:1rem;
}

.player-grid {
    display: grid;
    grid-template-columns: 4.5fr 1.25fr 1.25fr .75fr .75fr .75fr .75fr;
    text-align: center;
    background-color:white;
    color: var(--dark);
    border: solid 1px var(--dark);
    width:var(--gridwidth);
    height:fit-content;
    font-size:14px;
}

    .player-grid .head,
    .player-grid .head-last {
        background-color: var(--dark);
        border-right: 1px solid grey;
        font-weight: 600;
        color: var(--light);
    }

    .player-grid .head-last {
        border-right: 0;
    }

    .player-grid .body {
        border-top:1px solid var(--dark);
        border-right:1px solid var(--dark);
    }

    .player-grid .body-last {
        border-top: 1px solid var(--dark);
        border-right: 0;
    }

@media (max-width:1601px) {
    .weekly-results-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width:1200px) {
    .weekly-results-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width:800px) {
    .weekly-results-grid {
        display: grid;
        grid-template-columns: 1fr;
    }
    
    .container25 {margin-top:1rem !important;}
}

.legend_box {
    height: 20px;
    width: 40px;
    font-size: 8pt;
    line-height: 20px;
    font-weight: bold;
    text-align: center;
    float: left;
    margin: 0 5px 0 0;
}

.legend {
    border: 2px white solid;
    margin: 2rem 0;
    max-width: 400px;
    border-radius: 1rem;
    overflow: hidden;
}

.legend-head {
    background-color: peru !important;
    font-size: 2rem;
    padding: 10px 18px;
}

.legend-body {
    display: flex;
    white-space: nowrap;
    gap: .25rem;
    flex-wrap: wrap;
    font-size: 1rem;
    font-size: .85rem;
    margin: 8px 0;
}

.admin-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.admin-columns {
    column-count: 4;
}

.badge {
    font-size: .75em;
    height: .75em;
    padding: 1px 3px;
    background: #ccc;
    border-radius: .25em;
    font-weight: 600;
}

.admin-rows-grid {
    display: grid;
    grid-template-columns: 1fr 4fr;
    gap: 3px;
}

.admin-rows {
    display: block;
    padding: 1px;
    width: fit-content;
}

.division-head {
    background-color: #CCC;
    padding: 2px 6px;
    font-weight: 600;
    min-width: 150px;
}

.admin-conference {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.admin-division {
    border: 1px #ccc solid;
}

.assignAlign {
    padding: 0 6px;
}

.assignLeague {
    padding: 0 6px;
}

.btn-light {
    background-color: var(--light);
    display: block;
    padding: 2px;
    font-weight: 600;
    text-align-last: center;
}

    .btn-light:hover {
        background-color: var(--dark);
        color: white;
    }

a.btn-light {
    text-decoration: none;
    color: inherit;
}

@media screen and (max-width:1200px) {
    .admin-columns {
        column-count: 3;
    }
}

@media (max-width:769px) {
    .admin-columns {
        column-count: 2;
    }
}

@media (max-width:480px) {
    .admin-columns {
        column-count: 1;
    }
}

.NoPick {
    border:1px dashed red;
}

.clickme, .noclick, .thepick {
    width:100px;
    position:absolute;
    left:-10px;
    top:-6px;
}

.clickme:hover {
    outline:3px green solid;
    border-radius:1rem;
}

.clickme:hover::before {
    content: "Pick!";
}


body {
}

.playoff-grid {
    font-family: "dosis", "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: flex;
    flex-wrap:wrap;
    /*grid-template-columns: repeat(4, var(--gridwidth));*/
    gap: 1rem;
}

.playoff-game-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 1fr 1fr 1fr;
    gap: 1px;
    color: var(--dark);
    border: 2px solid var(--dark);
    border-radius: 8px;
    overflow: hidden;
    background-color: white;
    height: fit-content;
    width:fit-content;
}

.playoff-game-grid {
    grid-template-columns: 1fr 1.5fr 1.5fr 1fr 1fr;
}

.playoff-round {
    flex-basis:100%;
    font-size: 1.5rem;
    font-weight: 800;
    color: darkred;
    background-color: var(--light);
    padding: 6px 10px;
    border-bottom:3px solid darkred;
    border-top:5px solid var(--dark);
    border-left:30px solid darkred;
    margin-bottom: 1rem;
}

.playoff_result, .playoff_result_bottom {
    grid-column: 1 / span 5;
    border-top: 2px solid var(--dark);
    margin-top: -1px;
    display:flex;
    background-color:white;
    gap:1px;
}

.playoff_result_bottom {
    border-top: 0;
}

.playoff_players,
.playoff_seeds {
    line-height: 22px;
    text-align: center;
    /*padding: 0 4px;*/
    flex-basis:50%;
    background-color:#dddddd;
    border-top:1px white solid;
}

.playoff_seeds {
    background-color:var(--dark50);
    color:white;
    font-size:.75rem;
    font-weight:700;
    line-height:18px;
    border-top:0;
}


@import url("https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Dosis:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0px;
}

:root {
    --dark: rgba(36,44,98,1);
    --light: rgba(235,191,36,1);
    --mid: rgba(100,0,100,1);
}

body:first-child {
    margin: 43px;
}

html {
}

body {
    font-family: "dosis", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0 0 2rem 0;
    background-color: lightgray;
    min-height: calc(100vh - 2rem);
    z-index:-2;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Racing Sans One", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 0;
}

h1 {
    border-bottom: 2px solid var(--dark);
    margin-bottom:8px;
}

.container25 {
    margin: 0 auto;
    width: fit-content;
    background-color: rgba(255,255,255,.8);
    padding: 1rem;
    border-radius: 1rem;
    max-width: 600px;
    position: relative;
    border: 1px solid var(--dark50);
    text-wrap:wrap;
}

body {
    background-image: url("../Images/LogoTeams.svg");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:40%;
    background-attachment:fixed;
    background-blend-mode: overlay;
    /*opacity:.1;*/
}

.container25 h1 {
    position: sticky;
    background-color: white;
    top: 59px;
    font-size: 2rem;
    padding: 0 0 9px 0;
    letter-spacing: 1px;
}

.container25 h1, .container25 a {
    color:var(--dark);
}

.section25 {
    margin: 0;
    /*background-color: white;*/
    padding: 1rem;
    color:var(--dark);
}

.section25_dark {
    /*background-color: white;*/
    color:white;
}

.section25_grey {
    /*background-color: grey;*/
    color:white;
}

.section25_light {
    /*background-color: white;*/
    color:var(--dark);
    justify-content:center;
}

.section25_flex {
    display: flex;
    flex-wrap: wrap;
}

.main25 {
    position: relative;
    top: 0;
    margin: 0;
    padding: 40px 0 0 0;
    /*background-color: white;*/
    color: var(--dark);
    min-height: inherit;
    z-index: 4;
    background-color: rgba(255,255,255,.7);
}

@media (max-width:679px) {
    .main25 {
        padding-top:59px;
    }

    body {
        background-size:95%;
    }
}