:root {
    --bg-grey                  : rgb(203, 208, 211);
    --footer-bg                : #eceeed;
    --ladder-primary           : rgb(227, 6, 17);
    --ladder-secondary         : rgb(251, 176, 55);
    --ladder-tertiary          : rgb(33, 113, 182);

    --modern-primary   : #df752f; --bs-primary-rgb   : rgb(223 117 47);
    --modern-secondary : #41b8e4; --bs-secondary-rgb : rgb(65 184 228);
    --modern-tertiary  : #c14197; --bs-tertiary-rgb  : rgb(193 65 151);

    --ladder-text              : rgb(29, 30, 28);
    --ladder-black             : rgb(29, 30, 28);
    --ladder-random            : rgb(29, 112, 234); /* random set by code in places */
    --myteam                   : rgba(33, 113, 182, 0.25);
    --spreadWarning            : rgba(251, 176, 55, 0.25);

    --zwiftLike                : #FB6418;

    --officialZwift            : #FC6719;

    --zwift-band-1             : #37b2c4;
    --zwift-band-2             : #dd3292;
    --zwift-band-3             : #000000;
    --zwift-band-4             : #fbf324;
    --zwift-band-5             : #f36723;

    --zwift-bands: linear-gradient(
        0deg,
        #37b2c4 10%, #dd3292 10%, #dd3292 20%,
        #000000 20%, #000000 30%, #fbf324 30%,
        #fbf324 40%, #f36723 40%, #f36723 50%,
        #37b2c4 50%, #37b2c4 60%, #dd3292 60%,
        #dd3292 70%, #000000 70%, #000000 80%,
        #fbf324 80%, #fbf324 90%, #f36723 90%,
        #f36723 100%
    ) 0 0 / 200px 200px;

    --pen-color-d              : #f8d13c;
    --pen-color-c              : #4dbfe6;
    --pen-color-b              : #54c559;
    --pen-color-a              : #d94126;
    --pen-color-e              : #943e5e;

    --official-ladder-red      : #e5272a;
    --official-ladder-blue     : #343091;

    --moveup                   : rgb(56, 168, 57);
    --movedn                   : rgb(168, 56, 63);
    --moveno                   : rgb(56, 134, 168);

    --moveupbkgnd              : rgba(56, 168, 57, 0.1);
    --movednbkgnd              : rgba(168, 56, 63, 0.1);
    --movenobkgnd              : rgba(56, 134, 168,0.1);

    --missingdata              : #e5e5e5;

    --eloStart                 : #333333cc;
    --eloEnd                   : #33333355;
    --eloBkgnd                 : #e5e7eb;

    --climb                    : rgba(25, 135, 84, 0.2);
    --fall                     : rgba(253, 110, 110, 0.2);

    --old--data-fld-text-color : #077288;
    --scanPie-color            : #077288;
    --old-team-link-color      : #77a48b;

    --team-link-color     : var(--ladder-tertiary);
    --data-fld-text-color : rgba(255, 0, 0, .6); /*var(--ladder-secondary);*/
    --win-score  : var(--ladder-primary);
    --lose-score : rgba(108, 117, 125, .5);

    --old-win-score  : #198754;
    --old-lose-score : rgba(108, 117, 125, .5);
    --dq-blinker : rgba(255, 0, 0, .6);
    --fail-name  : #ff6464;

    --overdue           : orange;
    --ineligible        : #efbb6c;
    --teamineligible    : rgba(239,187,108,0.5);

    --really-ineligible : #ef8b4c;
    --banned            : rgba(255,0,0,0.8);

    --liveScore         : #efbb6c66;

    --challengeBtn : #0d6efd;

    --team-opener       : #17a2b8;
    --team-opener-hover : #17a2b808;
    --hilite            : #17a2b8;

    --form-win    : rgb(50, 168, 82); /*var(--ladder-primary);*/
    --form-defend : rgb(42, 107, 59); /*var(--ladder-primary);*/
    --form-loss   : rgb(189, 75, 75); /*var(--ladder-tertiary);*/
    --form-notyet : rgb(171, 171, 171); /*var(--ladder-secondary);*/
    --form-undef  : rgba(0,0,0,0);

    --nav-active : rgba(0, 0, 0, .2);
    --ladder-title-extra : rgba(0, 0, 0, .4);
    --nav-border : rgba(100,100,100, .3);

    --gold1 : rgba(175, 149,   0, 0.6);
    --gold2 : rgba(201, 176,  55, 0.6);
    --gold3 : rgba(201, 176,  55, 0.2);

    --silv1 : rgba(215, 215, 215, 0.6);
    --silv2 : rgba(180, 180, 180, 0.6);
    --silv3 : rgba(180, 180, 180, 0.2);

    --brnz1 : rgba(106,  56,   5, 0.6);
    --brnz2 : rgba(173, 138,  86, 0.6);
    --brnz3 : rgba(173, 138,  86, 0.2);

    --gold1t: rgba(175, 149,   0, 0);
    --silv1t: rgba(215, 215, 215, 0);
    --brnz1t: rgba(106,  56,   5, 0);

    --challenge-made     : #eeeeee;
    --challenge-accepted : #ebffeb;
    --challenge-countered: #ebfffc;
    --challenge-refused  : #ffebf5;
    --challenge-cancelled: #efefef;
    --challenge-color    : #fcba03;
    --fixture-color      : #03c8fc;
    --result-color       : #fc0394;


    --EMEA : #e30613;
    --APAC : #f9b233;
    --AMER : #1d71b8;
    --WRLD : #ffcced;
    --WOMN : #99cc99;
    --WOMENS : #99cc99;
    --clubladder-font: 'Sofia Sans', sans-serif;
}
html * {
    font-family: var(--clubladder-font);
}
.windowOpenText{
    /* background   : red;
    padding-block: 3px;
    border-radius: 20px;
    padding      : 0px 20px; */
    color        : red;
}


.cursor-pointer{
    cursor : pointer;
}

@media (min-width:1281px) { /* hi-res laptops and desktops */
    table.ladderTable {
        table-layout:fixed;
        width:100%;
    }
    .ladderTable td {
        /* word-wrap:break-word; */
        /* word-break:break-all; */
    }
}
@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }

.tableWidth-a     { width :  auto;}
.tableWidth-micro { width :  20px }
.tableWidth-mini  { width :  40px }
.tableWidth-1     { width :  80px;}
.tableWidth-2     { width : 100px;}
.tableWidth-3     { width : 150px;}
.tableWidth-4     { width : 200px;}

.forceSmall div{ width : 50px!important; }
.forceSmall span{ width : 50px!important; }

.DQIcon{
    width : 20px;
}

.notverified{
    color : var(--ladder-primary)!important;
}

.navLinkHere{
    cursor: pointer;
}

.navClub{
    background :#9bd5eb;
    color : black!important;
}
.navclubBelow{
    background : linear-gradient(0deg,#9bd5eb 20%, transparent 100%);
}

.blob {
	background: black;
	border-radius: 50%;
	margin: 10px;
	height: 20px;
	width: 20px;

	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

.banned{
    background:var(--banned)!important;
}
.bannedExplain{
    background:var(--banned);
    color : white;
}
.purgatoryineligible {
    background:var(--banned)!important;
    color : white!important;
}
.purgatoryineligibleExplain{
    background:var(--banned);
    color : white;
}

.win-color-success{
    background : var(--win-score);
}
.win-color-secondary{
    background : var(--lose-score);
}

.roster tr.inelligible
    background : var(--ineligible);
}

.roster tr.inelligible a{
    color : var(--ladder-text)!important;
}
.roster tr.reasonedInelligible{
    background : var(--really-ineligible)!important;
}

.roster tr.reasonedInelligible a{
    color : var(--ladder-text)!important;
}

.overdue {
    padding       : 4px 10px 4px 10px;
    border-radius : 20px;
    margin-left   : 4px;
    background    : rgba(255,255,255,0.9);
    color         : var(--ladder-primary)!important;
    font-weight   : bold;
}

.max-60{
    max-width : 60px;
    width     : 60px;
}
.max-100{
    max-width : 100px;
    width     : 100px;
}
.max-150{
    max-width : 150px;
    width     : 150px;
}
.source_fb:after{
    content : '!';
    color : var(--ladder-primary);
    font-style:italic;
    font-size: 0.8em;
    font-weight: lighter;
}


.ladder-bg, footer {
    background: var(--footer-bg);
}

.dataFld {
    font-weight: bolder;
    color: var(--data-fld-text-color);
}

.avail_col, .avgHR, .avgPow, .calendar-grid, .carousel, .colHeat, .colHeatHead, .hrFormat, .input-group, .powerFormat, .riderPos, .riderPts, .riderScore, .scoreBox, .scoreCol, .smallAction, .teampill {
    text-align: center
}

.cardRank, .spacer {
    white-space: nowrap
}

.btn_challenge, .clubpill, .goCard, .pointerPlz, .rankBadge, .teamOpener, .teampill {
    cursor: pointer
}


.fixtures .card, .results .card{
    padding   : 5px;
    margin    : 5px;
    text-align: center;
}

.glass {
    background-color: rgba(255, 255, 255, .5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.tintedglass{
    background-color: rgba(23, 162, 184, .5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px
}

.calendar-grid div {
    border-radius: 15px;
    margin: 0 auto
}

.chaToggle, .fixToggle, .opoToggle, .resToggle {
    border: 3px solid transparent
}

.calendar-grid .day {
    font-weight: 700;
    color: #fff;
    background: #333;
    width: 100%
}

.calendar-grid .wend {
    background: #d33
}

.dayBox {
    background: #ddd;
    width: 100%;
    min-height: 50px;
    vertical-align: middle;
    max-height: 200px;
    overflow: auto;
    z-index: 5
}

.dateLabel {
    position: sticky;
    top: 0;
    z-index: 10;
    font-weight: 700;
    background: #eee;
    color: #000
}

.today.dayBox {
    border: 3px solid #fe7823
}

.dateLabel.today {
    background: #fe7823;
    color: #fff
}

.next, .prev {
    opacity: .5
}



.calScore {
    font-weight: bolder
}

.riderScore, .riderWinScore {
    font-weight: 700
}

.calPill {
    display: inline-block;
    text-overflow: ellipsis;
    max-width: 200px
}

.ch-none {
    display: none
}

.card-preResult div {
    max-width: 40%;
    font-size: 12px;
    min-width : 250px!important;
    font-weight : 700;
}

.card-preResult h2 {
    font-size: 16px
}

.actionsBar a, .actionsBar button {
    margin: 5px 10px 5px 10px;
}

.streamLinks img {
    margin: 5px;
    width: 30px;
    height: 30px
}

.btn-tiny {
    font-size: .8em;
    margin: 2px !important
}

.form-fixture, .form-result {
    padding: 15px;
    margin: 30px auto auto
}

.w-65 {
    width: 65px
}

.form-fixture {
    width: 100%
}

.form-challenge .btn, .form-challenge input, .form-fixture .btn, .form-fixture input, .form-result .btn, .form-result input {
    margin-top: 10px;
    margin-bottom: 10px
}

.smallAction {
    width: 56px;
    height: 56px;
    align-self: center;
    line-height: 40px;
    font-size: :40px
}

.ziLogo, .zpLogo {
    height: 32px;
    vertical-align: middle
}

.ineligibleSignups .card {
    height: auto
}

.title-hideable {
    transform: scaleY(1);
    transition: transform .26s;
    transform-origin: top
}

.title-hideable.hide {
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .26s
}

.riderPos, .riderPts {
    width: 40px
}

.colHeatHead, .riderRank .rankBadge {
    width: 50px
}

.form-result {
    width: 100%;
    max-width: 75vw
}

.timeMS {
    opacity: .8;
    font-size: .8em
}

.spacer {
    font-size: 2em
}

.clubpill {
    font-size: .5em
}

.riderWinScore {
    color: var(--win-score) !important;
    font-size: 1.2em
}

.riderLoseScore {
    color: var(--lose-score) !important;
    font-size: 1.2em;
    font-weight: light
}

.pBronze, .pGold, .pSilver {
    color: transparent !important;
    font-weight: bolder;
    font-size: 1.2em;
    clip-path: circle(50%)
}

.pGold {
    background: radial-gradient(circle, var(--gold2) 0, var(--gold1) 55%, var(--gold1t) 75%) no-repeat center, url(/img/Cup.png) no-repeat center;
    background-size: 40px 40px
}

.pSilver {
    background: radial-gradient(circle, var(--silv2) 0, var(--silv1) 55%, var(--silv1t) 75%) no-repeat center, url(/img/Cup.png) no-repeat center;
    background-size: 40px 40px
}

.pBronze {
    background: radial-gradient(circle, var(--brnz2) 0, var(--brnz1) 55%, var(--brnz1t) 75%) no-repeat center, url(/img/Cup.png) no-repeat center;
    background-size: 40px 40px
}

.mw-500, .mw500 {
    min-width: 600px
}

.scoreBox {
    max-width: 150px;
    font-size: 50px
}

.addToZP {
    margin-left: 5px
}

.zpLogo {
    width: 32px
}

.control-half {
    max-width: 300px
}

.DQ {
    animation: 3s linear infinite blinker
}
.blink{
    animation: 3s linear infinite imgblinker
}
.borderDQ{
    border: 3px solid white;
    animation: 3s linear infinite borderblinker!important
}

@keyframes borderblinker {
    50% {
        border-color: var(--dq-blinker)
    }
}
@keyframes blinker {
    50% {
        background: var(--dq-blinker)
    }
}
@keyframes imgblinker {
    50% {
        filter: invert(1);/*grayscale(100%);*/
    }
}

.DQreason {
    background: rgba(255, 255, 255, 1);
    padding: 3px 10px;
    border-radius: 10px;
    text-align:center;
    /* white-space: pre; */
}
.DQreason .text-warning{
    background: rgba(255, 255, 255, 1);
    color: var(--ladder-primary)!important;
}

.failName {
    color:var(--fail-name);
    font-weight: 700
}

.cardRank, .playerStats {
    font-family: russo, sans-serif ! important;
}

.list-group-item {
    border-color: transparent
}

.overdue {
    color: var(--overdue);
}

.minw {
    min-width: 400px !important
}

.avail_col {
    width: 300px
}

.revealer {
    user-select  : none;
    border-radius: 10px;
    margin       : 10px;
    /* max-width    : 95% */
}

.revealer:hover {
    background: #eee
}

.navbar{
    border-bottom: 1px solid var(--nav-border);
}

.nav-item.active, .nav-item.active-link {
    font-weight: bolder;
    /* background: var(--nav-active); */
    border-bottom : 2px solid;
    /* border-radius: 20px; */
    /* padding-left: 10px;
    padding-right: 10px */
}

.min-75 {
    min-height: 75vh
}

.min-50 {
    min-height: 50vh
}

.min-25 {
    min-height: 25vh
}

.card-image {
    height: 175px
}

.remaining {
    height: calc(100vh - 100px)
}

.actionContainer, .ladderContainer {
    overflow-x: hidden;
    overflow-y: auto
}



.teamLink {
    text-decoration: none;
    color: var(--team-link-color);
    font-weight: 700
}

.card-date {
    font-size: .9em;
    font-weight : bold;
}

/* .card, .card img {
    border-radius: 10px
} */


.card-countdown{
    font-size : 0.8em;
    font-style : italic;
}

.card .btn {
    float: right
}

.card-type {
    font-weight: bolder;
    color: #333;
    position: relative;
    left: -15px;
    top: -5px
}

.card-title{
    font-weight : bolder;

}

.card-challenge-title {
    color: var(--challenge-color);
    font-weight : bolder;
}

.card-fixture-title {
    color: var(--fixture-color);
    font-weight : bolder;
}

.card-result-title {
    color: var(--result-color);
    font-weight : bolder;
}

.ladder-title {
    font-size: 1.5em
}

/* .ladder-title:after {
    content: 'club ladder';
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid #000;
    color: var(--ladder-title-extra);
    font-weight: 400;
    font-size: .8em;
    font-variant: small-caps;
    vertical-align: middle;
    font-style: italic
} */

.btn_challenge {
    margin       : 0 5px;
    font-size    : .7em;
    font-weight  : 700;
    color        : #fff;
    border-radius: 5px;
    background   : var(--challengeBtn);
    padding      : 8px;
    float        :right;
}

.teampill {
    padding: 5px;
    margin: 10px;
    background: #e2e2e2;
    border-radius: 30px;
    min-width: 200px
}

.sm-inline {
    font-size: 10px;
    height: 14px;
    min-width: 200px;
    display: inline;
    font-weight: 700
}

.aStat:before, .card h2, .playerName {
    font-size: 20px
}

.mh-300 img {
    height: 200px;
    max-height: 300px;
    width: auto
}

.l75 {
    height: 75px;
    margin: 5px
}

.mw-100 {
    margin: 10px;
    max-width: 90vw;
    width: 90vw
}

.playerName {
    position    : absolute;
    right       : 8px;
    left        : 8px;
    height      : 30px;
    top         : 210px;
    text-align  : left;
    padding-left: 20px;
    font-weight : 700;
    color       : #000;
    z-index     : 5;
    background  : #eeeeffaa;
    transform   : skew(0deg, -5deg) translate(0, 20px);
}

.playerCard {
    width     : 350px;
    height    : 500px;
    background: url(https://ladder.cycleracing.club/img/cardback.svg) center no-repeat;
    position  : relative;
    z-index   : 1
}

.playerAvatar {
    position : absolute;
    right    : 12px;
    top      : 60px;
    height   : 178px;
    aspect-ratio: 1 / 1;
    clip-path: circle(50%);
    border   : 3px solid rgba(241, 90, 36, 1);
    border-radius : 50%;
}

.playerClubpill {
    position     : absolute;
    left         : 16px;
    top          : 70px;
    padding      : 5px;
    margin       : 10px;
    text-align   : center;
    cursor       : pointer;
    border-radius: 5px;
    z-index      : 5
}

.playerLogo {
    position  : absolute;
    left      : 140px;
    top       : 5px;
    width     : 60px;
    height    : 60px;
    background: #fff;
    border-radius : 5px;
    /* clip-path : circle(50%) */
}

.playerStats {
    position: absolute;
    left    : 60px;
    right   : 0;
    top     : 290px;
}

.pld, .pts, .statwkg5 {
    left: 0
}

.pts_avg, .won, .statwkg1200 {
    right: 40px
}

.pld, .won {
    position: absolute;
    top     : 0
}

.aStat {
    font-size : 30px;
    text-align: left
}

.pld, .won {
    width: 45%
}

.pts, .pts_avg {
    top     : 55px;
    width   : 45%;
    position: absolute
}

.statwkg5,.statwkg1200{
    top     : 110px;
    width   : 45%;
    position: absolute
}
.statwkg5:before{
    content : "wkg 5s";
}
.statwkg1200:before{
    content : "wkg 20m";
}

.aStat:before {
    position  : absolute;
    top       : -20px;
    text-align: left;
    color     : rgba(0, 0, 0, .5)
}

.pld:before {
    content: 'pld'
}

.won:before {
    content: 'won'
}

.pts:before {
    content: 'pts'
}

.pts_avg:before {
    content: 'ppm'
}

.cardRank {
    position     : absolute;
    top          : 130px;
    left         : 50px;
    font-size    : 2em;
    /* border       : 5px solid rgba(255, 255, 255, .5); */
    border-radius: 15px
}
.cardRank .rankBadge{
    border:0!important;
}

.tiny-logo {
    max-width: 24px;
    max-height: 24px;
    margin: 0 10px
}

.teamOpener:hover {
    color: var(--team-opener) !important
}

/* .goCard:hover, */
.opener:hover, .riderOpener:hover {
    background: var(--team-opener-hover)
}

.lh-small {
    line-height: 5px
}

.bubble {
    border       : 5px ridge var(--myteam);
    border-radius: 50px;
    padding      : 5px;
    background   : #eee;
    display      : inline-block;
    min-width    : 40px;
    width        : 40px;
    text-align   : center;
}

.belt {
    --s: 70px;
    --d: 20px;
    --c: 20px;
    padding: 0 calc(var(--s) + var(--d)) var(--d);
    background: conic-gradient(at left var(--s) bottom var(--d), #0000 25%, #0008 0 37.5%, #0004 0) 0/50% no-repeat, conic-gradient(at right var(--s) bottom var(--d), #0004 62.5%, #0008 0 75%, #0000 0) 100%/50% no-repeat;
    clip-path: polygon(0 var(--d), var(--s) var(--d), var(--s) 0, calc(100% - var(--s)) 0, calc(100% - var(--s)) var(--d), 100% var(--d), calc(100% - var(--c)) calc(50% + var(--d)/ 2), 100% 100%, calc(100% - var(--s) - var(--d)) 100%, calc(100% - var(--s) - var(--d)) calc(100% - var(--d)), calc(var(--s) + var(--d)) calc(100% - var(--d)), calc(var(--s) + var(--d)) 100%, 0 100%, var(--c) calc(50% + var(--d)/ 2));
    background-color: #45ada8
}

.formBadgeD, .formBadgeL, .formBadgeU, .formBadgeW {
    border-radius: 50px;
    padding: 5px 8px;
    font-weight: bolder;
    font-size: 10px
}

.formBadgeW {
    background: var(--form-win);
    color: #fff
}

.formBadgeD {
    background: var(--form-defend);
    color: #fff
}

.formBadgeL {
    background: var(--form-loss);
    color: #fff
}

.formBadgeU {
    background: var(--form-notyet);
    color: #888
}

.form-challenge {
    max-width: 80vw;
    padding: 15px;
    margin: 10% auto auto
}

/* .card {
    min-width: 250px;
    padding: 5px;
    margin: 5px;
    text-align: center
} */
.tzCard{
    padding   : 5px;
    margin    : 5px;
    text-align: center
}

.form-challenge .form-floating:focus-within {
    z-index: 2
}

.actionbtn {
    min-width: 30%
}

/* .awayTeam:before {
    opacity: .5;
    font-size: .8em;
    content: "v";
    position: relative;
    left: -10px
} */

.featureImgFixture{
    max-height : 20px;
    max-width : 200px;
}

.riderDate{
    min-width:auto;
}

.resultsTable .score, .resultsTable .winner, .score {
    font-size: 24px;
    font-weight: bolder;
    text-align: center
}

.awayTeam.noVersus:before {
    content: ''
}

.carousel h2 {
    margin: 5px;
    font-size: 18px
}

.carousel p {
    margin: 5px;
    font-size: 16px
}

.score {
    color: #fff;
    border-radius: 15px;
    max-width: 50px;
    width: 50px;
    vertical-align: middle
}

.hilite, .riderName a, .teamName {
    font-weight: 700
}

.resTable td, .table tr {
    vertical-align: middle
}

.datecol {
    width: 200px;
    text-align: center
}

.newDate {
    border-top: 2px solid
}

.hilite {
    color: var(--hilite);
}

body, html {
    height: 100%
}

body {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f5f5f5
}

.form-signin {
    width: 100%;
    padding: 15px;
    margin: auto
}

.rankBadge, .spacer {
    width: 100px
}

#cladderLogo {
    max-width: 25vw
}

.text-warning {
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    padding: 5px
}

.ineligible, .ineligibleExplain {
    background: var(--ineligible) !important
}

.text-warning svg {
    margin-left: 10px;
    margin-right: 10px
}

.emailMessage {
    color: red
}

.form-signin .form-floating:focus-within {
    z-index: 2
}

.form-signin input[type=email] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.form-signin input[type=password] {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.form-floating {
    margin-top: 5px
}

.form-floating:last-of-type {
    margin-bottom: 10px
}

.mh-300 {
    max-height: 300px
}

.rankBadge {
    color         : #fff;
    border-radius : 20px;
    text-align    : center;
    position      : relative;
    /* border-style  : outset; */
    /* padding       : 2px; */
    margin        : 2px;
    min-width     : 120px;
}
.historicRank .rankBadge{
    position   : inherit;
    text-align : left;
    display    : inline-block!important;
    width      : 200px;
}
.rankBadge span{
    margin-left:5px;
    /* border-style : inset; */
    border-width : 2px;
}

.rankNumber {
    color       : #fff;
    font-family : Helvetica;
    font-weight : bolder;
    margin-top  : 2px;
    margin-left : 20px;
}

.ineligible, .ineligible a, .reallyineligible a {
    color: #000 !important
}

.ineligibleExplain {
    color: #fff !important;
    border-radius: 5px
}

.reallyineligible {
    background: var(--really-ineligible) !important;
    color: #000 !important
}

.reallyineligibleExplain {
    background: var(--really-ineligible) !important;
    color: #fff !important;
    border-radius: 5px
}

.teamName {
    font-size: 2em
}

.availabilityCheck {
    -ms-transform: scale(2);
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
    padding: 10px
}

.btn-mini {
    -ms-transform: scale(.6);
    -moz-transform: scale(.6);
    -webkit-transform: scale(.6);
    -o-transform: scale(.6);
    transform: scale(.6);
    padding: 10px
}

.clubpill {
    padding       : 5px;
    border-radius : 50px;
    padding-left  : 10px;
    padding-right : 10px;
    border-width  : 3px;
    border-style  : ridge;
    margin        : 10px;
    text-align    : center
}

.results .clubpill{
    padding       : 10px;
    font-size     : 0.7em;
    border-radius : 10px;
}

.roster>tbody>tr>td {
    padding: 0 5px
}

.roster>tbody>tr>td.colHeat {
    padding: 0
}

.riderName a {
    text-decoration: none;
    color: var(--ladder-tertiary)
}

.roster, .teaminfo {
    border: 1px solid #eceeed
}

.riderAction .btn {
    width: 30px
}

.colHeat {
    text-align: center;
    align-self: center;
    border: 1px solid #ddd
}

.reactivate:after {
    content: '' !important
}

.aTeam {
    max-width: 33%
}

.resultsTable {
    table-layout: fixed
}

.myteamrow td:first-child,
.myteamrow th:first-child {
     border-radius: 0 0 0 10px;
     border-top-width: 0;
     border-bottom-width: 0;
 }

 .myteamrow td:last-child,
 .myteamrow th:last-child {
     border-radius: 0 0 10px 0;
     border-top-width: 0;
     border-bottom-width: 0;
 }

 .text-success{
     color : var( --win-score)!important;
 }
 .text-secondary{
     color : var( --lose-score)!important;
 }

 .regionIcon{
        height : 32px;
 }

.systemMessages{
    margin-top : 0px;
}

 .systemMessage{
     background : var(--ladder-secondary);
     color      : var(--ladder-primary);
 }
 .systemMessage a{
     text-decoration :none;
     font-style: oblique;
     color : var(--ladder-tertiary);
 }
 .systemMessage a:after{
     content         : '🗔';
     font-size       : 0.5em;
     text-decoration : none;
     font-style      : normal;
     color           : var(--ladder-tertiary);
 }

.dash-card{
    max-height : 200px!important;
    overflow : hidden;
}

.text-ladder-primary{ color:var(--ladder-primary); }
.text-ladder-secondary{ color:var(--ladder-secondary); }
.text-ladder-tertiary{ color:var(--ladder-tertiary); }

.dayBounds td{
    text-align    : center;
    text-transform: uppercase;
    color         : white!important;
    font-weight   : bolder;
    font-size     : 1.1em;
    border-bottom : 2px solid black;
    /* background    : rgba(0,0,0,0.5)!important; */
    padding-left  : 50px;
}
.forfeitBounds td{
    text-align    : left;
    text-transform: uppercase;
    font-size     : 1.2em;
    color         : var(--ladder-tertiary)!important;
    font-weight   : bold;
    border-bottom : 2px solid var(--team-opener);
    background    : var(--team-opener-hover)!important;
    padding-left  : 50px;

}

body.bg-light, body.bg-gradient{
    background-image : url(https://ladder.cycleracing.club/img/bkgnd.svg)!important;
    /* background-size : 10%; */
}

.ec-event{
    font-family    : ClubLadder;
    font-weight    : 700;
    border-radius  : 6px!important;
    text-align     : center;
    display        : flex;
    flex-direction : column;
    justify-content: space-evenly;
}
.ec-all-day{
    background : #eeeeee;
}

.preRace{
    color : rgba(0,0,0,0.5);
    font-size: 0.8em;
    line-height : 10px;
}
.attention{
    color : var(--ladder-primary);
    font-weight:bold;
}
.openProfile:hover{
    background : var(--ladder-tertiary);
    color : white!important;
}
.summaryLine{
    font-style : oblique;
    background : var(--myteam)
}
.statsRow{
    font-style : oblique;
    background : var(--myteam)
}

.manualResultText{
    background : var(--myteam);
    border-radius : 20px;
    padding : 10px;
    color : var(--ladder-primary)
}
.frozenText{
    background : var(--myteam);
    border-radius : 20px;
    padding : 10px;
    color : white;
    font-weight : bolder;
}
.stage_bubble {
    border       : 5px ridge var(--myteam);
    border-radius: 50px;
    padding      : 5px;
    padding-left : 10px;
    padding-right : 10px;
    background   : #eee;
    display      : inline-block;
    min-width    : 100px;
    text-align   : center;
}
.utczone{
    background : var(--brnz2)
}
.timeCard{
    height : 60px;
}
.blankFixturesRow td{
    text-align : center;
    text-transform: uppercase;
    color         : var(--brnz1)!important;
    font-style    : italic;
    font-size     : small;
    background    : var(--silv1)!important;
    padding-left  : 50px;
}
.steerIcon{
    height : 15px;
    margin-left : 10px;
    animation: spin 3.5s linear 0s infinite reverse;
    transform-origin : 50% 85%;
}
@keyframes spin {
    0%   { transform: rotate(-15deg); }
    50%  { transform: rotate( 15deg); }
    100% { transform: rotate(-15deg); }
}
.pup-small{
    height : 24px;
}
.pup-lg {
    height : 40px;
}
.pup-tooltip{
    --bs-tooltip-bg: var(--ladder-primary)
}

.bg-development{
    background-image :
        url(https://ladder.cycleracing.club/img/bkgnd.svg),
        linear-gradient(to right, rgba(13, 202, 240, 0.1), rgba(13, 202, 240, 0.0));
    background-blend-mode:
        normal,
        multiply;
}
.bg-xmas{
    background-image :
        url(https://ladder.cycleracing.club/img/bkgnd.svg),
        linear-gradient(to right, rgba(28, 184, 69, 0.1), rgba(242, 138, 171, 0.3));
    background-blend-mode:
        normal,
        multiply;
}
.modalGlassBkgnd{
    z-Index                : 5000;
    position               : fixed;
    left                   : 0;
    top                    : 0;
    right                  : 0;
    bottom                 : 0;
    padding                : 0;
    margin                 : 0;
    background-color       : rgba(0, 0, 0, .5);
    backdrop-filter        : blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display                : flex;
    justify-content        : center;
    align-items            : center;
    overflow               : hidden;
}
.modalGlassBox {
    z-index       : 5001;
    background    : white;
    border-radius : 50%;
    width         : 50px;
    height        : 50px;
    display                : flex;
    justify-content        : center;
    align-items            : center;
}
.licensedCol{
    opacity : 0.5;
}
.podium-row{
    display        : flex;
    height         : 150px;
    flex-direction : row;
    margin-bottom  : 10px;
    align-items : flex-end;
}
.podium, .poscol{
    text-align :center
}

.podium_1{
    order : 2;
    height : 140px;
}
.podium_1:after{
    display          : inline-block;
    position         : relative;
    content          : '1';
    width            : 30px;
    height           : 30px;
    font-size        : 25px;
    line-height      : 30px;
    border-radius    : 50%;
    background-color : var(--gold1);
    color : white;
    font-weight : bolder;
    top : -110px;
}
.podium_2{
    order : 1;
    height : 120px;
}
.podium_2:after{
    display          : inline-block;
    position         : relative;
    content          : '2';
    width            : 30px;
    height           : 30px;
    font-size        : 25px;
    line-height      : 30px;
    border-radius    : 50%;
    background-color : var(--silv1);
    color : white;
    font-weight : bolder;
    top : -110px;
}
.podium_3{
    order : 3;
    height : 90px;
}
.podium_3:after{
    display          : inline-block;
    position         : relative;
    content          : '3';
    width            : 30px;
    height           : 30px;
    font-size        : 25px;
    line-height      : 30px;
    border-radius    : 50%;
    background-color : var(--brnz1);
    color : white;
    font-weight : bolder;
    top : -110px;
}
.statScore{
    font-size : 1.1em;
    font-weight : bold;
}
.historyGraph{
    overflow-x : auto;
}

.disable-scrollbars::-webkit-scrollbar {
  background: transparent; /* Chrome/Safari/Webkit */
  width: 0px;
}

.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

.maxMap{
    max-height    : 200px;
    height        : 200px;
    border-radius : 30px;
}
.overflowicon{
    height        : 20px;
    width         : 20px;
    background    : rgba(255,255,255,0.5);
    padding       : 5px;
    border-radius : 50%;
}
.movebubble{
    /* background    : rgba(255,255,255,0.25); */
    background    : rgba(245,245,245,0.25);
    padding       : 5px 0px;
    min-width     : 50px;
    font-weight   : bolder;
    border  : 1px solid rgba(0,0,0,0.25);
    border-radius : 5px;
}
.upMove {
    color         : var(--moveup);
    background    : var(--moveupbkgnd);

}
.downMove{
    color         : var(--movedn);
    background    : var(--movednbkgnd);

}
.staticMove{
    color         : var(--moveno);
    background    : var(--movenobkgnd);

}


.worldly{
    background-image     : linear-gradient(to right, rgba(103, 173, 242, 0.25), rgba(103, 173, 242, 0.25));
     /* , url('/img/world.svg'); */
    background-repeat    : repeat, no-repeat;
    background-size      : auto, 100%;
    background-position  : top, center;
    background-blend-mode: difference;
    /* padding : 30px; */
    padding-bottom : 10px;
    border-radius : 20px;
}
.titlespan{
    margin-bottom:0px;
    border-radius : 15px 15px 0px 0px;
}
.aLadder {
    max-height : 50vh;
    height     : 80vh;
    overflow   : auto;
    cursor     : pointer;
}
.aLadderUnrestricted{
    margin-top : 40px;
    max-height : unset!important;
    height     : unset!important;
    overflow   : auto;
    cursor     : pointer;
}

.pLadder{
    max-height     : 100%;
    overflow   : auto;
    cursor     : pointer;
}
.posCol {
    width : 100px;
}
.pos2Col {
    width : 200px;
}
.titlespan{
    width : 100%;
    text-align : center;
    color : white;
    font-weight:bolder;
}
.hideIcon {
    display:none;
}
.upOverflow, .dnOverflow{
    pointer-events : none;
    color : var(--hilite);
    margin : 10px;
}
.highlightMyTeam td{
    background    : var(--myteam);
}
.highlightMyTeam td:nth-child(1){
    background    : var(--myteam);
    border-top-left-radius : 20px;
    border-bottom-left-radius : 20px;
}
.highlightMyTeam td:nth-last-child(1){
    background    : var(--myteam);
    border-top-right-radius : 20px;
    border-bottom-right-radius : 20px;
}
.newladderTable{
    background-color: rgba(255, 255, 255, .5);
    table-layout:fixed;
    width:100%;
}

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */
    .rLadder {
        min-width : 50%;
        width     : 100%;
        max-width : 100%;
    }
    .wrapForSmall{
        flex-wrap:wrap;
    }
}
@media (min-width:1000px) { /* hi-res laptops and desktops */
    .rLadder {
        min-width : 20%;
        width     : 30%;
        max-width : 50%
    }
    .wrapForSmall{
        flex-wrap:inherit;
    }
}

.collectionDashboard{
    margin : 20px;
}

/* .goCard:hover{
    transform-origin: center;
    animation: scale 5s ease-in;
}
@keyframes scale { to { transform: scale(1.08); } } */

.opponents{
    cursor:pointer;
}
.teamAvailability:hover{
    background : var(--team-opener)!important;
}

.borderMeRandom{
    border : 3px solid var(--ladder-random)!important;
}
.rightFade{
    position        : absolute;
    display         : flex;
    flex-direction  : column;
    top             : 0px;
    right           : 0px;
    height          : 100%;
    width           : 100px;
    margin          : auto auto;
    /* border       : 3px solid pink; */
    border-radius   : 20px;
    background      : linear-gradient(to right, rgba(255,255,255,0) 30%,rgba(255,255,255,1) 100%);
    justify-content : center;
    text-align      : right;
    cursor          : pointer;
}
.leftFade{
    position  : absolute;
    display : flex;
    flex-direction : column;
    top       : 0px;
    left      : 0px;
    height    : 100%;
    width     : 50px;
    margin : auto auto;
    margin-right : 50px;
    /* border    : 3px solid pink; */
    border-radius : 20px;
    background: linear-gradient(to left, rgba(255,255,255,0) 30%,rgba(255,255,255,1) 100%);
    justify-content : center;
    text-align : left;
    cursor : pointer;
}
.rankBadgev2{
    display       : inline;
    background    : var(--rankColor);
    color         : var(--rankText);
    padding       : 4px 10px;
    margin-left   : 10px;
    border-radius : 20px;
    opacity : 0.75;
    z-index : 1;

}
.pup-rank-tooltip{
    --bs-tooltip-bg: var(--ladder-secondary);
}
.titlespan {
    z-index : 200;
}
.inRankPos{
    display     : inline-block;
    width : 40px;
    whitespace : no-wrap;
    color       : rgba(255,255,255,1);
    font-size   : .7em;
    font-weight : bold;
    background  : var(--posRankText);
    padding     : 2px;
    border-radius : 6px;
    text-align : center;
}

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */
    .nposCol{
        width       : 50px;
        max-width   : 50px;
        font-weight : bold;
    }
    .expandedShow {
        display     : none;
    }
    .movePoss span{
        font-size   : .9em;
        position    : relative;
        top         : -10px;
    }

}
@media (min-width:1281px) { /* hi-res laptops and desktops */
    .expandedShow {
        display     : none;
    }
    .expanded .expandedShow{
        display     : table-cell;
        margin-left : 5px;
    }
    .expanded .btn_challenge {
        /* float       : right; */
    }
    .makeBigger{
        width       : 50%;
        min-width   : 50%;
    }
    .nposCol{
        width       : 50px;
        font-weight : bold;
    }
}
@media (max-width:1281px)  { /* smartphones, iPhone, portrait 480x320 phones */
    .worldly{
        border-left  : 0!important;
        border-right : 0!important;
        border-radius : 0!important;
    }
}
.highlightBold{
    font-weight:normal;
    /* font-size : .8em; */
}
.makeBigger .highlightBold{
    font-weight:bold;
    font-size : 1em;
}

.grpdivider td{
    line-height : 1px;
    font-size   : 1px;
    max-height : 1px;
    padding : 1px!important;
}
.grpdivider{
    max-height : 2px;
    background : var(--ladder-secondary);
}
.tooStrong{
    background : var(--ineligible);
}
.grabLive{
    background : var(--liveScore)!important;
    border-radius : 0px;
}
.spreadWarn{
    background : var(--spreadWarning);
}

.adminCard{
    display        : flex;
    flex-direction : column;
    border : 1px solid var(--ladder-title-extra);
}
.adminCardData{
    max-height     : 80vh;
    height         : auto;
    overflow       : auto;
}

.showHilight{
    background : var(--silv2)
}
.beltsvg{
    width : 50px;
}
.biggerBelt .beltsvg{
    width : 100px;
}

.dataMissing{
    background : var(--missingdata)!important;
    color      : var(--missingdata)!important;
}
.dataMissing:after{
    position    : relative;
    display     : inline-block;
    left        : -15px;
    content     : "?";
    color       : var(--ladder-secondary)!important;
    font-weight : bolder;
    font-size   : 0.9em;
    transform   : rotate(23deg);
}

.spreadTeam{
    background:var(--teamineligible);
}

.penaltyWarning{
    color : var(--ladder-primary);
    font-weight : bolder;
    background : var(--ladder-secondary);
}

.fancierRadios{
    transform : scale(200%);
}
.fancierRadioLabel {
    position : relative;
    left : 20px;
    font-size : 1.2em;
    margin-right : 30px;
    line-height : 40px;
}
tr.homeTR{
    background : var(--gold3 );
}
.minor{
    color : var(--gold1);
    font-size : 0.6em;
}

/* -------- match ---------- */
.matchTitle{
    font-size : 2em;
}
.worldRank.before:before{
    content : "World Rankings "
}
.regionRank.before:before {
    content : "Region Rankings "
}
.winner{
    color : var(--win-score);
    font-weight : bolder;
}
.loser{
    color : var(--lose-score);
    font-weight : bolder;
}
span.regionRank, span.worldRank{
    padding-left : 5px;
    padding-right : 5px;
}

.deadTeam{
    opacity : 0.5;
}
.flabel{
}

.zombieTeamRow .btn_challenge{
    background : var(--ladder-primary)!important;
}
.isDeadorZombie{
    display : block;
}
.movePoss{
    vertical-align : middle;
}
.ladderRow{
}

.adminCard .banned{
    background : unset!important;
}

.worldpos {
    font-weight   : light;
    font-size     : 0.7em;
    vertical-align:sub;
    color : var(--ladder-tertiary);
}
.regionpos {
    font-weight    : bold;
    font-size      : 0.7em;
    vertical-align : super;
    color : var(--ladder-primary);
}

.homepos.regionpos{
    margin-right : 10px;
}
.awaypos.regionpos{
    margin-left : 10px;
}

.seasonEnds{
    font-style : italic;
}
.seasonEnds span{
    font-style : normal;
    font-weight : bold;
}

.children-m2 *{
    margin : 20px;
}
.children-my2 *{
    margin : 0px 20px;
}
.children-mx2 *{
    margin : 20px 0px;
}

.groupA {
    background : var(--gold1);
}
.groupB {
    background : var(--silv1);
}

.resultImage{
    width : 300px;
    max-width : 300px;
}
.ribbon {
    --f: 0px; /* control the folded part*/
    --r: 15px; /* control the ribbon shape */
    --t: 10px; /* the top offset */

    position  : absolute;
    inset     : var(--t) calc(-1*var(--f)) auto auto;
    padding   : 0 10px var(--f) calc(10px + var(--r));
    clip-path :
        polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
          calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
          var(--r) calc(50% - var(--f)/2));
    box-shadow : 0 calc(-1*var(--f)) 0 inset #0005;
    color      : white;
}
.challengeRibbon{
    background : #BD1550;
}
.fixtureRibbon{
    background : #15BD50;
}
.resultRibbon{
    background : #1550BD;
}

.specialBackgroundBefore {
  /* content            : ' '; */
  display            : block;
  position           : absolute;
  left               : 0;
  top                : 0;
  width              : 100%;
  height             : 100%;
  opacity            : 0.25;
  background-image   : url('/img/backdrops/3.jpg');
  background-repeat  : no-repeat;
  background-position: center;
  background-size    : cover;
}
.resultPowerups{
    position : absolute;
    right : 10px;
    bottom : 10px;
}
.resultLinks{
    position : absolute;
    left : 10px;
    bottom : 10px;
}

.expandIcon{
    cursor : pointer;
    font-size : 1.5em;
}

.DQDivider td{
    line-height : 1px;
    font-size   : 1px;
    max-height : 1px;
    padding : 1px!important;
}
.DQDivider{
    max-height : 2px;
    background : var(--ladder-tertiary);
}

.DQChar{
    font-weight : bold;
    /* color : var(--ladder-tertiary); */
}
.DNFChar{
    font-weight : bold;
    color : var(--ladder-secondary);
}

.spanPiebkgnd{
    display      : inline-block;
    width        : 20px;
    height       : 20px;
    border-radius: 50%;
    background : var(--scanPie-color);
    margin-left  : 10px;
}
.scanPie {
  width        : 20px;
  height       : 20px;
  border-radius: 50%;
  border       : 2px solid white;
}
.scanPie.circle-quarter {
  background-image: linear-gradient(0deg, var(--scanPie-color) 50%, transparent 50%), linear-gradient(90deg, #d1d1d1 50%, transparent 50%);
}
.scanPie.circle-half {
  background-image: linear-gradient(-90deg, var(--scanPie-color) 50%, transparent 50%), linear-gradient(90deg, #d1d1d1 50%, transparent 50%);
}
.scanPie.circle-three-quarter {
  background-image: linear-gradient(180deg, transparent 50%, #d1d1d1 50%), linear-gradient(90deg, #d1d1d1 50%, transparent 50%);
}
.scanPie.circle-full {
  background: #d1d1d1;
}
.teamShirt {
    max-width : 100px;
    max-height : 100px;
}

@media (min-width:1281px) { /* hi-res laptops and desktops */
    .mobileExtend-300{ min-height : 300px; }
    .mobileExtend-200{ min-height : 200px; }
}
@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
    .mobileExtend-300{ min-height : 500px; }
    .mobileExtend-200{ min-height : 400px; }
}

.mobilePill{
    transform: scale(0.5);
}

.mobile p {
    padding : 2px!important;
}

.grp_even{
    background-color     : var(--myteam);
    background-blend-mode: multiply;
}
.grp_odd{
    /* background-color     : rgba(100,200,0,.25);
    background-blend-mode: multiply; */
}
.liminalTeam{
    background-color     : rgb(0,0,0,0.25);
    background-blend-mode: multiply;
}
.highlightOpponent{
    background-color     : rgba(251, 176, 55, 0.35);
    background-blend-mode: multiply;
}
.miniIcon svg{
    height        : 15px;
    mix-blend-mode: overlay;
}

.tabsRow :not(.collapsed){
    background : var(--ladder-primary)
}

.btn-success-to-danger{
    background: linear-gradient(127deg, rgba(25,135,84,1) 0%, rgba(220,53,64,1) 100%);
    color : white;
}

.showBtn.collapsed{
    opacity:0.5;
}

.formSquare {
    width       : 22px;
    height      : 22px;
    text-align  : center;
    line-height : 22px;
    margin      : 1px;
    cursor      : pointer;
}
.formSquareSmaller {
    width       : 12px;
    height      : 12px;
    text-align  : center;
    line-height : 12px;
    margin      : 1px;
    cursor      : pointer;
    font-size   : 11px;
}

.small-text {
    font-size : 0.7em;
}

.violator{
    background : red;
}

.highlighted{
    background : var(--myteam);
}
.highlightBtn{
    background : rgb(180,180,180);
}
.outline {
    outline       : 4px solid var(--ladder-random);
    outline-offset: 4px;
    margin        : 10px;
}
.outline-primary{ outline-color : var(--ladder-primary)!important; }
.outline-secondary{ outline-color : var(--ladder-secondary)!important; }
.outline-tertiary{ outline-color : var(--ladder-tertiary)!important; }


.currentRanks ul{
    display:grid;
}
.currentRanks li{
    width : 50%;
}
.currentRanks li .badge{
    float:left
}
.hoverMe:hover{
    background : var(--myteam)
}
/* .adminBadge:before{
    content    : 'Administrator';
    font-size  : 0.7em;
    display    : block;
    top        : 0px;
    background : rgba(255,255,255,0.7);
    color      : red;
    padding    : 2px;
    border-radius  :3px;
} */
.adminBadge{
    /* border-left:4px solid #c80064!important; */
    box-shadow:-4px -4px #c80064;
}
.graphicalScoreCell{
    min-width : 220px;
    width : 220px;
}

.navatar{
    height : 26px;
    margin-left : 5px;
    margin-right : 5px;
    clip-path: circle(50%);
    /* clip-path: polygon(0 0, 100% 0, 100% 63%, 50% 100%, 0 65%); */

}

.btn-circle {
  width        : 30px;
  height       : 30px;
  text-align   : center;
  padding      : 6px 0;
  font-size    : 12px;
  line-height  : 1.428571429;
  border-radius: 15px;
}
.fw-blink{
    animation: boldify 0.7s linear 0s infinite alternate both;
}

@keyframes boldify {
  from {
    font-weight: 100;
    letter-spacing : 0.03em;
  }
  to {
    font-weight: 900;
    letter-spacing : normal;
  }
}

.restrictheight{
    overflow-x    :hidden;
    overflow-y    :auto;
    maximum-height:80vh;
    height        :80vh;
}

.caution{
    background : rgba(205, 255, 158,0.8)!important;
    color : rgba(0, 104, 125,1)!important;
}
.circleIt{
    aspect-ratio: 1 / 1;
    clip-path: circle(50%);
}
.borderIt {
    border:2px solid grey !important;
    border-radius : 50%;
}

.d-extra-none{
    display : none;
}
.linkTo{
    color       : var(--ladder-tertiary)!important;
    font-weight : bold!important;
    cursor      : pointer;
}
.spotCheckHere{
    padding       : 5px;
    border-radius : 5px;
    background    : orange;
    margin        : 0px 5px 0px 5px;
    cursor        : pointer;
}
.flagicon{
    max-height : 10px;
}

.zrise{
    padding     : 5px 10px;
    color       : white;
    font-weight : bold;
    background  : #2196f3;
    border-radius : 5px;
}

/* Primary variants */
.text-primary-row td { color: var(--bs-primary) !important; }
.text-primary-emphasis-row td { color: var(--bs-primary-text-emphasis) !important; }

/* Secondary variants */
.text-secondary-row td { color: var(--bs-secondary) !important; }
.text-secondary-emphasis-row td { color: var(--bs-secondary-text-emphasis) !important; }

/* Success variants */
.text-success-row td { color: var(--bs-success) !important; }
.text-success-emphasis-row td { color: var(--bs-success-text-emphasis) !important; }

/* Danger variants */
.text-danger-row td { color: var(--bs-danger) !important; }
.text-danger-emphasis-row td { color: var(--bs-danger-text-emphasis) !important; }

/* Warning variants */
.text-warning-row td { color: var(--bs-warning) !important; }
.text-warning-emphasis-row td { color: var(--bs-warning-text-emphasis) !important; }

/* Info variants */
.text-info-row td { color: var(--bs-info) !important; }
.text-info-emphasis-row td { color: var(--bs-info-text-emphasis) !important; }

/* Light variants */
.text-light-row td { color: var(--bs-light) !important; }
.text-light-emphasis-row td { color: var(--bs-light-text-emphasis) !important; }

/* Dark variants */
.text-dark-row td { color: var(--bs-dark) !important; }
.text-dark-emphasis-row td { color: var(--bs-dark-text-emphasis) !important; }

/* Body text variants */
.text-body-row td { color: var(--bs-body-color) !important; }
.text-body-emphasis-row td { color: var(--bs-emphasis-color) !important; }
.text-body-secondary-row td { color: var(--bs-secondary-color) !important; }
.text-body-tertiary-row td { color: var(--bs-tertiary-color) !important; }

/* Black and white */
.text-black-row td { color: var(--bs-black) !important; }
.text-white-row td { color: var(--bs-white) !important; }

/* Muted */
.text-muted-row td { color: var(--bs-secondary-color) !important; }

.gh-smaller{ font-size : 0.7em; }
.gh-tiny   { font-size : 0.5em; }
.gh-bigger { font-size : 1.1em; }
.gh-massive{ font-size : 1.3em; }


[data-hover-expand]:hover::before {
	content: attr(data-hover-expand) " ";
}

.elo-border {
    position  : relative;
}

.elo-border::before {
    content      : '';
    position     : absolute;
    inset        : 0;
    border-radius: inherit;
    padding      : 3px; /* border thickness */
    background   : conic-gradient(
        var(--eloStart) 0,
        var(--eloEnd  ) calc(var(--percent) * 1%),
        var(--eloBkgnd) calc(var(--percent) * 1%)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite        : exclude;
    pointer-events        : none;
}
.badge{
    cursor:pointer;
}
/* Individual Availability Styles */
.availability-days .form-check {
    margin-bottom: 0.5rem;
}

.availability-days .maybe-indicator {
    font-style: italic;
    color: #6c757d;
    font-size: 0.9em;
}

.save-status {
    font-size: 0.9em;
}

.individual-availability .card {
    border: 1px solid #dee2e6;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.individual-availability .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

/* Three-state checkbox styles */
.day-checkbox.state-0 {
    /* Not available - default unchecked style */
}

.day-checkbox.state-1 {
    /* Available - checked style */
    background-color: #198754 !important;
    border-color: #198754 !important;
}

.day-checkbox.state-2 {
    /* Maybe available - indeterminate style */
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    position: relative;
}

.day-checkbox.state-2::after {
    content: '?';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-weight: bold;
    font-size: 12px;
    line-height: 1;
}

.never-available:checked + label {
    font-weight: bold;
}/* Capta
in's page availability styles */
.availabilityCheck.allowPartial:indeterminate {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    position: relative;
}

.availabilityCheck.allowPartial:indeterminate::after {
    content: '?';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-weight: bold;
    font-size: 10px;
    line-height: 1;
}

.availabilityCheck.allowPartial:checked {
    background-color: #198754 !important;
    border-color: #198754 !important;
}/*
Captain editing styles */
.captain-editable:not(:disabled) {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.user-editable:not(:disabled) {
    border-color: #198754;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

.save-rider-availability {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

.save-status {
    font-size: 0.8rem;
}

/* Visual indicator for captain vs user editing */
tr:has(.captain-editable:not(:disabled):not(.user-editable)) {
    background-color: rgba(13, 110, 253, 0.05);
}

tr:has(.user-editable:not(:disabled)) {
    background-color: rgba(25, 135, 84, 0.05);
}/* H
alf Challenge Modal Styles */
.time-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    margin: 0.25rem;
    border-radius: 12px;
    font-size: 0.875rem;
}

#halfChallengeModal .modal-body .alert {
    margin-bottom: 1rem;
}

#halfChallengeModal .btn-group {
    width: 100%;
}

#halfChallengeModal .btn-group .btn {
    flex: 1;
}

.create-half-challenge {
    font-size: 0.875rem;
}/* Past
day styles */
.past-day {
    opacity: 0.5;
    background-color: #f8f9fa !important;
    cursor: not-allowed !important;
}

.past-day:disabled {
    background-color: #e9ecef !important;
    border-color: #ced4da !important;
}

tr:has(.past-day) {
    background-color: rgba(108, 117, 125, 0.1) !important;
}

/* Override captain editing styles for past days */
.past-day:not(:disabled) {
    border-color: #ced4da !important;
    box-shadow: none !important;
}
/* Mobile optimizations for team name section */
@media (max-width: 991.98px) {
    .team_name h2 {
        font-size: 1.5rem !important;
        line-height: 1.2;
        word-break: break-word;
    }

    .regionIcon {
        height: 28px;
        flex-shrink: 0;
    }

    .beltholder.biggerBelt {
        transform: scale(0.8);
    }

    .team_club .clubpill {
        font-size: 0.75rem !important;
    }

    .badge {
        font-size: 0.65rem !important;
    }

    /* Mobile layout specific styles */
    .d-lg-none .team_club {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .d-lg-none .gap-2 {
        gap: 0.5rem !important;
    }
}

@media (max-width: 575.98px) {
    .team_name h2 {
        font-size: 1.25rem !important;
    }

    .regionIcon {
        height: 24px;
    }

    .beltholder.biggerBelt {
        transform: scale(0.7);
        margin: 0.25rem !important;
    }

    .d-lg-none .gap-2 {
        gap: 0.25rem !important;
    }
}
/* Team info section improvements */
.team_info .alert {
    border-radius: 0.5rem;
}

.team_info .alert-heading {
    margin-bottom: 0.5rem;
}

/* Date information styling */
.team_info .ti {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-light);
    border-radius: 50%;
}

/* Form widget alignment */
.formBoxes {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile optimizations for team info */
@media (max-width: 991.98px) {
    .team_info .row {
        text-align: center;
    }

    .team_info .d-flex.align-items-center {
        justify-content: center;
        text-align: center;
    }

    .team_info .badge {
        font-size: 0.875rem !important;
    }
}

@media (max-width: 575.98px) {
    .team_info .d-flex.gap-4 {
        gap: 1rem !important;
    }

    .team_info .badge {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
    }

    .team_info .fw-semibold {
        font-size: 0.875rem;
    }

    .team_info .small {
        font-size: 0.75rem !important;
    }
}
/* Challengeable teams card improvements */
.team_challengables .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 0.75rem;
}

.team_challengables .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.team_challengables .card-header {
    padding: 1rem 1rem 0.5rem 1rem;
}

.team_challengables .card-body {
    padding: 0.5rem 1rem 1rem 1rem;
}

.team_challengables .badge.fs-7 {
    font-size: 0.75rem;
    font-weight: 600;
}

.team_challengables .btn {
    border-radius: 0.5rem;
    font-weight: 500;
}

.team_challengables .btn:hover {
    transform: none; /* Prevent double transform with card hover */
}

/* Responsive adjustments */
@media (max-width: 575.98px) {
    .team_challengables .card-header {
        padding: 0.75rem 0.75rem 0.25rem 0.75rem;
    }

    .team_challengables .card-body {
        padding: 0.25rem 0.75rem 0.75rem 0.75rem;
    }

    .team_challengables .regionIcon {
        height: 18px !important;
    }

    .team_challengables .badge.fs-7 {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem !important;
    }
}