@import url("/assets/css/fonts.css");

:root {
    --c-page-background: #ffffff;

    /* brand colors */
    --c1: #1e90ff;
    --c2: #172136;
    --c-league-theme: var(--c1);

    /* shared sidebar */
    --sb-width: 286px;
    --db-edge-gap: 0px;
    --db-sidebar-gap: 0px;
    --db-hero-height: 160px;
    --sb-bg: var(--c2);
    --db-sidebar-elbow-radius: 28px;
    --db-sidebar-elbow-color: var(--sb-bg, var(--c2));
    --sb-status-box-height: 54px;
    --sb-text: rgba(255, 255, 255, 1);
    --sb-text-muted: rgba(255, 255, 255, 0.4);
    --sb-text-subtle: rgba(255, 255, 255, 0.2);
    --sb-border: rgba(255, 255, 255, 0.6);
    --sb-hover-bg: rgba(255, 255, 255, 0.12);
    --sb-hover-border: rgba(255, 255, 255, 0.32);
    --sb-active-bg: #f7fbff;
    --sb-active-text: #0b2f57;
    --sb-quick-action-bg: rgba(255, 255, 255, 0.08);
    --sb-quick-action-border: rgba(255, 255, 255, 0.36);
    --sb-quick-action-hover-border: rgba(255, 255, 255, 0.72);

    /* accents */
    --c-a1: #f1f3f9;
    --c-a2: #e6ebf4;
    --c-a3: #CDD7E9;
    --c-a4: #7d818f;
    --c-a5: #505668;
    --c-a6: #2C3449;
    --c-aA: #F0F7FF;
    
    /* shared surfaces */
    --sc1: #fff;
    --sc2: #eff1f2;
    --sc3: #d7d8d9;

    /* shared borders */
    --c-border-dark: #5c5c5c;
    --c-border-light: #999;

    /* shared borders */
    --c-background-muted: #c8cdd3;
    --c-text-muted: #1721368c;

    /* shared radii */
    --r1: 0.333em;
    --r2: 0.6em;
    --r3: 0.6em;
    --r-frame: 0;
    --r-pill: 999px;

    /* shared fonts */
    --ff1: "DM Sans";
    --ff2: "DM Sans";
    --ff-display: "Familjen";
    --ff-brand: "Molgan";
    --ff-scoreboard: ScoreboardFont;

    /* shared font sizes */
    --fs-body: 0.92rem;
    --fs-header: 1.2rem;
    --fs-small: 0.84rem;
    --fs-mini: 0.7rem;
    --fs-sidebar: 1rem;
    --fs-modal-title: 2.33rem;
    
    --letter-spacing-sm: .02em;
    --letter-spacing-lg: .04em;

    /* gaps */
    --gap-btn-sm: 6px;

    /* shared state fills */
    --c-success: #cdffcd;
    --c-win: #9aff9a;
    --c-loss: #ffcdde;
    --c-push: #ffff9a;
    --c-compare: #e1f6fc;
    --c-red: #ff2a2a;
    --c-yellow: #FFC32A;
    --c-green: #229418;
    --c-green-dark: #058704;
}

body {
    background-color: var(--c-page-background);
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}

.landingPageDocument,
#landingPageBody {
    height: 100dvh;
    overflow: hidden;
}

input[type="checkbox"] {
    accent-color: #1e90ff;
}

input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}

.wrapper {
    text-align: center;
}

.entryProfileContent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    position: relative;
    vertical-align: middle;
}

.entryProfileName {
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.circleLogo{
    --size: 4rem;

    position: relative;
    width: var(--size);
    height: var(--size);
    flex: 0 0 var(--size);
    border-radius: 50%;

    background: var(--c2);
    color: #fff;
    /*border: 2px solid var(--c1);*/
    border: 5px solid var(--color);
    box-sizing: border-box;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    font-family: var(--ff1);
    font-size: calc(var(--size) * 0.5);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.entryProfileLink {
    --size: 1.5rem;
    --color: var(--c1);
    border: calc(var(--size) * 0.1) solid var(--color);
}

.circleLogo.entryProfileLink--hasImage {
    border: 0;
    background: transparent;
    overflow: visible;
}

.circleLogo.entryProfileLink--static {
    cursor: default;
}

.circleLogo.entryProfileLink:focus-visible {
    outline: 2px solid rgba(30, 144, 255, 0.45);
    outline-offset: 2px;
}

.entryProfileAvatar{
    transform: translateX(.5px);
    font-weight: 600;
}

.entryProfileAvatar,
.entryProfileAvatarImage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
}

.entryProfileAvatarImage {
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

.entryProfileTooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 60;
    max-width: 180px;
    padding: 5px 8px;
    border-radius: var(--r1);
    background: var(--c2);
    color: #fff;
    font-family: var(--ff1);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

.entryProfileTooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--c2);
    transform: translateX(-50%);
}

.entryProfileTooltipText {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.circleLogo.entryProfileLink:hover .entryProfileTooltip,
.circleLogo.entryProfileLink:focus-visible .entryProfileTooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

#standingsBody {
}

iframe {
    width: 66%;
    min-height: 530px; /* needs to fit content + Memo ... was 1200 or 466 */
    text-align: center;
    margin: 20px auto 100px auto;
    padding: 0 !important;
    display: block;

    /*background-color: ghostwhite;
    box-shadow:inset 1px 1px 40px 0 rgba(200,200,255,.9); off center because of width percentage
    border-radius: 10px;*/
}

p {
    margin: 0; /* for inside textarea */
}

ul {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}

a {
    text-decoration: none;
    display: inline;
}

a:visited {
    text-decoration: none;
}

table {
    border-collapse: collapse;
    font-family: var(--ff1);
    font-size: var(--fs-small);
}

th {
    text-align: left;
}

thead tr th {
    font-size: var(--fs-body);
    font-weight: normal;
    padding-bottom: 10px;
}

/*tbody tr:nth-child(even) {background: #C2DCFC}
tbody tr:nth-child(odd) {background: #DEEBFC}*/

.user {
    font-weight: bold;
}

.base {
    min-height: 100vh;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    min-width: 0;

    background: var(--c-overlay-dark);
    background-color: dodgerblue;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.05) 25%,
        transparent 10%,
        transparent 50%
    );
    -webkit-background-size: 10px 10px;

    margin: 0 auto;

    text-align: center;

    /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */

    position: relative;
    overflow: hidden;
}

.btn-sm {
    cursor: pointer;
    font-family: var(--ff1);
    font-size: var(--fs-small);
    padding: 0 0.75em;
    height: 2.25em;
    border: none;
    border-radius: var(--r1);
    white-space: nowrap;
}

.btn-sm[aria-pressed="true"]:hover,
.btn-sm[aria-pressed="true"]:active,
.btn-sm.btn-primary:enabled:hover,
.btn-sm.btn-primary:enabled:active{
    background: var(--c-a6);
    border-color: var(--c-a6);
}

.btn-sm.btn-ghost:hover:not(:disabled),
.btn-sm[aria-pressed="false"]:hover,
.btn-sm[aria-pressed="false"]:active,
.selectMenu:hover{
    background: var(--c-a1);
}

.btn-sm.btn-ghost:enabled:hover {
    background: var(--c-a1);
}

.btn-sm:disabled,
.btn-action:disabled,
.btn-primary:disabled {
    cursor: default;
    opacity: 0.4;
}

.btn-lg {
    box-shadow: none;
    transition:
        box-shadow 120ms ease-out,
        transform 120ms ease-out;

    padding: 0.875em 1.75em;
    border-radius: var(--r1);
    font-family: var(--ff1);
    font-size: var(--fs-body);
    font-weight: 400;
    text-transform: uppercase;

    cursor: pointer;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    text-decoration: none;
    text-align: center;
}

.btn-lg:hover {
    background: var(--c2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.28);
}

.btn-lg:enabled:active {
    /*transform: scale(0.99);*/
    /*box-shadow: none;*/
    filter: brightness(0.9);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.btn-lg:disabled,
.btn-lg:disabled:hover,
.btn-lg:disabled:active,
.btn-lg.is-disabled,
.btn-lg.is-disabled:hover,
.btn-lg.is-disabled:active,
.btn-lg[aria-disabled="true"],
.btn-lg[aria-disabled="true"]:hover,
.btn-lg[aria-disabled="true"]:active {
    background: var(--c-a5) !important;
    color: var(--c-background-muted);
    border: 1px solid var(--c-a5);
    box-shadow: none;

    cursor: default;
    opacity: 0.75;
    transform: none;
}

.btn-primary,
.btn-sm[aria-pressed="true"] {
    background: var(--c2);
    color: #fff;
    border: 1px solid var(--c2);
}

.btn-ghost,
.btn-sm[aria-pressed="false"] {
    background: var(--sc1);
    color: var(--c2);
    border: 1px solid var(--c2);
}

.btn-ghost:disabled {
    background: var(--sc1);
    border: 1px solid var(--c-text-muted);
}

.btn-ghost:hover:disabled {
    background: #fff !important;
}

.btn-ghost:hover:not(:disabled),
.btn-ghost--ready:hover:not(:disabled) {
    background: var(--c-a1);
}

.btn--secondary {
    background: var(--c1);
    color: #fff;
    border: 1px solid var(--c2);
}

.btn-action {
    font-family: var(--ff1);
    font-size: var(--fs-small);
    font-weight: 600;

    border: none;
    border-radius: var(--r1);

    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    text-decoration: none;
    height: auto;
    gap: 0.5em;
    padding: 0.625em 1.25em;
    line-height: 1;
    margin: 0;
}

.btn-action.btn-ghost:hover {
    background: var(--sc1);
}

.btn-action:active {
    transform: scale(0.97);
}

.btn-action.btn-ghost {
    border: 1px solid var(--c2);
}

.selectMenu {
    background: white;
    color: var(--c2);
    font-family: var(--ff1);
    font-size: var(--fs-small);
    border: 1px solid var(--c2);
    border-radius: var(--r1);

    height: 2.25em;
    line-height: 1.2;
    box-sizing: border-box;

    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
}

.segmentedRow {
    font-family: var(--ff1);
    border-radius: var(--r1);
    align-items: stretch;
    display: inline-flex;
    line-height: 1;
    /*overflow: hidden;*/
    white-space: nowrap;
}

.segment {
    border-radius: 0;
    margin-left: -1px;
    /*background-clip: padding-box;*/
}

.segment:first-child {
    border-bottom-left-radius: var(--r1);
    border-top-left-radius: var(--r1);
    margin-left: 0;
}

.segment:last-child {
    border-bottom-right-radius: var(--r1);
    border-top-right-radius: var(--r1);
}

.segment.btn-primary:hover:not(:disabled) {
    background: var(--c2);
    color: #fff;
}

.segment.btn-ghost:hover,
.segment.btn-primary:hover {
    transform: none;
}

.segment.btn-ghost:hover:not(:disabled) {
    background: var(--c-a1);
    color: var(--c2);
}

.modalBackdrop{
    align-items: center;
    background: rgba(0, 0, 0, .32);
    box-sizing: border-box;
    display: none;
    inset: 0;
    justify-content: center;
    padding: 16px;
    position: fixed;
    z-index: 310;
    
    border-radius: var(--r3);
    bottom: var(--db-edge-gap);
    left: calc(var(--sb-width) + var(--db-sidebar-gap));
    overflow: hidden;
    right: var(--db-edge-gap);
    top: var(--db-edge-gap);
}

.modalBackdrop.is-visible{
    display: flex;
}

.modal{
    background: white;
    border: 1px solid var(--c2);
    border-radius: var(--r3);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
    box-sizing: border-box;
    color: #333;
    padding: 20px;
    max-width: 100%;
    width: fit-content;
}
.modalHeader{
    background: var(--sc1);
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.modalTitle{
    color: var(--c2);
    font-family: var(--ff2);
    font-size: var(--fs-header);
    font-weight: 400;
    line-height: 1.2;
}

.modalClose{
    align-items: center;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--r1);
    color: var(--c2);
    cursor: pointer;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 32px;
}

.modalClose:hover,
.modalClose:focus-visible{
    background: var(--sc2);
    outline: none;
}

.menuButtons {
    height: 120px;
    width: 120px;

    color: white;

    display: table-cell;

    font-family: var(--ff1);
    font-size: var(--fs-body);
    text-align: center;

    vertical-align: middle;
    cursor: pointer;
}

.menuButtons:hover {
    color: white;
    background-color: var(--c1);
    border-left: 1px solid white;
}

.noLink {
    color: white;
    text-decoration: none;
}

.noLink:visited {
    text-decoration: none;
}

/*
.headerButton{
    padding: 13px 26px;
    border-radius: var(--r2);
    color: white;
    font-family: var(--ff1);
    font-size: var(--fs-body);
    text-transform: uppercase;

    background-color: var(--c2);

    cursor: pointer;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    text-decoration: none;
    text-align: center;
}

.headerButton:hover:not(.selected){
    background-color: #092B4D;
}

.headerButton:active{
    transform: scale(.98);
}
*/

.landingButton {
    width: 170px;
    margin: 3px;
}

.header {
    font-family: var(--ff1);
    font-size: var(--fs-body);
    display: inline-block;
    text-align: center;
    color: white;
    background-color: var(--c2);
    padding: 8px;
    cursor: pointer;
    overflow: hidden;
    height: 16px;
    line-height: 16px;
    border: 1px solid black;
    position: relative;

    /*
    border: 1px solid var(--c-border-dark);
    border-top: 1px solid var(--c-border-light);
*/
    border-radius: 3px;
    /*background: var(--c-overlay-dark);
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 10%, transparent 50%);
    -webkit-background-size: 6px 6px;

    /*background: repeating-linear-gradient(
        45deg,
        whitesmoke 10%,
        grey 50%, transparent 90%
    );*/

    /*background-image: repeating-linear-gradient(
        45deg,
        #333333,
        #333333 2px,
        #CDCDCD 2px,
        #CDCDCD 4px, transparent 60%, transparent 90%);*/

    /*box-shadow:inset 1px 1px 40px 0 rgba(200,200,255,.9);*/
}

.header:hover {
    background-color: var(--c1);
}

.header.selected:hover {
    background-color: var(--c1);
    /*background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 10%, transparent 50%);
    -webkit-background-size: 6px 6px;*/
    cursor: pointer; /*003300 green 004D00 004000*/
}

.selected {
    text-align: center;
    background-color: var(--c1);
    cursor: pointer;
    /*box-shadow: 0 0px 10px 0 black;
    transition: box-shadow 200ms linear;
    /*animation-fill-mode: forwards;*/
}

.header:active {
    -webkit-transform: scale(0.98);
}

.header2 {
    font-family: var(--ff1);
    display: inline;
    float: left;
    width: auto;
    text-decoration: none;
    text-align: center;
    color: #e8e8e8;
    background-color: #505050;
    padding: 0.5em 3em;

    border-right: 5px solid black;
    cursor: pointer;
}

.header2:hover {
    color: white;
    background-color: #303030;
}

.optionsSelected {
    color: red;
}

.test {
    color: red;
}

.radioo {
    width: 40px;
    height: 15px;
    color: whitesmoke;
    line-height: 15px;

    margin-left: 2px;

    text-align: center; /*centers text horizontally*/
    display: inline-block; /*sets circles to appear on same line, then form block when out of room*/

    font-family: var(--ff1);
    font-size: 7pt;

    cursor: pointer;

    background: var(--c-overlay-dark);
    /*background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 10%, transparent 50%);
    -webkit-background-size: 6px 6px;*/
    /*border: .5px solid rgba(140, 140, 140, 1);
    border-top: .5px solid rgba(200, 200, 200, 1);*/
}

.weekButtonRow {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(18, minmax(0, 1fr));
    column-gap: 0.5px;
    box-sizing: border-box;
    padding: 0;
}

.weekSelectForm {
    display: flex;
    align-items: center;
    margin: 0;
}

.weekSelect {
    min-width: 96px;
    height: 28px;
    box-sizing: border-box;
    cursor: pointer;
    font-family: var(--ff1);
    font-size: var(--fs-small);
    padding: 4px 30px 4px 10px;
    border: 1px solid var(--c2);
    border-radius: var(--r2);
    color: var(--c2);
    background: white;
}

.radioo:active {
    -webkit-transform: scale(0.95);
}

.radioo:hover {
    /*-webkit-animation: pulsate .5s;
    -webkit-animation-iteration-count: infinite;*/
    background-color: grey;
}

input[type="radio"]:disabled + label {
    cursor: default;
    /*visibility: hidden;*/
}

.diag {
    width: 5px;
    height: 40px;
    position: relative;
    bottom: 10px;
    right: 10px;
    -webkit-transform: rotate(20deg);
    background-color: var(--sc2);
    float: right;
    visibility: hidden;
}

.weekly {
    width: 200px;
    height: 200px;
    overflow: scroll;
    margin: 0 auto;
    background-color: grey;
}

#adminWeeks2 {
    display: block;
    width: 100%;
    text-align: center;
}

#adminWeeks {
    align-self: center;
    width: 100%;
    text-align: center;
}

#boxBord {
    /*background-color: #AAB2B8;
    box-shadow:inset 1px 1px 2px 0 black;*/
    border-radius: var(--r2);
    padding: 5px;
    padding-left: 8px;
    padding-right: 8px;
}

#insertPicks {
    border: 2px solid black;
}

#boxAgain {
    margin: 0 auto;
    border: 1px solid white;
    text-align: center;
}

.adminBoxx {
    display: inline-block;
}

#games {
    width: 20px;
    margin-left: 10px;
}

input[type="radio"]:checked + .radioo {
    background-color: var(--c2);
    color: white;
}

.weekRadio {
    height: 20px;
    color: black;
    line-height: 20px;
    margin: 0;
    display: block;
    box-sizing: border-box;
    text-align: center; /*centers text horizontally*/

    font-family: var(--ff1);
    font-size: var(--fs-small);

    cursor: pointer;

    background: transparent;
    border: 1px solid var(--sc2);
    border-radius: 2px;
    transform: scale(0.95);
}

input[type="radio"]:checked + .weekRadio {
    background-color: var(--c-surface-secondary);
    border: none;
}

#sidewaysWeek {
    transform: rotate(-35deg);
    font-size: 100pt;
    color: black;
    position: absolute;
    font-family: var(--ff1);
    top: 50px;
}

.hide {
    visibility: hidden;
}

#comPicksRow {
    font-size: 8pt;
    text-align: center;
    cursor: default;
}

#landingPageBody {
    overflow-x: hidden;
}

#authPanelContainer {
    height: 0;
    width: 100%;
    margin-top: 30px;
}

#loginPanel {
    width: 100%;
    display: none;
    text-align: center;
}

#loginPanel.vis {
    display: block;
}

#loginForm {
    font-size: 0;
}

.authFormLayout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    box-sizing: border-box;
    font-size: 1rem;
    max-width: calc(100vw - 40px);
    padding: 18px 20px;
    background-clip: padding-box;
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--r1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.authFormLayout:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
    opacity: 0.09;
    mix-blend-mode: soft-light;
}

.authFormLayout > * {
    position: relative;
    z-index: 1;
}

.authFormLayout.is-auth-revealing > * {
    opacity: 0;
    transform: translateY(4px);
}

.authFormLayout.is-auth-revealing.is-auth-revealed > * {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.authFormLayout.is-auth-hiding > * {
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.authFormLayout--registration {
    overflow: visible;
}

.authFieldColumn {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.loginFieldGroup {
    display: grid;
    grid-template-columns: 78px 240px;
    column-gap: 12px;
    align-items: center;
    white-space: nowrap;
}

.loginFieldGroup + .loginFieldGroup {
    margin-top: 0;
}

.formInput--inline {
    font-family: var(--ff1);
    font-size: var(--fs-body);
    margin-left: 0;
    width: 240px;
}

.stackedFieldLabel {
    font-family: var(--ff1);
    font-size: var(--fs-body);
    float: none;
    text-transform: uppercase;
}

.formFieldLabel {
    font-family: var(--ff1);
    font-size: var(--fs-body);
    color: var(--c2);
    line-height: 1.2;
    text-align: right;
    text-transform: uppercase;
}

.formInput--wide {
    font-family: var(--ff1);
    font-size: var(--fs-body);
    margin-left: 0;
    padding-left: 10px;
    margin-top: 0;
    width: 240px;
}

.formInput {
    border-radius: var(--r2);
    border: none;
    padding: 5px;
}

.authFormLayout .formInput {
    box-sizing: border-box;
    height: 38px;
    border: 1px solid rgba(23, 33, 54, 0.22);
    background: #f8fafc;
    color: #0d1520;
}

#loginPasswordLabel {
    margin-left: 0;
}

#loginSubmitButton {
    font-family: var(--ff1);
    font-size: var(--fs-body);
    margin-top: 0;
    min-width: 110px;
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--r2);
    background: var(--c2);
    color: white;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-transform: uppercase;
}

#registrationSubmitButton {
    font-family: var(--ff1);
    font-size: var(--fs-body);
    margin-top: 0;
    min-width: 110px;
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--r2);
    background: var(--c2);
    color: white;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-transform: uppercase;
}

#loginSubmitButton:hover,
#registrationSubmitButton:hover {
    background: #092b4d;
}

#loginSubmitButton:active,
#registrationSubmitButton:active {
    transform: scale(0.98);
}

.sidebarSignInModal[hidden] {
    display: none;
}

.sidebarSignInModal {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-sizing: border-box;
}

.sidebarSignInModalBackdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.sidebarSignInModalPanel {
    position: relative;
    z-index: 1;
    max-width: calc(100vw - 36px);
}

.sidebarSignInModalClose {
    position: absolute;
    top: -12px;
    right: -12px;
    z-index: 2;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: var(--sc1);
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1;
}

.sidebarSignInModal .authFormLayout {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--r3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.sidebarSignInModal .authFormLayout:before {
    opacity: 0.035;
    mix-blend-mode: multiply;
}

#sidebarLoginSubmitButton {
    font-family: var(--ff1);
    font-size: var(--fs-body);
    margin-top: 0;
    min-width: 110px;
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--r2);
    background: var(--c2);
    color: white;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-transform: uppercase;
}

#sidebarLoginSubmitButton:hover {
    background: #092b4d;
}

#sidebarLoginSubmitButton:active {
    transform: scale(0.98);
}

#sidebarLoginSubmitButton:disabled {
    cursor: default;
    opacity: 0.7;
}

.sidebarSignInError {
    display: none;
    margin-top: 12px;
    text-align: center;
}

.sidebarSignInError.is-visible {
    display: block;
}

.sidebarSignInError .statusBannerText {
    display: inline-block;
    font-size: var(--fs-small);
}

#registrationPanel {
    width: 100%;
    display: none;
    text-align: center;
}

#registrationPanel.vis {
    display: block;
}

#registrationGrid {
    width: auto;
    text-align: left;
    font-size: 0;
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

#registrationGrid:after {
    content: "";
    display: none;
    vertical-align: top;
    width: 99%;
}

#registrationEmail {
    width: 240px;
}

.formFieldGroup {
    height: 100%;
    white-space: nowrap;
    display: grid;
    grid-template-columns: 107px 240px;
    column-gap: 12px;
    align-items: center;
    vertical-align: middle;
    position: relative;
}

.formFieldGroup + .formFieldGroup {
    margin-top: 0;
}

.formFieldGroup:after {
    content: none;
}

.formFieldLabelColumn {
    float: none;
    line-height: 1.2;
    text-align: right;
}

.formFieldGroup--password {
    align-items: start;
}

.formFieldGroup--password .formFieldLabelColumn {
    line-height: 38px;
}

.formFieldInputColumn {
    float: none;
    position: relative;
}

.formFieldInputColumn br {
    display: block;
}

#registrationPasswordConfirm {
    margin-top: 6px;
}

#passwordConfirmWarning {
    cursor: pointer;
    display: none;
    left: 0;
    position: absolute;
    right: auto;
    text-align: center;
    top: calc(100% + 18px);
    width: 100%;
    z-index: 100;
}

@media screen and (max-width: 620px) {
    .authFormLayout {
        width: calc(100vw - 40px);
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .loginFieldGroup,
    .formFieldGroup {
        grid-template-columns: 1fr;
        row-gap: 5px;
    }

    .formFieldLabel,
    .formFieldLabelColumn {
        text-align: left;
    }

    .formFieldGroup--password .formFieldLabelColumn {
        line-height: 1.2;
    }

    .formInput--inline,
    .formInput--wide,
    #registrationEmail {
        width: 100%;
    }

    #loginSubmitButton,
    #registrationSubmitButton,
    #sidebarLoginSubmitButton {
        width: 100%;
    }
}

#loginErrorBanner {
    margin-top: 8px;
    visibility: hidden;
}

#registrationStatusBanner {
    margin-top: 24px;
}

#loginErrorBanner.visible {
    visibility: visible;
}

#registrationStatusBanner.visible {
    visibility: visible;
}

.statusBannerText {
    font-family: var(--ff1);
    font-size: 10pt;
    padding: 10px;
    border-radius: var(--r1);
    background: rgba(255, 0, 0, 0.5);
    color: white;
}

.statusBannerText--success {
    background: rgba(30, 121, 69, 0.65);
}

.statusBannerText--error {
    background: rgba(170, 35, 35, 0.65);
}

#loginErrorBanner .statusBannerText--error,
.sidebarSignInError .statusBannerText--error {
    display: inline-block;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: rgba(255, 255, 255, 0.15);
    background-clip: padding-box;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--r1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    color: darkred;
}

#loginErrorBanner .statusBannerText--error:before,
.sidebarSignInError .statusBannerText--error:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
    opacity: 0.09;
    mix-blend-mode: soft-light;
}

#siteCreditsBar {
    background-color: var(--c2);
    height: 50px;
    width: 100%;
    text-align: center;
    line-height: 50px;
    box-sizing: border-box;
    font-family: var(--ff1);
    font-size: var(--fs-body);
    color: white;

    position: absolute;
    bottom: 0;
}

#footerAdminLink {
    color: #ffd65b;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#footerAdminLink:hover {
    color: white;
}

.siteCreditsDivider {
    padding: 0 10px;
    color: rgba(255, 255, 255, 0.55);
}

#landingPageTitle {
    width: 100%;
    max-width: calc(100vw - 40px);
    height: auto;
    margin: clamp(140px, 33vh, 300px) auto 20px auto;
    padding: 0 20px;
    box-sizing: border-box;
    display: inline-block;

    font-size: clamp(72px, 8vw, 144px);
    font-family: var(--ff-brand);
    font-weight: 900;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    cursor: default;

    color: white;
    -webkit-text-stroke: 3px var(--c2);
    text-shadow:
        0.5px 0.5px 0 var(--c2),
        1px 1px 0 var(--c2),
        1.5px 1.5px 0 var(--c2),
        2px 2px 0 var(--c2),
        2.5px 2.5px 0 var(--c2),
        3px 3px 0 var(--c2),
        3.5px 3.5px 0 var(--c2),
        4px 4px 0 var(--c2),
        4.5px 4.5px 0 var(--c2),
        5px 5px 0 var(--c2),
        5.5px 5.5px 0 var(--c2),
        6px 6px 0 var(--c2),
        6.5px 6.5px 0 var(--c2),
        7px 7px 0 var(--c2),
        7.5px 7.5px 0 var(--c2),
        8px 8px 0 var(--c2),
        8.5px 8.5px 0 var(--c2),
        9px 9px 0 var(--c2);
}

.memberActionBar {
    margin: 0 auto;
    margin-top: 30px;
    width: min(160vh, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

#landingAccountCreatedMessage {
    display: none;
    margin: 24px auto 0;
    width: min(160vh, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
    color: #fff;
    font-family: var(--ff1);
    font-size: 18pt;
    line-height: 1.25;
    text-align: center;
}

.indexLogoutForm {
    display: inline-flex;
    margin: 0;
}

#chooseLeagueButton,
#logoutActionButton {
    box-sizing: content-box;
}

#chooseLeagueButton {
    position: relative;
    z-index: 2;
}

.landingLeagueButtonLabel {
    display: block;
}

.landingLeagueButtonCaret {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 12px;
    font-size: 10px;
    line-height: 0.72;
    opacity: 0.5;
}

.landingLeagueButtonCaret i {
    display: block;
    line-height: 0.72;
}

#chooseLeagueButton:hover .landingLeagueButtonCaret,
#chooseLeagueButton:focus-visible .landingLeagueButtonCaret {
    opacity: 0.9;
}

#chooseLeagueButton:disabled,
#chooseLeagueButton:disabled:hover,
#chooseLeagueButton:disabled:active {
    background-color: rgba(18, 62, 101, 0.52);
    cursor: default;
    opacity: 0.62;
    pointer-events: none;
    transform: none;
}

body#landingPageBody.leagueDropdownOpen #chooseLeagueButton:hover {
    transform: none;
}


/* Shared sidebar. */
#sidebar {
    position: fixed;
    top: var(--db-edge-gap);
    bottom: var(--db-edge-gap);
    left: var(--db-edge-gap);
    z-index: 40;
    width: var(--sb-width);
    height: auto;
    overflow: visible;

    /*
    background: var(--c-overlay-dark);
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 25%, transparent 10%, transparent 50%);
    -webkit-background-size: 500px 500px;
    */
    background-color: var(--sb-bg);

    border-top-right-radius: var(--r-frame);
    border-bottom-right-radius: var(--r-frame);
    box-shadow: 0 12px 28px rgba(17, 31, 51, 0.18);
    box-sizing: border-box;
    color: var(--sb-text);
    font-family: var(--ff1);
}

#sidebar * {
    box-sizing: border-box;
}

#leagueDashboardLayout::before {
    content: "";
    position: fixed;
    top: var(--db-edge-gap);
    bottom: var(--db-edge-gap);
    left: calc(var(--db-edge-gap) + var(--sb-width));
    width: var(--db-sidebar-gap);
    z-index: 120;
    background: var(
        --db-sidebar-gap-color,
        var(--c-league-theme, var(--c1))
    );
    pointer-events: none;
}

#leagueDashboardLayout::after {
    content: "";
    position: fixed;
    right: var(--db-edge-gap);
    bottom: var(--db-edge-gap);
    left: calc(
        var(--db-edge-gap) + var(--sb-width) +
            var(--db-sidebar-gap)
    );
    height: calc(
        var(--db-sidebar-elbow-radius) +
            var(--db-sidebar-elbow-border-width, 4px)
    );
    border-bottom: var(--db-sidebar-elbow-border-width, 4px) solid
        var(--c-league-theme, var(--c1));
    border-bottom-left-radius: var(--db-sidebar-elbow-radius);
    border-left: var(--db-sidebar-elbow-border-width, 4px) solid
        var(--c-league-theme, var(--c1));
    box-sizing: border-box;
    pointer-events: none;
    z-index: 39;
}

body.leagueDropdownOpen #leagueDashboardLayout::before {
    z-index: 39;
}

.sidebarInner {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 14px 18px;
    overflow: visible;
}

.sidebarInner > *,
.sidebarGroup--sections > * {
    transition: none;
}

#sidebarBrandLink {
    display: block;
    color: var(--c-league-brand-text, var(--c-league-theme-text, var(--sb-text)));
    font-family: var(--ff-brand);
    font-size: 20pt;
    font-weight: 900;
    line-height: 1;
    padding: 4px 0 2px;
    text-align: center;
    -webkit-text-stroke: 0.5px var(--c-league-theme, var(--c1));
    /*text-shadow: 1px 1px 0 var(--c1), 2px 2px 0 var(--c1), 3px 3px 0 var(--c1);*/

    --shadow-color: var(--c-league-theme, var(--c1));
    --sb-brand-key-rise-duration: 1200ms;
    --sb-brand-key-stagger: 28ms;
    --sb-brand-key-repeat-pause: 0ms;
    --sb-brand-key-rise-height: -4px;

    text-shadow:
        0.25px 0.25px 0 var(--shadow-color),
        0.5px 0.5px 0 var(--shadow-color),
        0.75px 0.75px 0 var(--shadow-color),
        1px 1px 0 var(--shadow-color),
        1.25px 1.25px 0 var(--shadow-color),
        1.5px 1.5px 0 var(--shadow-color),
        1.75px 1.75px 0 var(--shadow-color),
        2px 2px 0 var(--shadow-color),
        2.25px 2.25px 0 var(--shadow-color),
        2.5px 2.5px 0 var(--shadow-color),
        2.75px 2.75px 0 var(--shadow-color),
        3px 3px 0 var(--shadow-color);

    white-space: nowrap;
}

#sidebarBrandLink:hover {
    color: var(--c-league-brand-text, var(--c-league-theme-text, var(--sb-text)));
}

.sidebarBrandText {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
}

.sidebarBrandLetter {
    display: inline-block;
    transform: translateY(0);
    will-change: transform;
}

.sidebarBrandSpace {
    width: 0.32em;
}

#sidebarBrandLink:hover .sidebarBrandLetter:not(.sidebarBrandSpace) {
    animation: sidebarBrandKeyRise calc(var(--sb-brand-key-rise-duration) + var(--sb-brand-key-repeat-pause)) ease-in-out 1;
    animation-delay: calc(var(--sb-brand-letter-index) * var(--sb-brand-key-stagger));
}

@keyframes sidebarBrandKeyRise {
    0%,
    100% {
        transform: translateY(0);
    }

    18% {
        transform: translateY(var(--sb-brand-key-rise-height));
    }

    34% {
        transform: translateY(0);
    }
}

.sidebarProfile {
    --sb-profile-identity-height: 48px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 26px;
    align-items: center;
    gap: 0;
    min-height: 48px;
    margin: 8px 0;
    overflow: visible;
}

.sidebarProfileIdentity {
    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: var(--sb-profile-identity-height);
    padding: 4px 8px 4px 4px;
    border: 1px solid transparent;
    border-radius: var(--r1);
    color: inherit;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    overflow: visible;
    margin-bottom: 24px;
    transition:
        color 160ms ease,
        box-shadow 160ms ease;
}

/*
.sidebarProfileIdentity::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    border-radius: 999px;
    background: var(--sb-quick-action-hover-border);
    opacity: 0;
    transform: scaleY(0.35);
    transform-origin: center;
    transition:
        opacity 160ms ease,
        transform 160ms ease;
}
*/

.sidebarProfileIdentity--signedOut {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.sidebarProfileIdentity--signedOut .sidebarProfileAvatarButton {
    flex: 0 0 36px;
}

.sidebarProfileIdentity--signedOut .sidebarProfileName {
    flex: 0 1 auto;
    min-width: 0;
}

.sidebarProfileIdentity:focus {
    outline: none;
}

.sidebarProfileIdentity:hover,
.sidebarProfileIdentity:focus-visible {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/*
.sidebarProfileIdentity:hover::before,
.sidebarProfileIdentity:focus-visible::before {
    opacity: 0.9;
    transform: scaleY(1);
}
*/

.sidebarProfileIdentity:focus-visible {
    box-shadow: 0 0 0 2px rgba(159, 208, 255, 0.72);
}

.sidebarProfileAvatarButton {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: transparent;
    cursor: pointer;
    overflow: visible;
    text-decoration: none;
}

.sidebarProfileAvatarButton::before {
    content: "";
    position: absolute;
    inset: -16px;
    z-index: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(159, 208, 255, 0.32) 42%, rgba(159, 208, 255, 0) 72%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: calc(100% - 18px) calc(100% - 18px);
    filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.72);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.sidebarProfileIdentity:hover .sidebarProfileAvatarButton::before,
.sidebarProfileIdentity:focus-visible .sidebarProfileAvatarButton::before {
    opacity: 1;
    transform: scale(1.16);
}

.sidebarProfileAvatar {
    position: relative;
    z-index: 2;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    /*border-radius: 50%;*/
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white;
    /*background: red;*/
    font-size: 24pt;
    /*box-shadow: 0 1px 0 rgba(255, 255, 255, .24) inset;*/
    transition:
        color 160ms ease,
        opacity 160ms ease;
}

.sidebarProfileAvatarImage {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.sidebarProfileName {
    position: relative;
    display: block;
    min-width: 0;
    color: var(--sb-text);
    font-size: var(--fs-sidebar);
    line-height: 1.25;
    padding-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        color 160ms ease,
        opacity 160ms ease,
        transform 160ms ease;
}

.sidebarProfileIdentity:hover .sidebarProfileName,
.sidebarProfileIdentity:focus-visible .sidebarProfileName,
.sidebarProfileName:hover,
.sidebarProfile:has(.sidebarProfileAvatarButton:hover) .sidebarProfileName {
    color: var(--sb-text);
    opacity: 0.92;
    transform: translateX(3px);
}

.sidebarLogoutForm {
    margin-left: 0;
    display: flex;
    align-self: start;
    justify-self: start;
    justify-content: flex-end;
    padding-top: calc((var(--sb-profile-identity-height) - 26px) / 2);
}

.sidebarProfile .sidebarLogoutForm {
    margin-left: 0;
}

.sidebarLogoutForm .logoutLinkButton {
    width: 26px;
    height: 26px;
    color: var(--sb-text-muted);
    font-size: var(--fs-small);
    transition:
        color 160ms ease,
        transform 160ms ease;
}

.sidebarLogoutForm .logoutLinkButton:hover,
.sidebarLogoutForm .logoutLinkButton:focus-visible {
    color: #fff;
    transform: translateX(3px);
}

.sidebarDataItem {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px 8px 4px 10px;
}

.sidebarDataItem--season {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    align-items: center;
    column-gap: 48px;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
}

.sidebarDataItem.sidebarDataItem--season,
.sidebarDataItem.sidebarDataItem--deadline {
    padding: 0;
}

.sidebarGroup #deadlinePanel {
    margin-bottom: 0;
}

.sidebarSeasonField {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
    text-align: left;
}

.sidebarSeasonField--week {
    align-items: flex-start;
    text-align: left;
}

.sidebarDataLabel,
.sidebarSectionLabel {
    color: var(--sb-text-muted);
    font-size: 8pt;
    line-height: 1;
    text-transform: uppercase;
}

.sidebarDataValue {
    color: var(--sb-text);
    font-family: var(--ff1);
    font-size: 13pt;
    line-height: 1.25;
}

.sidebarDeadlineRow {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-top: 0;
}

.sidebarDeadlineRow--deadlineOnly {
    grid-template-columns: minmax(0, 1fr);
}

.sidebarUtilityControls {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.sidebarUtilityControl {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
}

.sidebarQuickActions {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.sidebarQuickActionButton {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 48px;
    padding: 7px 4px 6px;
    border: 1px solid var(--sb-quick-action-border);
    border-radius: var(--r1);
    color: var(--sb-text);
    /*background: var(--sb-quick-action-bg);*/
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    cursor: pointer;
    font-family: var(--ff1);
    font-size: var(--fs-mini) !important;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.sidebarCreateEntryButton {
    flex: 1 1 100%;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    border: 1px solid var(--c-green);
    background: var(--c-green);
    color: #fff;
    box-shadow: none;
    font-size: var(--fs-small) !important;
    /*font-weight: 500;*/
    transition: all 120ms linear;
}

.sidebarCreateEntryButton:enabled:hover{   
    border-color: var(--c-green-dark) !important;
    background: var(--c-green-dark) !important;
}

.sidebarCreateEntryButton:disabled:hover{   
    border: 1px solid var(--c-green) !important;
    background: var(--c-green) !important;
    color: #fff !important;
}

sidebarCreateEntryButton:active{
    transform: scale(.97);
}

.sidebarQuickActionButton > i {
    flex: 0 0 auto;
    color: currentColor;
    font-size: 14px;
    line-height: 1;
    position: relative;
    top: 1px;
}

.sidebarCreateEntryButton > i {
    --sb-create-entry-glyph-y: 0px;

    flex: 0 0 auto;
    color: #fff;
    position: relative;
    top: 0;
    /* transform: translateY(var(--sb-create-entry-glyph-y)); */
}

.sidebarCreateEntryButton:hover:not(:disabled) > .fa-circle-plus {
    animation: sidebarCreateEntryGlyphPulse 480ms ease-in-out infinite;
    transform-origin: 50% 50%;
}

.sidebarQuickActionButton > .sidebarQuickActionIcon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    max-width: none;
    overflow: visible;
    color: currentColor;
    font-size: 14px;
    line-height: 1;
    position: relative;
    top: 1px;
    white-space: normal;
}

.sidebarQuickActionButton > .sidebarQuickActionIcon > i,
.sidebarQuickActionButton > .sidebarQuickActionIcon > svg {
    display: block;
    color: currentColor;
    font-size: inherit;
    line-height: 1;
}

.sidebarQuickActionButton > .sidebarQuickActionIcon > svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.sidebarCreateEntryButton > .fa-circle-plus {
    position: relative;
    isolation: isolate;
}

.sidebarCreateEntryButton.is-pulsing > .fa-circle-plus::after {
    content: "\f055";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    font: var(--fa-font-solid);
    line-height: 1;
    color: currentColor;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    animation: newEntryIconPulse 1.25s ease-out 1;
    filter: drop-shadow(0 0 4px currentColor);
}

.sidebarLeagueNoteButton.is-unread,
.sidebarLeagueNoteButton.is-unread:hover:not(:disabled),
.sidebarLeagueNoteButton.is-unread:focus-visible {
    color: var(--c-red);
    border-color: var(--c-red);
}

.sidebarLeagueNoteButton[data-has-note="1"]:not(.is-unread),
.sidebarLeagueNoteButton[data-has-note="1"]:not(.is-unread):hover:not(:disabled),
.sidebarLeagueNoteButton[data-has-note="1"]:not(.is-unread):focus-visible {
    color: var(--c-yellow);
    border-color: var(--c-yellow);
}

.sidebarLeagueNoteButton.is-unread > i,
.sidebarLeagueNoteButton.is-unread > span {
    color: var(--c-red);
}

.sidebarLeagueNoteButton.is-unread > i {
    position: relative;
    isolation: isolate;
}

.sidebarLeagueNoteButton.is-unread > i::after {
    content: "\f0e0";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    font: var(--fa-font-solid);
    line-height: 1;
    color: color-mix(in srgb, var(--c-red) 56%, transparent);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    animation: messageBoardIconPulse 1.25s ease-out infinite;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--c-red) 38%, transparent));
}

@keyframes newEntryIconPulse {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }

    16% {
        opacity: 0.75;
    }

    55% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }
}

@keyframes sidebarCreateEntryGlyphPulse {
    0%,
    100% {
        transform: translateY(var(--sb-create-entry-glyph-y)) scale(1);
    }

    45% {
        transform: translateY(var(--sb-create-entry-glyph-y)) scale(1.12);
    }
}

#pageHeroLeagueAlertButton:hover > .fa-bell {
    animation: pcfBellRing 1120ms ease-in-out infinite;
    display: inline-block;
    transform-origin: 50% 0;
}

.sidebarLeagueNoteButton:hover:not(:disabled) > i {
    animation: sidebarMemoBounce 1000ms linear infinite;
    display: inline-block;
    transform-origin: 50% 100%;
}

.sidebarQuickActionButton > span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: currentColor;
    line-height: 1.24;
    position: relative;
    top: 1px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarQuickActionButton:hover:not(:disabled) {
    color: var(--sb-text);
    background: var(--sb-hover-bg);
    border-color: var(--sb-quick-action-hover-border);
}

.sidebarQuickActionButton:focus {
    outline: none;
}

.sidebarQuickActionButton:focus-visible {
    box-shadow: 0 0 0 2px rgba(159, 208, 255, 0.85);
}

.sidebarQuickActionButton:disabled {
    cursor: default;
    opacity: 0.4;
}

.sidebarQuickActionButton:disabled:hover {
    color: var(--sb-text);
    background: var(--sb-quick-action-bg);
    border-color: var(--sb-quick-action-border);
}

#sidebar #leagueSettingsGear.sidebarQuickActionButton {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    filter: none;
    font-size: 8.5pt;
    opacity: 1;
    transform: none;
}

#sidebar #leagueSettingsGear.sidebarQuickActionButton:hover:not(:disabled) {
    color: var(--sb-text);
    opacity: 1;
}

#deadlinePanel {
    background: var(--c-league-theme, #fff);
    color: var(--c-league-theme-text, var(--c2));
    cursor: pointer;
    flex: 0 0 var(--sb-status-box-height);
    height: var(--sb-status-box-height);
    justify-content: center;
    padding: 0;
    text-align: center;
    transition: all 120ms linear;
}
#deadlinePanel:hover {
    filter: brightness(.9);
}

#deadlinePanel:focus-visible {
    outline: 2px solid var(--sb-quick-action-hover-border, rgba(255, 255, 255, .72));
    outline-offset: 2px;
}

#deadlinePanel .sidebarDataItem--deadline {
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    gap: 3px;
}

#deadlinePanel .sidebarDataLabel,
#deadlinePanel .sidebarDataValue {
    color: inherit;
    line-height: 0.85;
}

#deadlineLabel {
    white-space: nowrap;
}

#countdown {
    font-family: var(--ff1);
    font-size: 12pt;
    white-space: nowrap;
}

#countdownDateLabel {
    display: none;
}

.sidebarGroup {
    display: flex;
    flex-direction: column;
    gap: 6px;

    color: var(--sb-text);
    /*border-top: 1px solid var(--sb-border);*/
    /*border-bottom: 1px solid var(--sb-border);*/
    border-radius: var(--r1);

    /*
    background: rgba(255,255,255,.05);
    border-top: 2px solid var(--sb-border);
    border-bottom: 2px solid var(--sb-border);
    border-radius: var(--r1);
    */

    margin-bottom: 36px;
    padding: 0;
}

.sidebarInner--hasAfterSections .sidebarGroup--sections {
    margin-bottom: 0;
}

.sidebarAfterSections {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 12px 0;
}

.sidebarAfterSections + .sidebarFooter {
    margin-top: 0;
}

.sidebarGroup--data[aria-label="Season status"] {
    flex: 0 0 var(--sb-status-box-height);
    height: var(--sb-status-box-height);
    justify-content: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
}

.sidebarGroup--data[aria-label="Season status"] .sidebarDataLabel {
    line-height: 0.85;
}

.sidebarGroup--data[aria-label="Season status"] .sidebarDataValue {
    line-height: 0.85;
}

.sidebarGroup--actions {
    gap: 4px;
}

.sidebarLink {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--r1);
    color: var(--sb-text);
    font-family: var(--ff1);
    font-size: var(--fs-sidebar);
    line-height: 1.1;
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
}

button.sidebarLink {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.sidebarLink > i {
    width: 16px;
    flex: 0 0 16px;
    text-align: center;
}

.sidebarLink--messageUnread > i {
    color: var(--c-red);
    position: relative;
    isolation: isolate;
}

.sidebarLink--messageUnread > i:after {
    content: "\f27a";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    font: var(--fa-font-solid);
    line-height: 1;
    color: rgba(255, 42, 42, 0.56);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    animation: messageBoardIconPulse 1.25s ease-out infinite;
    filter: drop-shadow(0 0 4px rgba(255, 42, 42, 0.38));
}

@keyframes messageBoardIconPulse {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }

    16% {
        opacity: 0.75;
    }

    55% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }
}

.sidebarLinkIconImage {
    width: 18px;
    height: 23px;
    flex: 0 0 18px;
    object-fit: contain;
    background: transparent;
}

#nflHubAction .sidebarLinkIconImage {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
}

.sidebarLink.selected .sidebarLinkIconImage,
.sidebarLink.selected:hover .sidebarLinkIconImage {
    filter: brightness(0) saturate(100%) invert(17%) sepia(35%) saturate(1665%)
        hue-rotate(176deg) brightness(87%) contrast(97%);
}

.sidebarLink:hover {
    background: var(--sb-hover-bg);
    border: 1px solid var(--sb-hover-border);
}

.sidebarLink.selected {
    color: var(--sb-active-text);
    background: var(--sb-active-bg);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.sidebarLink--disabled,
.sidebarLink--disabled:hover {
    color: var(--sb-text-muted);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    cursor: default;
    opacity: 0.55;
}

.sidebarLeague {
    position: relative;
}

.sidebarLeague--list {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
}

.sidebarLeague--list::before,
.sidebarLeague--list::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    height: 100px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}

.sidebarLeague--list::before {
    top: calc(8pt + 6px);
    background: linear-gradient(to bottom, color-mix(in srgb, var(--sb-bg) 96%, transparent), transparent);
}

.sidebarLeague--list::after {
    bottom: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--sb-bg) 96%, transparent), transparent);
}

.sidebarLeague--list.sidebarLeagueListCanScrollUp::before,
.sidebarLeague--list.sidebarLeagueListCanScrollDown::after {
    opacity: 1;
}

.sidebarSectionLabel {
    margin: 0 0 6px 0;
}

.sidebarLeague--list .sidebarSectionLabel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    text-align: center;
}

.sidebarLeague--list .sidebarSectionLabel::before,
.sidebarLeague--list .sidebarSectionLabel::after {
    content: "";
    flex: 1 1 0;
    min-width: 0;
    height: 1px;
    background: var(--sb-border);
    opacity: 0.45;
}

.sidebarLeagueList {
    display: flex;
    flex: 1 1 auto;
    height: calc(100vh - 440px);
    min-height: 220px;
    max-height: 430px;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    gap: 4px;
    padding: 0 4px 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.sidebarLeagueList::-webkit-scrollbar {
    display: none;
}

.sidebarLeagueListLink,
.sidebarLeagueListEmpty {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: var(--r1);
    padding: 8px 10px;
    box-sizing: border-box;
    color: var(--sb-text);
    font-family: var(--ff1);
    font-size: calc(var(--fs-sidebar) - 1pt);
    line-height: 1.12;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    white-space: nowrap;
}

.sidebarLeagueListLink:hover,
.sidebarLeagueListLink:focus-visible {
    color: #fff;
    background: var(--sb-hover-bg);
    border-color: var(--sb-hover-border);
}

.sidebarLeagueListEmpty {
    color: var(--sb-text-muted);
    cursor: default;
}

#leagueBox.sidebarLeagueSwitcher {
    --league-switcher-caret-offset: 8px;
    --league-switcher-caret-width: 12px;
    width: 100%;
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
    /*border: 1px solid #ccd8e5;*/
    border: none;
    border-radius: var(--r1);
    background: var(--c-league-theme, #fff);
    box-sizing: border-box;
    cursor: pointer;
    color: var(--c-league-theme-text, var(--c2));
    height: 54px;
    transition: 
        filter 120ms linear,
        box-shadow 160ms ease;
}

#leagueBox.sidebarLeagueSwitcher::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: inherit;
    border-radius: inherit;
    pointer-events: none;
}

#leagueBox.sidebarLeagueSwitcher--static {
    cursor: default;
}

#leagueBox.sidebarLeagueSwitcher:hover {
    background: var(--c-league-theme, #f1f5f9);
}

#leagueBox.sidebarLeagueSwitcher--static:hover {
    background: var(--c-league-theme, #fff);
}

#leagueBoxDisplay {
    width: 100%;
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-content: center;
    column-gap: 0;
    height: 100%;
    padding: 0 8px;
    box-sizing: border-box;
    background: inherit;
    border-radius: inherit;
}

#leagueBoxDisplay:has(#leagueSwitcherCaret) {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    padding-left: 8px;
    padding-right: calc(8px + var(--league-switcher-caret-offset) + var(--league-switcher-caret-width));
}

#leagueBox.sidebarLeagueSwitcher #leagueSwitcherCaret {
    position: absolute;
    right: var(--league-switcher-caret-offset);
    top: 50%;
    transform: translateY(-50%);
    width: var(--league-switcher-caret-width);
}

#leagueSettingsGear:hover {
    opacity: 1;
}

#sidebar #leagueSettingsGear:hover > .sidebarSettingsGearIcon {
    animation: sidebarGearSpin 1500ms ease-in-out infinite;
    transform-origin: 50% 50%;
}

@keyframes sidebarGearSpin {
    0% {
        transform: rotate(0deg);
    }
    24% {
        transform: rotate(-180deg);
    }
    66.6667%,
    100% {
        transform: rotate(360deg);
    }
}

.sidebarLogo {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: white;
    border: 1px solid #b9c4d2;
    overflow: visible;
}

.sidebarLogo #leagueLogoImage {
    width: 100%;
    height: 100%;
    object-fit: contain;
    box-sizing: border-box;
    border-radius: 50%;
}

.sidebarLogo #logo-customize-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.72);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-league-theme-text, var(--c2));
    color: var(--c-league-theme, #fff);
    cursor: pointer;
    font-size: 7pt;
}

#currentLeagueNameLabel {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    color: inherit;
    font-size: var(--fs-sidebar);
    line-height: 1.15;
}

#leagueDropdown {
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
    visibility: hidden;
    pointer-events: none;
    transition: none;
    padding: 0;
    transform: translateY(-50%) translateX(-14px);
    transform-origin: center center;
    
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    right: auto;
    
    max-width: calc(100vw - 44px);
    width: min(432px, calc(100vw - 44px));
    
    display: grid;
    grid-template-rows: 1fr;
    will-change: transform, opacity;
    
    background: transparent;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 0;
    /*border: 1px solid var(--c2);*/
    
    border-radius: var(--r2);
    box-shadow: 0 16px 30px rgba(17, 31, 51, 0.16);
}

.leagueDropdownBorderContainer {
    background: var(--c-a3);
    /*background: rgba(255,255,255,.6);*/
    border: 4px solid var(--c-a4);
    box-sizing: border-box;
    border-radius: var(--r2);
    min-height: 0;
    overflow: hidden;
    padding: 2px 12px;
    position: relative;
}

.leagueDropdownInner {
    max-height: min(400px, calc(100vh - 200px));
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.leagueDropdownInner::-webkit-scrollbar {
    display: none;
}

.leagueDropdownBorderContainer::before,
.leagueDropdownBorderContainer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    height: 64px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}

.leagueDropdownBorderContainer::before {
    top: 0;
    box-shadow: inset 0 32px 24px -6px rgba(17, 31, 51, .56);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 68%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 68%, transparent 100%);
}

.leagueDropdownBorderContainer::after {
    bottom: 0;
    box-shadow: inset 0 -32px 24px -6px rgba(17, 31, 51, .56);
    -webkit-mask-image: linear-gradient(to top, #000 0, #000 68%, transparent 100%);
    mask-image: linear-gradient(to top, #000 0, #000 68%, transparent 100%);
}

#leagueDropdown.leagueDropdownCanScrollUp .leagueDropdownBorderContainer::before,
#leagueDropdown.leagueDropdownCanScrollDown .leagueDropdownBorderContainer::after {
    opacity: 1;
}

.leagueDropdownGroup {
    border-bottom: 0;
}

.leagueDropdownGroup[hidden] {
    display: none;
}

.leagueDropdownFavoritesGroup[hidden] {
    display: none;
}

.leagueDropdownGroup:last-child {
    border-bottom: 0;
}

.leagueDropdownGroupHeader {
    background: transparent;
    box-sizing: border-box;
    cursor: default;
    font-family: var(--ff1);
    font-size: 12pt;
    font-weight: 700;
    color: var(--c2);
    display: block;
    line-height: 1.2;
    padding: 9px 6px 6px;
    text-align: left;
    /*text-transform: uppercase;*/
    white-space: nowrap;
}

body.leagueDropdownOpen #leagueDropdown {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
    grid-template-rows: 1fr;
}

body.leagueDropdownOpening #leagueDropdown {
    animation:
        leagueDropdownOpenTransform 190ms cubic-bezier(.2, .8, .2, 1) both,
        leagueDropdownOpenOpacity 190ms cubic-bezier(.2, .8, .2, 1) both;
    transition: none;
}

body.leagueDropdownClosing #leagueDropdown {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    animation:
        leagueDropdownCloseTransform 135ms cubic-bezier(.4, 0, .2, 1) both,
        leagueDropdownCloseOpacity 135ms cubic-bezier(.4, 0, .2, 1) both;
    transition: none;
}

body.leagueDropdownClosing #leagueBox {
    z-index: 45;
}

body.leagueDropdownClosing #chooseLeagueButton {
    z-index: 2;
}

@keyframes leagueDropdownOpenTransform {
    0% {
        transform: translateY(-50%) translateX(-14px);
    }

    100% {
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes leagueDropdownOpenOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes leagueDropdownCloseTransform {
    0% {
        transform: translateY(-50%) translateX(0);
    }

    100% {
        transform: translateY(-50%) translateX(-14px);
    }
}

@keyframes leagueDropdownCloseOpacity {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.leagueName {
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 9px 14px;
    color: #17202b;
    font-family: var(--ff1);
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
    border-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5pt;
}

.leagueDropdownLeagueRow {
    display: grid;
    align-items: center;
    box-sizing: border-box;
    grid-template-columns: 32px minmax(0, 1fr) repeat(4, 26px);
    padding-right: 6px;
    width: 100%;
    border-bottom: 0;
    border-radius: var(--r1);
}

.leagueDropdownLeagueRow--noShortcut {
    grid-template-columns: 32px minmax(0, 1fr);
}

.leagueDropdownLeagueRow:hover {
    background: color-mix(in srgb, var(--c-a1) 20%, transparent);
}

.leagueDropdownLeagueRow .leagueName {
    border-bottom: 0;
    padding-left: 0;
    padding-right: 8px;
}

.leagueDropdownFavoriteButton {
    align-items: center;
    align-self: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    box-sizing: border-box;
    color: var(--c-a2);
    cursor: pointer;
    display: flex;
    font-size: 11pt;
    height: 26px;
    justify-content: center;
    justify-self: center;
    line-height: 1;
    min-width: 0;
    padding: 0;
    transition:
        color 60ms ease,
        transform 60ms ease;
    width: 26px;
}

.leagueDropdownFavoriteButton > i {
    display: block;
    line-height: 1;
}

.leagueDropdownFavoriteButton[aria-pressed="true"] > i,
.leagueDropdownLeagueRow.is-league-favorite .leagueDropdownFavoriteButton > i {
    color: var(--c2);
    -webkit-text-fill-color: currentColor;
}

.leagueDropdownFavoriteButton:hover,
.leagueDropdownFavoriteButton:focus-visible {
    color: var(--c2);
    transform: scale(1.1);
}

.leagueDropdownFavoriteButton:focus-visible {
    box-shadow: 0 0 0 2px
        color-mix(in srgb, var(--c2) 45%, transparent);
}

.leagueDropdownPageShortcut {
    align-items: center;
    align-self: center;
    border-bottom: 0;
    border-radius: var(--r1);
    box-sizing: border-box;
    color: var(--c2);
    display: flex;
    font-size: 10.5pt;
    height: 26px;
    justify-content: center;
    justify-self: center;
    line-height: 1;
    min-width: 0;
    padding: 0;
    text-decoration: none;
    width: 26px;
}

.leagueDropdownPageShortcut > i {
    display: block;
    line-height: 1;
    /*transform: translateY(1px);*/
}

.leagueDropdownPageShortcutIconImage {
    display: block;
    height: 20px;
    object-fit: contain;
    width: 20px;
}

.leagueName .cent {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leagueName:last-child {
    border-bottom: 0;
}

.leagueDropdownGroup .leagueName:last-child {
    border-bottom: 0;
}

.leagueDropdownGroup .leagueDropdownLeagueRow:last-child {
    border-bottom: 0;
}

.leagueDropdownGroup .leagueName {
    padding-left: 0;
}

.leagueName:hover {
    background: transparent;
}

.leagueDropdownPageShortcut:hover {
    background: var(--c-a2);
}

.leagueDropdownShortcutTooltip {
    background: var(--c2);
    border-radius: var(--r1);
    box-shadow: 0 8px 18px rgba(17, 31, 51, 0.18);
    box-sizing: border-box;
    color: #fff;
    font-family: var(--ff1);
    font-size: 10pt;
    line-height: 1.15;
    max-width: min(520px, calc(100vw - 16px));
    padding: 5px 8px;
    pointer-events: none;
    position: fixed;
    transform: translateY(-50%);
    white-space: normal;
    width: max-content;
    overflow-wrap: anywhere;
    z-index: 2000;
}

.leagueDropdownShortcutTooltip[hidden] {
    display: none;
}

#leagueSwitcherBackdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: none;
    z-index: 20;
}

body.leagueDropdownOpen #leagueSwitcherBackdrop {
    opacity: 0;
    pointer-events: none;
}

body.leagueDropdownOpen #leagueBox {
    z-index: 45;
}

body.leagueDropdownOpen #leagueBox.sidebarLeagueSwitcher {
    box-shadow: 0 10px 22px rgba(17, 31, 51, 0.14);
}

@media (prefers-reduced-motion: reduce) {
    #leagueBox.sidebarLeagueSwitcher,
    #leagueDropdown {
        transition: none;
    }

    body.leagueDropdownOpening #leagueDropdown,
    body.leagueDropdownClosing #leagueDropdown {
        animation-duration: 1ms;
        animation-delay: 0ms;
    }

    #leagueDropdown,
    body.leagueDropdownOpen #leagueDropdown {
        grid-template-rows: 1fr;
    }
}

.sidebarFooter {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--sb-border);
}

.sidebarFooter .scoreTickerToggleGroup {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--sb-text-muted);
    font-size: var(--fs-small);
    line-height: 17px;
}

.sidebarFooter .scoreTickerToggleControl {
    display: flex;
    align-items: center;
    float: none;
    height: 17px;
    margin-left: 0;
}

.sidebarFooter .scoreTickerToggleControl .switch {
    display: block;
    flex: 0 0 auto;
}

@media (max-width: 1100px) {
    :root {
        --sb-width: 250px;
    }

    .sidebarInner {
        padding: 12px 16px;
        gap: 8px;
    }

    .sidebarProfile {
        --sb-profile-identity-height: 44px;

        grid-template-columns: minmax(0, 1fr) 24px;
        gap: 0;
        min-height: 44px;
    }

    .sidebarProfileIdentity {
        grid-template-columns: 40px minmax(0, 1fr);
        min-height: 44px;
    }

    .sidebarProfileAvatarButton,
    .sidebarProfileAvatar {
        width: 40px;
        height: 40px;
    }

    .sidebarProfileName {
        font-size: 13pt;
    }

    .sidebarLink {
        min-height: 32px;
        padding: 7px 10px;
        font-size: 10.5pt;
    }

    #sidebarBrandLink {
        font-size: 15pt;
    }
}

@media (max-width: 760px) {
    :root {
        --sb-width: 218px;
    }

    .sidebarInner {
        padding: 10px 12px;
        gap: 7px;
    }

    .sidebarDataItem {
        padding: 4px 7px 0 7px;
    }

    .sidebarDeadlineRow {
        gap: 6px;
    }

    .sidebarQuickActions {
        gap: 4px;
    }

    .sidebarQuickActionButton,
    #sidebar #leagueSettingsGear.sidebarQuickActionButton {
        min-height: 44px;
        padding: 6px 3px 5px;
        font-size: 7.5pt;
    }

    .sidebarQuickActionButton > i {
        font-size: 12px;
    }

    .sidebarDataValue {
        font-size: var(--fs-sidebar);
    }

    #leagueBoxDisplay {
        gap: 0;
        padding: 0 7px;
    }

    #leagueBoxDisplay:has(#leagueSwitcherCaret) {
        padding-left: 7px;
        padding-right: calc(7px + var(--league-switcher-caret-offset) + var(--league-switcher-caret-width));
    }

    #currentLeagueNameLabel {
        font-size: 10.5pt;
    }

    #sidebarBrandLink {
        font-size: 13pt;
    }
}

@media (max-height: 760px) {
    .sidebarInner {
        gap: 6px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .sidebarProfile {
        --sb-profile-identity-height: 38px;

        grid-template-columns: minmax(0, 1fr) 24px;
        min-height: 38px;
    }

    .sidebarProfileIdentity {
        grid-template-columns: 36px minmax(0, 1fr);
        min-height: 38px;
    }

    .sidebarProfileAvatarButton,
    .sidebarProfileAvatar {
        width: 36px;
        height: 36px;
    }

    .sidebarProfileName {
        font-size: var(--fs-sidebar);
    }

    .sidebarData {
        gap: 4px;
        padding: 6px 0;
    }

    .sidebarDataItem {
        padding-top: 4px;
    }

    .sidebarDataValue {
        font-size: var(--fs-sidebar);
    }

    .sidebarGroup {
        gap: 4px;
        padding: 7px 0;
    }

    .sidebarLink {
        min-height: 30px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .sidebarQuickActionButton {
        min-height: 42px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .sidebarFooter {
        padding-top: 6px;
    }

    .sidebarFooter .scoreTickerToggleGroup {
        font-size: 9pt;
    }
}

.guestActionBar {
    margin: 0 auto;
    margin-top: 30px;
    width: min(540px, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
}

.landingLeagueChooser {
    display: inline-flex;
    position: relative;
    z-index: 30;
}

.buttSpace {
    margin-right: 65px;
}

.fieldWarning {
    font-family: var(--ff1);
    font-size: var(--fs-small);
    position: absolute;
    color: #ffb3b3;
    top: -20px;
    left: 130px;
    cursor: pointer;
    z-index: 100;
    text-align: center;
    width: 240px;
    box-sizing: border-box;
    display: none;
}

.fieldWarning--bottom {
    font-family: var(--ff1);
    font-size: var(--fs-small);
    position: absolute;
    color: red;
    bottom: -22px;
    left: 130px;
    cursor: pointer;
    z-index: 100;
    text-align: center;
    width: 240px;
    box-sizing: border-box;
    display: none;
}

.fieldWarning--wide {
    font-family: var(--ff1);
    font-size: var(--fs-small);
    position: absolute;
    color: red;
    top: -20px;
    left: 130px;
    cursor: pointer;
    z-index: 100;
    text-align: center;
    width: 240px;
    box-sizing: border-box;
    display: none;
}

@media screen and (max-width: 620px) {
    .fieldWarning,
    .fieldWarning--bottom,
    .fieldWarning--wide {
        left: 0;
        right: 0;
        width: auto;
    }
}

.correction {
    padding: 3px 10px 3px 10px;
    background: var(--c2);
    border-radius: var(--r2);
}

#backButtonIndex {
    position: absolute;
    top: 20px;
    right: 20px;
    display: none;
}

.landingModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 900px;
    height: 620px;
    max-height: calc(100vh - 60px);
    z-index: 11;
    border-radius: var(--r3);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);

    font-family: var(--ff1);
}

.landingModal radio {
    /*    font-weight: 400;*/
}

.landingModalContent {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    border-radius: var(--r3);
    background: #f5f5f5;
}

.landingModalContent .leagueBuilderShell {
    width: 100%;
    margin: 0;
}

.landingModalContent .leagueBuilderForm,
.landingModalContent .leagueBuilderForm--readonly {
    border-radius: 0;
    box-shadow: none;
}

#landingPageOverlay {
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 10;
}

.sidebarSignInModal.is-visible .sidebarSignInModalBackdrop,
.sidebarSignInModal.is-modal-closing .sidebarSignInModalBackdrop,
#landingPageOverlay.is-visible,
#landingPageOverlay.is-modal-closing,
#background.entrySettingsBackdrop.is-visible,
#background.entrySettingsBackdrop.is-modal-closing,
.adminModal.is-visible .adminModalBackdrop,
.adminModal.is-modal-closing .adminModalBackdrop,
.teamScheduleModalBackdrop.is-visible,
.teamScheduleModalBackdrop.is-modal-closing,
.entryEditModalBackdrop.is-visible,
.entryEditModalBackdrop.is-modal-closing,
.modalBackdrop.is-visible,
.modalBackdrop.is-modal-closing,
.pickDefaultAllModalBackdrop.is-visible,
.pickDefaultAllModalBackdrop.is-modal-closing,
.weekTrackerDistributionBackdrop.is-visible,
.weekTrackerDistributionBackdrop.is-modal-closing,
.leagueDirectoryEntrySetupOverlay.is-visible,
.leagueDirectoryEntrySetupOverlay.is-modal-closing,
#leagueNotePanel.leagueNotePanel.is-open,
#leagueNotePanel.leagueNotePanel.is-modal-closing,
.logoThemeModalBackdrop.is-visible,
.logoThemeModalBackdrop.is-modal-closing,
#profile-avatar-modal.is-visible,
#profile-avatar-modal.is-modal-closing {
    animation: pcfModalBackdropOpen 190ms ease-out both;
}

.sidebarSignInModal.is-modal-closing .sidebarSignInModalBackdrop,
#landingPageOverlay.is-modal-closing,
#background.entrySettingsBackdrop.is-modal-closing,
.adminModal.is-modal-closing .adminModalBackdrop,
.teamScheduleModalBackdrop.is-modal-closing,
.entryEditModalBackdrop.is-modal-closing,
.modalBackdrop.is-modal-closing,
.pickDefaultAllModalBackdrop.is-modal-closing,
.weekTrackerDistributionBackdrop.is-modal-closing,
.leagueDirectoryEntrySetupOverlay.is-modal-closing,
#leagueNotePanel.leagueNotePanel.is-modal-closing,
.logoThemeModalBackdrop.is-modal-closing,
#profile-avatar-modal.is-modal-closing {
    animation: pcfModalBackdropClose 150ms ease-in both;
}

.sidebarSignInModal.is-visible .sidebarSignInModalPanel,
.sidebarSignInModal.is-modal-closing .sidebarSignInModalPanel,
.landingModal.is-visible,
.landingModal.is-modal-closing,
#loginWindow.is-visible,
#loginWindow.is-modal-closing,
#entrySettingsModalWindow.entrySettingsModalWindow.is-visible,
#entrySettingsModalWindow.entrySettingsModalWindow.is-modal-closing,
.adminModal.is-visible .adminModalPanel,
.adminModal.is-modal-closing .adminModalPanel,
.teamScheduleModal.is-visible,
.teamScheduleModal.is-modal-closing,
#newTopicPanel.is-open .mb-new-topic-modal,
#newTopicPanel.is-modal-closing .mb-new-topic-modal,
.mb-topic-column.is-reply-open .mb-topic-reply-modal,
.mb-topic-column.is-modal-closing .mb-topic-reply-modal,
.entryEditModalBackdrop.is-visible .entryEditModal,
.entryEditModalBackdrop.is-modal-closing .entryEditModal,
.modalBackdrop.is-visible .modal,
.modalBackdrop.is-modal-closing .modal,
.pickDefaultAllModalBackdrop.is-visible .pickDefaultAllModal,
.pickDefaultAllModalBackdrop.is-modal-closing .pickDefaultAllModal,
.weekTrackerDistributionBackdrop.is-visible .weekTrackerDistributionModal,
.weekTrackerDistributionBackdrop.is-modal-closing .weekTrackerDistributionModal,
.leagueDirectoryEntrySetupOverlay.is-visible .leagueDirectoryEntrySetupModal,
.leagueDirectoryEntrySetupOverlay.is-modal-closing .leagueDirectoryEntrySetupModal,
#leagueNotePanel.leagueNotePanel.is-open .leagueNoteModal,
#leagueNotePanel.leagueNotePanel.is-modal-closing .leagueNoteModal,
#leagueNotePanel.leagueNotePanel.is-history-detail-open .leagueNoteHistoryDetailModal,
#leagueNotePanel.leagueNotePanel.is-history-detail-closing .leagueNoteHistoryDetailModal,
#leagueNotePanel.leagueNotePanel.is-modal-closing.is-history-detail-open .leagueNoteHistoryDetailModal,
.logoThemeModalBackdrop.is-visible .logoThemeModalContent,
.logoThemeModalBackdrop.is-modal-closing .logoThemeModalContent,
#profile-avatar-modal.is-visible > div,
#profile-avatar-modal.is-modal-closing > div {
    animation: pcfModalPanelOpen 190ms ease-out both;
}

.sidebarSignInModal.is-modal-closing .sidebarSignInModalPanel,
.landingModal.is-modal-closing,
#loginWindow.is-modal-closing,
#entrySettingsModalWindow.entrySettingsModalWindow.is-modal-closing,
.adminModal.is-modal-closing .adminModalPanel,
.teamScheduleModal.is-modal-closing,
#newTopicPanel.is-modal-closing .mb-new-topic-modal,
.mb-topic-column.is-modal-closing .mb-topic-reply-modal,
.entryEditModalBackdrop.is-modal-closing .entryEditModal,
.modalBackdrop.is-modal-closing .modal,
.pickDefaultAllModalBackdrop.is-modal-closing .pickDefaultAllModal,
.weekTrackerDistributionBackdrop.is-modal-closing .weekTrackerDistributionModal,
.leagueDirectoryEntrySetupOverlay.is-modal-closing .leagueDirectoryEntrySetupModal,
#leagueNotePanel.leagueNotePanel.is-modal-closing .leagueNoteModal,
#leagueNotePanel.leagueNotePanel.is-history-detail-closing .leagueNoteHistoryDetailModal,
#leagueNotePanel.leagueNotePanel.is-modal-closing.is-history-detail-open .leagueNoteHistoryDetailModal,
.logoThemeModalBackdrop.is-modal-closing .logoThemeModalContent,
#profile-avatar-modal.is-modal-closing > div {
    animation: pcfModalPanelClose 150ms ease-in both;
}

@keyframes pcfModalBackdropOpen {
    from {
        opacity: 0;
    }
}

@keyframes pcfModalBackdropClose {
    to {
        opacity: 0;
    }
}

@keyframes pcfModalPanelOpen {
    from {
        opacity: 0;
        translate: 0 12px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes pcfModalPanelClose {
    from {
        opacity: 1;
        translate: 0 0;
    }
    to {
        opacity: 0;
        translate: 0 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebarSignInModal.is-visible .sidebarSignInModalBackdrop,
    .sidebarSignInModal.is-modal-closing .sidebarSignInModalBackdrop,
    #landingPageOverlay.is-visible,
    #landingPageOverlay.is-modal-closing,
    #background.entrySettingsBackdrop.is-visible,
    #background.entrySettingsBackdrop.is-modal-closing,
    .adminModal.is-visible .adminModalBackdrop,
    .adminModal.is-modal-closing .adminModalBackdrop,
    .teamScheduleModalBackdrop.is-visible,
    .teamScheduleModalBackdrop.is-modal-closing,
    .entryEditModalBackdrop.is-visible,
    .entryEditModalBackdrop.is-modal-closing,
    .modalBackdrop.is-visible,
    .modalBackdrop.is-modal-closing,
    .pickDefaultAllModalBackdrop.is-visible,
    .pickDefaultAllModalBackdrop.is-modal-closing,
    .weekTrackerDistributionBackdrop.is-visible,
    .weekTrackerDistributionBackdrop.is-modal-closing,
    .leagueDirectoryEntrySetupOverlay.is-visible,
    .leagueDirectoryEntrySetupOverlay.is-modal-closing,
    #leagueNotePanel.leagueNotePanel.is-open,
    #leagueNotePanel.leagueNotePanel.is-modal-closing,
    .logoThemeModalBackdrop.is-visible,
    .logoThemeModalBackdrop.is-modal-closing,
    #profile-avatar-modal.is-visible,
    #profile-avatar-modal.is-modal-closing,
    .sidebarSignInModal.is-visible .sidebarSignInModalPanel,
    .sidebarSignInModal.is-modal-closing .sidebarSignInModalPanel,
    .landingModal.is-visible,
    .landingModal.is-modal-closing,
    #loginWindow.is-visible,
    #loginWindow.is-modal-closing,
    #entrySettingsModalWindow.entrySettingsModalWindow.is-visible,
    #entrySettingsModalWindow.entrySettingsModalWindow.is-modal-closing,
    .adminModal.is-visible .adminModalPanel,
    .adminModal.is-modal-closing .adminModalPanel,
    .teamScheduleModal.is-visible,
    .teamScheduleModal.is-modal-closing,
    #newTopicPanel.is-open .mb-new-topic-modal,
    #newTopicPanel.is-modal-closing .mb-new-topic-modal,
    .mb-topic-column.is-reply-open .mb-topic-reply-modal,
    .mb-topic-column.is-modal-closing .mb-topic-reply-modal,
    .entryEditModalBackdrop.is-visible .entryEditModal,
    .entryEditModalBackdrop.is-modal-closing .entryEditModal,
    .modalBackdrop.is-visible .modal,
    .modalBackdrop.is-modal-closing .modal,
    .pickDefaultAllModalBackdrop.is-visible .pickDefaultAllModal,
    .pickDefaultAllModalBackdrop.is-modal-closing .pickDefaultAllModal,
    .weekTrackerDistributionBackdrop.is-visible .weekTrackerDistributionModal,
    .weekTrackerDistributionBackdrop.is-modal-closing .weekTrackerDistributionModal,
    .leagueDirectoryEntrySetupOverlay.is-visible .leagueDirectoryEntrySetupModal,
    .leagueDirectoryEntrySetupOverlay.is-modal-closing .leagueDirectoryEntrySetupModal,
    #leagueNotePanel.leagueNotePanel.is-open .leagueNoteModal,
    #leagueNotePanel.leagueNotePanel.is-modal-closing .leagueNoteModal,
    #leagueNotePanel.leagueNotePanel.is-history-detail-open .leagueNoteHistoryDetailModal,
    #leagueNotePanel.leagueNotePanel.is-history-detail-closing .leagueNoteHistoryDetailModal,
    #leagueNotePanel.leagueNotePanel.is-modal-closing.is-history-detail-open .leagueNoteHistoryDetailModal,
    .logoThemeModalBackdrop.is-visible .logoThemeModalContent,
    .logoThemeModalBackdrop.is-modal-closing .logoThemeModalContent,
    #profile-avatar-modal.is-visible > div,
    #profile-avatar-modal.is-modal-closing > div {
        animation-duration: 0ms;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes hue-rotate {
    from {
        -webkit-filter: hue-rotate();
    }
    to {
        -webkit-filter: hue-rotate(360deg);
    }
}

@keyframes shadowOut {
    from {
        box-shadow: 0 0 20px 0 black;
    }
    to {
        box-shadow: 0 0 0 0 black;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(720deg);
    }
}

@keyframes spinRev {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-720deg);
    }
}

@keyframes slightSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-45deg);
    }
}

@keyframes slightSpinRev {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(45deg);
    }
}

@keyframes pulsate {
    0% {
        -webkit-transform: scale(1, 1);
    }
    50% {
        -webkit-transform: scale(0.85, 0.85);
    }
    100% {
        -webkit-transform: scale(1, 1);
    }
}

@keyframes borderAlert {
    0% {
        border: 3px solid var(--c-border-dark);
        border-top: 3px solid var(--c-border-light);
    }
    50% {
        border: 3px solid var(--c1);
        border-top: 3px solid var(--c-berry);
    }
    100% {
        border: 3px solid var(--c-border-dark);
        border-top: 3px solid var(--c-border-light);
    }
}

@keyframes textAlert {
    0% {
        color: var(--sc2);
    }
    50% {
        color: var(--c-berry);
    }
    100% {
        color: var(--sc2);
    }
}

@keyframes textAlert2 {
    0% {
        color: var(--c-berry);
    }
    50% {
        color: var(--sc2);
    }
    100% {
        color: var(--c-berry);
    }
}

@keyframes pcfBellRing {
    0% {
        transform: rotate(0deg);
    }
    6.6429% {
        transform: rotate(-18deg);
    }
    13.2857% {
        transform: rotate(16deg);
    }
    19.9286% {
        transform: rotate(-14deg);
    }
    26.5714% {
        transform: rotate(12deg);
    }
    33.2143% {
        transform: rotate(-8deg);
    }
    39.8571% {
        transform: rotate(6deg);
    }
    46.5% {
        transform: rotate(-3deg);
    }
    55.3571%,
    100% {
        transform: rotate(0deg);
    }
}

@keyframes sidebarMemoBounce {
    0%,
    100% {
        transform: translateY(0);
    }
    9.8182% {
        transform: translateY(-7px);
    }
    19.6364% {
        transform: translateY(0);
    }
    27.2727% {
        transform: translateY(-3px);
    }
    34.9091% {
        transform: translateY(0);
    }
    40.3636% {
        transform: translateY(-1px);
    }
    45.8182%,
    54.5455% {
        transform: translateY(0);
    }
}