div.options {
    width: 100%;
    padding-bottom: .5em;
    gap: 0;
    flex-wrap: wrap;
}
div.hint {
    height: 1em;
    font-size: 1.2em;
    margin-top: 0.5em;
    color: lightgreen;
    text-align: center;
    flex-basis: 80%;
    justify-content: center;
//    margin-left: 30%;
//    position: relative;
}
div#main {
//    overflow-x: auto;
    max-width: 90%;
    margin-left: 2%;
    scroll-snap-type: x mandatory;

}
div.score-mode {
    align-items: baseline;
    margin-right: 2em;
    gap: .4em;
}
div.section-legend > button.legend-toggle {
    font-size: 20px;
    font-weight: bold;
}
div.section-legend button.legend-toggle:hover {
    background-color: var(--color-active);
}
div.section-legend span.tip-text {

}
div.section-legend span.tip-emoji {
    margin-left: 3em;
    font-size: 100%;
    font-weight: bold;
}
div.option-group {
    margin-right: 1em;
}
div.option-row-break {
    flex-basis: 100%;
    height: 0;
}
div.width-note {
    font-size: 1.2em;
    padding-top: .8em;
    padding-bottom: .2em;
    text-align: center;
    color: yellow;
}

table.main {
    width: max-content;
    margin-top: .7em;
}
table, tr, th, td {
//    border: 1px solid;
}
td {
    border: none;
//    border: 2px solid black;
}
th:nth-child(even) {
    background: #2f2f2f;
}
th:nth-child(odd) {
    background: #3a3a3a;
}
colgroup.season-start {
    border-left: 2px dotted lightblue;
}
tr.heading-seasons {
//    display: flex;
}
th.player, td.player  {
    position: sticky;
    left: 0;
    z-index: 3;
}
th.overall, td.overall {
    position: sticky;
    z-index: 3;
}
th.week, th.day {
    font-size: 100%;
    font-family: "Lucida Console", monospace;
}
th.player, td.player {
    width: 13%;
    overflow: hidden;
    text-overflow: ellipsis;
}

th.overall, td.overall {
    width: 5%;
}
span.overall {
    font-size: 90%;
}
th.overall-combined {
    padding: 0.5em;
}

span.overall.full-credit {
    font-size: 80%;
}

td {
    //width: auto;
}

span.show-real-or-posted {
    font-weight: bold;
}

div.legend {
    display: flex;
}

ul.legend-colors-left {
    flex: .5;
    list-style-type: none;
}
ul.legend-colors-right {
    flex: .5;
    list-style-type: none;
}
ul.legend.dotted {
    flex: 1;
    list-style-type: disc;
}
ul.legend li {
    margin: 0.25em;
}
li:first-child {
    margin-top: 0.5em;
}
img.legend.posted {
    vertical-align: -0.125em;
    margin-left: 17%;
    position: relative;
    max-width: 100%;
    max-height: 100%;
}
ul span.legend {
    width: 2em;
    display: inline-block;
    overflow: hidden;
}
li {
    margin: 0.25em;
}
ul li.inform {
    margin-top: .5em;
    font-weight: bold;
}
span.legend.score-posted {
    height: 1.25em;
}
span.legend.score {
    width: 2em;
}
button.legend {
    font-size: 80%;
}

img.report-link {
    height: 30px;
    width: 30px;
}

td.score {
    text-align: center;
//    margin-right: 20px;
}
span.overall {
    display: block;
    text-align: center;
//    background-color: rgb(50, 50, 50);
}
span.score {
    display: block;
    text-align: center;
//    border-radius: 20%;
    cursor: pointer;
}
span.score-4 {
    background-color: #4CAF50;
}
span.details-score-4 {
    color: #4CAF50;
}
span.score-3 {
    background: #A8C686;
    color: blue;
}
span.details-score-3 {
    color: #A8C686;
}
span.score-2 {
    background: #D0D972;
    color: blue;
}
span.details-score-2 {
    color: #D0D972;
}
span.score-1 {
    background: #E76F51;
    color: white;
}
span.details-score-1 {
    color: #E76F51;
}
span.score-0 {
//    background: #E63946;
    background: #d6303d;
    color: white;
}
span.details-score-0 {
    color: #d6303d;
}
span.not-current-member {
    color: gray;
    font-style: italic;
}
span.score-not-started {
    background: gray; #inherit;
}

span.score-posted {
    //    display: inline-block;
    background: #6590b8;
//    background: #457B9D;
    position: relative;
}
span.score-posted.high-details img {
    display: none;
}
img.posted {
    content: url("/static/icons/envelope-white-2.png");
}
td img.posted {
    top: 50%;
    left: 50%;
    width: 1.5rem;
    height: auto;
    color: white;
    transform: translate(-50%, -50%);
    position: absolute;
}

.hidden {
    display: none !important;
}

div.details-score > span {
    font-size: 1.5em;
--    border: dotted yellow;
    margin-left: 0.2em;
    margin-right: 0.2em;
}

.popup-container:hover {
    outline: 2px solid cyan;
    outline-offset: -1px;
    transition: outline 0.05s ease-in-out;
}