:root {--runner-width:200px; --top-pad:45px; --bot-pad:65px;}
* {overscroll-behavior:none;}
[data-type='form-guide'] .mobile-footer {display:none;}

html {font-size:0.9rem; overflow-y:scroll; overscroll-behavior:none;}
body {margin:0; padding:var(--top-pad) 0 0 0; overscroll-behavior:none; font-family:'Outfit';}
img {max-width:calc(100vw - 20px);}
#mainContent {padding:0 10px; overflow-x: hidden; display: flex; flex-direction: column; height: calc(100vh - var(--top-pad) - var(--bot-pad));}
#progress-wrapper {position: fixed; top: 0; left: 0; width: 100%; height:3px; background: transparent; z-index: 9999; display: none;}
#progress-bar {width: 0%; height: 100%; background: linear-gradient(to right, #003717, #003717); transition: width 0.2s ease-out, box-shadow 0.6s ease-in-out;}
h1 {margin:0; padding-left:5px; font-size:24px; font-weight:800; letter-spacing:-1px;}
h2 {margin:0; margin-bottom:5px; padding-left:5px; font-size:20px; font-weight:700; letter-spacing:-1px; color:#444;}
h3 {margin:0; margin-bottom:5px; padding-left:5px; font-size:18px; font-weight:700; letter-spacing:-1px; color:#666;}
h4 {margin:0; margin-bottom:5px; padding-left:5px; font-size:18px; font-weight:700; letter-spacing:-1px; color:#666;}
header {position:fixed; top:0; width:100vw; height:50px; padding:01 10px; display:flex; align-items:center; gap:10px; box-sizing:border-box; background:#fff; z-index:2;}
.header-logo {width:280px; height:23px; background-image:url('/assets/img/logo.png?v2'); background-repeat:no-repeat; background-size:100%;}
footer {display:flex; column-gap:20px; flex-wrap:wrap; margin:10px -10px -10px -10px; padding:10px 20px; background:#333; color:#fff;}
footer h4 {font-weight:900; margin:0; padding:0; color:#fefefe;}
footer ul {margin:0; padding:0;}
footer li {list-style-type:none;}
footer a {text-decoration:none; color:#fff;}
section {padding: 7px 10px 7px 10px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 3px 0px; border: 1px solid rgb(217, 217, 217);}
section p:first-child {margin-top: 5px;}
section p:last-child {margin-bottom: 5px;}

/* Mobile Menu */
.mobile-menu-toggle {display:flex; align-items:center; justify-content:center; padding:10px; width:20px; height:15px; font-size:20px; background:#efefef; border-radius:15px;}
.mobile-menu {display:none; width:100vw; position:fixed; top:var(--top-pad); height:100vh; z-index:3; background:#fff; border-top: 1px solid #efefef;}
.mobile-menu-item {display:grid; grid-template-columns:30px auto; align-items:center; padding:10px 20px; background:#fff; border-bottom:1px solid #efefef; font-family:'Outfit';}
.mobile-menu-item-icon {font-size:18px;}
.mobile-menu-item-text {font-weight:600;}

/* MObile Footer */
.mobile-footer {display:flex; height:65px; gap:10px; padding:0 10px; align-items: center; justify-content: space-between; position:fixed; bottom:0; left:0; width:100vw; box-sizing:border-box; background:#333; color:#fff;}
.mobile-footer-item {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; flex:1; font-size:15px; line-height: 10px; font-weight: 700; background: #222; border-radius: 10px; padding: 10px 0}

/* Scroller */
.content-scroller { flex-direction:row; transition:transform 0.3s cubic-bezier(0.23,1,0.32,1); display:flex; will-change:transform; transform:translateX(0%);}
.content-scroller h3 {padding-left:2px;}
.content-scroller-container {position:relative; width:calc(100% - 0.4rem); margin-bottom:3px; padding:0 0.2rem 10px; flex-shrink:0; overflow: auto; overflow-x:hidden; transition:all 1s; overscroll-behavior:none;}
.content-scroller-double .content-scroller-container {width:calc(50% - 0.4rem);}
.content-scroller-buttons {display:flex; justify-content:center; gap:0.5rem; margin:-5px auto 5px auto;}
.content-scroller-button {width:12px; height:12px; border-radius:50%; background:#000; opacity:0.4; transition:0.3s ease all;}
.content-scroller-button.content-scroller-button-selected {opacity:1;}

/* Race scroller */
.race-scroller {margin:0 -10px; padding:0 10px; box-sizing:border-box; overflow:auto; white-space:nowrap; display:flex; gap:10px;}
.race-scroller-race {display:flex; flex-direction:column; gap:2px; min-width:100px; box-sizing:border-box; padding:7px 10px 7px 10px; font-size:14px; border-radius:10px; box-shadow:rgba(0, 0, 0, 0.08) 0px 2px 3px 0px; border: 1px solid rgb(217, 217, 217);}
.race-scroller-race-header {display:flex; justify-content:space-between;}
.race-scroller-race-track {max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top:-2px; font-weight:800; font-size:16px; line-height:20px;}
.race-scroller-race-ttg {min-width:30px; padding:0 5px; display: flex; align-items: center; justify-content: center; font-size:12px; font-weight:800; border-radius:5px; text-align:center; background:#333; color:#fff;}
.race-scroller-race-name {font-size:12px; line-height:12px; color:#333; font-weight:500; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.race-scroller-race-info {display:flex; gap:4px; font-size:10px; margin-top:2px; margin-bottom:2px; margin-left:-4px; white-space:nowrap; overflow:auto; overflow-y:hidden;}
.race-scroller-race-info-pill {padding:0 5px; font-weight:400; line-height:12px; text-transform:uppercase; background:#efefef; border-radius:10px;}
.race-scroller-race-info-pill-result {background:#25442a; color:#fff; font-weight:600;}
.race-scroller-field {display:flex; flex-direction:column;}
.race-scroller-field-runner {display:grid; grid-template-columns:20px auto 50px; align-items:center; padding:4px 0; border-bottom:1px solid #f2f2f2;}
.race-scroller-field-runner:last-child {border:none;}
.race-scroller-field-runner-name {display:flex; justify-content:space-between; align-items:center;}
.race-scroller-field-runner-silks {margin:-5px 5px -5px 0; height:25px; background-size:18px; background-repeat:no-repeat; background-position:50%;}
.race-scroller-field-runner-odds {text-align:center; font-weight:800;}
.race-scroller-field-runner-stat {min-width:50px;text-align:center;color:#ff6600;font-weight:900;font-size:12px;}

/* Race meeting */
.race-meetings {display:flex; flex-direction:column; border-radius:10px; box-shadow:rgba(0, 0, 0, 0.08) 0px 2px 3px 0px; border:1px solid #d9d9d9;}
.race-meeting:last-child .race-meeting-title {border:none;}
.race-meeting-title {padding:5px 10px; border-bottom:1px solid #d9d9d9;}
.race-meeting-track {display:flex; justify-content:space-between; padding-left:2px; font-weight:800;}
.race-meeting-title-pills {display:flex; flex-direction:row; gap:5px; margin:2px 0;}
.race-meeting-title-pill {padding:0 5px; font-size:11px; font-weight:400; line-height:14px; text-transform:uppercase; background:#efefef; border-radius:10px;}
.race-meeting-races {display:none; border-bottom:1px solid #efefef;}
.race-meeting-race {padding:5px 10px; display:grid; grid-template-columns:30px auto; align-items:center; border-top:1px solid #efefef; box-shadow:rgba(0, 0, 0, 0.04) 0px 2px 6px 1px;}
.race-meeting-race:first-child {border:none;}
.race-meeting-race-number {width:20px; height:20px; line-height:20px; font-weight:800; text-align:center; background:#ff7400; color:#fff; border-radius:50%;}
.race-meeting-race-info {display:flex; flex-direction:column;}
.race-meeting-race-name {font-size:13px; line-height:15px; font-weight:600;}
.race-meeting-group-count {display:flex; align-items:center; gap:2px; font-size:8px;}
.race-meeting-group-count span {height:12px; width:14px; line-height:12px; border-radius:4px; text-align:center;}
.race-meeting-more {padding:10px; text-align:center; font-weight:500;}

/* News items */
.news-item {color:#fff;}
.news-item-image {height:200px; background-size:cover; display:flex; align-items:flex-end; padding:10px; border-radius:10px; box-shadow:rgba(0, 0, 0, 0.08) 0px 2px 3px 0px; border:1px solid #d9d9d9;}
.content-scroller-double .news-item-image {height:150px;}
.content-scroller-double .news-item-headline {line-height:16px; font-size:14px;}
.news-item-headline {padding:5px 10px; line-height:20px; font-weight:800; font-size:18px; background:#00000098; border-radius:10px;}
.news-content h1 {padding:0 5px;}
.news-content img {margin:-5px 0 0 0; max-width:calc(100vw - 30px); border-radius:0.5rem; box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 3px 0px; border: 1px solid #d9d9d9;}

/* FORM GUIDE */
.formguide {position:fixed; margin:0 -10px; height:calc(100dvh - var(--top-pad)); overflow:auto;}
.formguide-meetings {display:none;}
.formguide-meetings-container {max-height:150px; overflow:auto; display:grid; grid-template-columns:auto 50px auto 50px; align-items:center; row-gap:2px; padding:0 10px 5px 10px; font-size:14px;}
.formguide-meetings-date {position:sticky; top:0; grid-column:1/5; padding:0 0 4px 0; border-bottom:1px solid #efefef; font-weight:bold; background:#fff;}
.formguide-meetings-track {padding:2px 0; font-weight:500;}
.formguide-meetings-state {color:#666; font-size:12px;}
.formguide-top {position:sticky; top:0; z-index:2; background:#fff; box-shadow:rgba(0, 0, 0, 0.18) 0px 5px 15px 0px;}
.formguide-top-runner-detail {position:fixed; top:0; margin-top:0;}
.formguide-top-runner-detail .formguide-races,
.formguide-top-runner-detail .formguide-title-extra {display:none;}
.formguide-title {display:flex; gap:5px; align-items:center; padding:0 15px; font-weight:900; font-size:18px;}
.formguide-title-name {max-width:calc(100vw - 50px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:'Outfit';}
.formguide-title-extra {display:none;}
.formguide-title-extra-info {display:flex; flex-direction:column; margin:0 10px 5px 10px; border-radius:10px; padding:5px 10px; font-size:12px; background:#f8f8f8; z-index:2; position:relative; outline: 5px solid white;}
.formguide-title-extra-stats-header {display:flex; gap:5px; align-items:center; font-size:12px; font-weight:bold;}
.formguide-title-extra-stats-container {display:none; margin:3px -3px 3px -3px; padding:2px 5px; border-radius:10px; background:#f2f2f2;}
.formguide-title-extra-stats {display:flex; flex-direction:column; font-size:11px;}
.formguide-title-extra-stats-row {display:grid; grid-template-columns:auto 50px auto 50px;}
.formguide-title-extra-stats strong {font-weight:500;}
.formguide-subtitle {display:flex; justify-content:start; width:100vw; overflow:auto; box-sizing:border-box; white-space:nowrap; padding:2px 10px; font-weight:600; font-size:12px; line-height:24px; gap:5px;}
.formguide-subtitle-class,
.formguide-subtitle-distance,
.formguide-subtitle-prize,
.formguide-subtitle-weights,
.formguide-subtitle-age-sex,
.formguide-subtitle-ground,
.formguide-subtitle-group {border-radius:10px; padding:0 10px; background:#ffe9cc;}
.formguide-subtitle-ground {text-transform:capitalize;}
.formguide-races {width:100vw; display:flex; gap:10px; padding:4px 10px 6px 10px; font-size:14px; line-height:24px; box-sizing:border-box; overflow:auto; white-space:nowrap;}
.formguide-race {display:flex; align-items:center; justify-content:center; min-width:30px; border-radius:10px; background:#efefef;}
.formguide-race:not(.formguide-race-selected):hover {background:#cacaca; cursor:pointer;}
.formguide-race-meeting-name {position:sticky; left:0; display:flex; align-items:center; gap:5px; padding:0 10px; min-width:auto; font-size:12px; background:#efefef; font-weight:500;}
.formguide-race-selected {background:#ff6600; color:#fff; font-weight:bold;}
.formguide-container {width:100vw; display:grid; grid-template-columns:var(--runner-width) auto; overflow:hidden;}
.formguide-header {position:relative; display:flex; flex-direction:column; gap:3px; justify-content:center; height:45px; background:#333; color:#fff; font-weight:500; font-size:14px; z-index:9;}
.formguide-header-sort {margin:0 3px; font-weight:400; font-size:10px; line-height:15px; border-radius:10px;}
.formguide-header-sort-selected {background:#000;}
.formguide-header-sort:hover {background:#222; cursor:pointer;}
.formguide-header-sorted-by,
.formguide-header-stat {display:flex; align-items:center; justify-content:center; text-align:center; gap:5px;}
.formguide-header-sorted-by {position:absolute; top:18px; left:calc(50% - 80px); width:160px; box-sizing:border-box; flex-direction:column; background:#222; border-radius:10px;}
.formguide-header-sorted-by-selected:before {content:"Sorted By"; position: absolute; top:-13px; left:calc(50% - 22px); font-size:10px; font-weight:normal;}
.formguide-header-sorted-by-option:not(.formguide-header-sorted-by-selected) {display:none;}
.formguide-header-sorted-by-option-break {border-top:1px solid #ffffff80;}
.formguide-header-sorted-by:hover {cursor:pointer;}
.formguide-header-sorted-by-option:hover {background:#000; cursor:pointer;}
.formguide-header-sorted-by-open {padding:5px 0; top:0; height:150px; overflow:auto; justify-content:flex-start; box-shadow:#333 0px 0px 5px 0px;}
.formguide-header-sorted-by-open .formguide-header-sorted-by-option {display:inline-block; width:calc(100% - 10px); text-align:center;}
.formguide-header-sorted-by-selected {text-transform:capitalize; border:none;}
.formguide-header-column {width:100%; display:grid; grid-template-columns:repeat(4,1fr); justify-content:center; text-align:center; font-size:12px;}
.formguide-runner-container {z-index:1; background:#fff; border-right:1px solid #efefef; box-shadow:#88888860 0px 0px 15px -5px;}
.formguide-runner {display:grid; grid-template-columns:40px 160px; height:50px; align-items:center; border-bottom:1px solid #efefef;}
.formguide-silks {height:100%; background-size:35px; background-repeat:no-repeat; background-position:50%;}
.formguide-horse-container {position:relative; display:flex; flex-direction:column; font-family:'Outfit';}
.formguide-horse-name {width:150px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap; font-size:13px; line-height:16px; font-weight:600;}
.formguide-horse-form {display:flex; gap:5px; font-size:10px; line-height:10px; color:#666; font-weight:500;}
.formguide-horse-trainer-jockey {display:flex; flex-direction:column; font-size:10px; line-height:10px;}
.formguide-horse-trainer,
.formguide-horse-jockey {width:120px; height:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.formguide-horse-rating {font-weight:900; color:#ff6600;}
.formguide-horse-odds {position:absolute; bottom:calc(50% - 16px); right:5px; text-align:center; height:20px; line-height:20px; width:40px; font-weight:bold; font-size:14px;}
.formguide-stats {display:grid; grid-template-columns:repeat(4,1fr); align-items:center; width:100%; height:50px; font-family:'Roboto'; border-bottom:1px solid #efefef;}
.formguide-stat {display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; height:50px;}
.formguide-stat-empty {grid-column:2 / 4; text-align:center; font-size:12px; line-height:12px;}
.formguide-stat-small {font-size:12px; line-height:12px;}
.formguide-stat-med {font-size:14px; line-height:14px; border-right:1px solid #efefef;}
.formguide-stats-container {position:relative; width:100%; flex-shrink:0; overflow:auto; overflow-x:hidden; overscroll-behavior:none;}
.formguide-stats-scroller {width:calc(100vw - var(--runner-width)); display:flex; flex-direction:row; transform:translateX(0%); transition:all 0.2s cubic-bezier(.17,.67,1,.8);}
.formguide-dropdown-arrow {font-size:12px;}

.formguide-table {display:flex; flex-direction:column; font-size:11px; margin-left:-10px; margin-right:-10px; width:100vw; overflow:auto;}
.formguide-table > div {display:grid; grid-template-columns:50px 35px 30px 30px 80px 20px 35px 200px 40px 100px 30px 45px; width:695px;}
.formguide-table > div > div {display:flex; padding:2px 4px; margin:-1px -1px 0 0; border:1px solid #eee;}
.formguide-table .formguide-detail-race-info {gap:0;}
.formguide-table .formguide-detail-race-info-pill {padding:0 2px; font-size:8px; line-height:10px; border-radius:0;}
.formguide-table .formguide-detail-race-info-pill:first-child {border-radius:10px 0 0 10px;}
.formguide-table .formguide-detail-race-info-pill:last-child {border-radius:0 10px 10px 0;}
.formguide-table .formguide-detail-same {padding:2px 4px; border-radius:0;}
.formguide-table-spell {width:100vw!important; position:sticky; left:0;}
.formguide-table-spell > div {grid-column:1/-1;color:#cc0000; background:#cc000020!important;}
.formguide-table-trial {opacity:0.6;}
.formguide-table-track {width:70px; white-space: nowrap; text-overflow:ellipsis; overflow: hidden; display:inline-block!important;}
.formguide-table-race-name {max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.formguide-table-header {position:sticky; top:0; margin-bottom:1px;}
.formguide-table-header > div {background:#000!important; color:#fff!important; border-color:#333!important; font-weight:600;}
.formguide-table-center {justify-content:center;}
.formguide-table-1 .formguide-table-pos {background:#008800!important; color:#fff;}
.formguide-table-1 > div {font-weight:600;}
.formguide-table-2 .formguide-table-pos {background:#dcffdc!important;}
.formguide-table-3 .formguide-table-pos {background:#e2fbe2!important;}
.formguide-table > div > div:first-child {position:sticky; left:0; z-index:2; background:#fff;}
.formguide-table > div > div:nth-child(2) {position:sticky; left:50px; z-index:2; background:#fff;}

/* Form Guide Detail popup */
.formguide-popup {display:none; position: fixed; z-index:1000;}
.formguide-detail {display:flex; flex-direction:column; gap:5px; position:relative; width:100%; height:100vh; flex-shrink:0; overflow:auto; overflow-x:hidden; overscroll-behavior: none; padding:0 10px; box-sizing:border-box; background:#fff;}
.formguide-detail-scroller {display:flex; position:fixed; inset:0; width:100vw; height:100vh; z-index:1; background:#fff; flex-direction:row; transform: translateX(0%); transition: all 0.2s cubic-bezier(.17,.67,1,.8);}
.formguide-detail-close {position:absolute; top:10px; right:0; z-index:2; display:flex; align-items:center; justify-content:center; padding:10px; width:12px; height:12px; font-size:20px; background:#efefef; border-radius:50%;}
.formguide-detail-odds {position:absolute; bottom:10px; right:0; font-size:14px; font-weight:900; text-align:center; width:50px; padding:5px 0;}
.formguide-detail-comment {font-size:12px; font-family:'Outfit'; color:#666; background: #f8f8f8; padding:5px 10px; border-radius:10px;}
.formguide-detail-filters-header {display:flex; gap:5px; align-items:center; padding:0 5px; font-size:16px; font-weight:bold;}
.formguide-detail-filters-container {display:none; margin-top:-5px; background:#fff;}
.formguide-detail-filters {display:grid; grid-template-columns:repeat(4,1fr); align-items:center; justify-content:center; text-align:center; font-size:12px;}
.formguide-detail-filter {display:flex; flex-direction:column; gap:3px; padding:5px; margin:5px; line-height:11px; border-radius:10px; font-weight:500; background:#efefef; cursor:pointer;}
.formguide-detail-filter-active:not(.formguide-detail-filter-blank) {background:#eeffee80; outline:2px solid #509d5040;}
.formguide-detail-filter-record {font-weight:normal; font-size:9px; line-height:8px; color:#333;}
.formguide-detail-filter-blank {opacity:0.5;}
.formguide-detail-filter-blank .formguide-detail-filter-record {opacity:0;}
.formguide-detail-silks {background-size:50px; background-repeat:no-repeat; background-position:50%; position: absolute; top:8px; left:0; width: 45px; height: 65px; padding: 10px; box-sizing: border-box; border-radius: 10px; background-color: white;}
.formguide-detail-horse-container {display:flex; flex-direction:column; position:sticky; top:0; padding:5px 10px 0 50px; font-size: 12px;}
.formguide-detail-horse-name {font-weight:800; font-size:16px;}
.formguide-detail-horse-form {color:#666; font-weight:500; font-size:11px;}
.formguide-detail-horse-trainer,
.formguide-detail-horse-jockey {font-size:11px;}
.formguide-detail-horse-information-header {display:flex; gap:5px; align-items:center; margin-top:5px; font-weight:600;}
.formguide-detail-horse-information-container {display:none; margin:3px -3px 0 -3px;}
.formguide-detail-horse-information {display:flex; flex-direction:column; padding:2px 5px; background:#f6f6f6; border-radius:10px; font-family:'Outfit';}
.formguide-detail-horse-information-row {display:grid; grid-template-columns:50px 1fr 50px 1fr;}
.formguide-detail-race-container {display:flex; flex-direction:column; gap:2px;}
.formguide-detail-same {border-radius:10px; padding:0 2px; background:#ffff73;}
.formguide-detail-race {display:grid; grid-template-columns:50px auto; padding-bottom: 10px; font-size:12px; border-bottom: 1px solid #efefef;}
.formguide-detail-race-result {display:flex; flex-direction:column; align-items:center; justify-content:center; width:45px; padding:5px 0; border-radius:20px; background:#fefefe;}
.formguide-detail-race-result-1 {background:#ffd60080!important;}
.formguide-detail-race-result-2 {background:#ffd60050!important;}
.formguide-detail-race-result-3 {background:#ffd60030!important;}
.formguide-detail-race-replay {margin-top:5px; font-size:14px;}
.formguide-detail-race-trial {border-radius:20px; opacity:0.5;}
.formguide-detail-race-trial .formguide-detail-race-container {gap:0;}
.formguide-detail-race-position {display:flex; align-items:center; justify-content:center; flex-direction:column; font-size:12px; font-weight:600;}
.formguide-detail-race-position-runners {font-size:10px; line-height:8px;}
.formguide-detail-race-margin {font-size:9px; font-weight:500; padding-top:4px;}
.formguide-detail-race-track {display:flex; align-items:center; gap:5px; font-weight:bold; background: #efefef; border-radius:10px; padding:2px 5px;}
.formguide-detail-race-ground {margin-left:auto; border-radius: 10px; padding:0 5px; font-size: 10px; text-transform:uppercase;}
.formguide-detail-race-data {display:flex; justify-content:space-between; align-items:center; font-weight:500; font-size:11px;}
.formguide-detail-race-name {display:flex; gap:5px; max-width:calc(100vw - 130px); padding-left:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:800;}
.formguide-detail-race-name-full {font-size:10px; color:#666;}
.formguide-detail-race-info {display:flex; gap:4px; align-items:center; padding-left:3px;}
.formguide-detail-race-info-pill {padding:0 5px; font-size:11px; font-weight:400; line-height:14px; text-transform:uppercase; background:#efefef; border-radius:10px;}
.formguide-detail-race-info-pill-diff {background:none; margin:0 -5px 0 -8px; font-size:10px;}
.formguide-detail-race-distance {display:flex; flex-direction:column; margin-bottom:-15px; padding:0 8px 0 5px; min-width:40px; text-align:center; font-size:11px;}
.formguide-detail-race-distance-diff {font-size:10px;}
.formguide-detail-race-jockey {padding-left:5px; font-size:11px;}
.formguide-detail-race-trial .formguide-detail-race-jockey {margin-bottom:2px;}
.formguide-detail-race-times {display:flex; flex-direction:column; padding-left:6px; margin-bottom:2px; font-size:11px;}
.formguide-detail-race-comment {padding-left:5px; margin-top:-2px; color: #666; font-size:11px;}
.formguide-detail-fast-finish {color:green;}
.formguide-detail-held-up {color:#cc0000;}
.formguide-detail-spell {grid-column:1/3; margin:10px 0 5px 0; padding:3px 0 4px 0; text-align:center; font-weight:700; font-size:14px; color:#cc0000; background: #cc000020; border-radius: 10px;}
.formguide-detail-scr .formguide-detail-silks {opacity:0.5;}
.formguide-detail-scr .formguide-detail-odds,
.formguide-detail-scr .formguide-detail-comment,
.formguide-detail-scr .formguide-detail-filters-header,
.formguide-detail-scr .formguide-detail-filters-container,
.formguide-detail-scr .formguide-table {display:none;}
.formguide-detail-scr .formguide-detail-horse-form {color:#cc0000;}
.formguide-detail-scroller,
.formguide-stats-scroller {touch-action: pan-y; -webkit-overflow-scrolling: touch;}

.race-result {display:flex; flex-direction:column; overflow:auto; width:100vw; margin-bottom:65px;}
.race-result-row {display:grid; grid-template-columns:30px 150px 60px 40px 60px 60px 60px;}
.race-result-row > div {display:flex; align-items:center; justify-content:center; padding:3px 5px; margin:-1px; border:1px solid #efefef; background:#fff;}
.race-result-row > div:nth-child(1) {position:sticky; left:0; font-weight:900; text-align:center;}
.race-result-header {position:sticky; top:0; z-index:2;}
.race-result-header > div {padding:5px 0; background:#333; color:#fff; font-weight:900;}
.race-result-row .result-tab {display:flex; flex-direction:column; gap:0; justify-content:center; align-items:center; font-size:12px;}
.race-result-row .result-runner {flex-direction:column; align-items:flex-start; justify-content:flex-start; line-height:16px;}
.race-result-row .result-horse {width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight: 600; line-height: 16px;}
.race-result-row .result-trainer-jockey {font-size:10px; line-height:11px;}
.race-result-scr {opacity:0.6;}

.stats-container {display: block; overflow-y:auto; overflow-x:auto; height:calc(100vh - 200px); -webkit-overflow-scrolling: touch; margin:0 -10px; background: #fff;}
.stats-scroll-inner {display: flex; flex-direction: column;  width: max-content; min-width: 100%;}
.stats-header,
.stats-row {display: grid; grid-template-columns:2rem 2rem 2rem 2rem 2rem 3rem auto 3rem; column-gap: 10px; align-items: center; padding: 6px 10px; white-space: nowrap;}
.stats-header {padding:8px 10px; text-align:center; background: #333; color: #fff; font-weight: 700; font-size: 12px; position: sticky; top: 0; z-index: 2;}
.stats-header-sort {padding:2px 0px; margin:-2px 0; background: #ff6600 !important; color:#fff !important; font-weight: 700; border-radius:1rem; transition: background 0.3s ease;}
.stats-row {background: #fff; font-size:12px; transition: background 0.2s;}
.stats-row:nth-child(even) {background: #fafafa;}
.stats-body {position: relative; display: flex; flex-direction: column;}
.stats-col-center {text-align:center;}
.stats-col-right {text-align:right;}
.stats-row .highlight {margin:-10px 0; padding:12px 0; background:#fff8e170; font-weight:990;}
.stats-row-item {font-weight:600;}
.stats-row-sub {margin-top:-2px; font-size:10px; color:#666;}
.stats-row .trainer-name {display:flex; flex-direction:column;}
.stats-row .trainer-first {font-size:10px; font-weight:normal; color:#888;}
.stats-row .trainer-last {margin-top:0;}
.stats-body.loading::before,
.stats-body.loading::after {content:""; position:absolute; inset:0; border-radius:1rem; z-index:5;}
.stats-body.loading::before {background: rgba(255, 255, 255, 0.75);}
.stats-body.loading::after {width:30px; height:30px; border:10px solid #cfcfcf; border-top-color: #006600; border-radius: 50%; position: absolute; top:10rem; left:1rem;animation: spin 0.8s linear infinite; content: "";}
@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}


/* Misc classes related to racing */
.ground-1,
.ground-2 {background:brown; color:#fff;}
.ground-3,
.ground-4 {background:green; color:#fff;}
.ground-5,
.ground-6,
.ground-7 {background:blue; color:#fff;}
.ground-8,
.ground-9,
.ground-10 {background:red; color:#fff;}

.group-1 {background:#ffd700!important;}
.group-2 {background:#ffe557!important;}
.group-3 {background:#fcea89!important;}

.ttg-0 {background:red; color:#fff;}
.ttg-10 {background:#333; color:#fff;}

.pos { color:#008800; font-weight:600; }
.neg { color:#cc0000; font-weight:600; }

/* Misc classes */
.ellipsize {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width:calc(100vw - 50px);}
.hidden {display:none;}
.faded {opacity:0.4; pointer-events:none;}
.loader {}
.disabled {pointer-events:none;}
.center {text-align:center;}
body.no-scroll {overflow:hidden; height:100%;}
.float-right {float:right; max-width:150px; border-radius:10px; margin:10px 0 10px 10px;}
.betlink {background:#eee; border-radius:10px;}

/* TABS */
.tabs-wrapper {overflow-x: auto; -webkit-overflow-scrolling: touch; margin:10px -10px; padding:0 10px;}
.tabs-wrapper+.tabs-wrapper {margin-top:-5px;}
.tabs-wrapper::-webkit-scrollbar {display:none;}
.tabs {display: flex; gap: 6px; padding: 0 8px; margin:0 -10px; min-width: max-content;}
.tabs .tab {background: #eee; border-radius: 1rem; padding: 4px 14px; font-size: 13px; background:#eee; white-space: nowrap; cursor: pointer; transition: background 0.2s, transform 0.2s; user-select: none;}
.tab.active {background: #003300; color:#fff; font-weight: 600;}
.tab:active {transform: scale(0.95);}
.tab.tab-label {background:#fff; color:#333; padding:6px 5px 0 5px; position:sticky; left:0;}

/* STATS FILTERS/SEARCH */
.filter-search {position: relative; flex: 1; margin-top:5px; min-width: 150px; display: none;}
.filter-search.visible {display:block;}
#filter-search-input {width:100%; padding: 4px 8px; border: 1px solid #ccc; border-radius:10px; outline:none;}
#filter-search-results {display:none; max-height:150px; margin:5px; overflow-y: auto; z-index: 999; font-size:12px;}
#filter-search-results.visible {display: block;}
#filter-search-results:empty {margin:0;}
.search-item {padding: 3px 8px; cursor: pointer; border-bottom:1px solid #efefef;}
.search-item:hover {background: #eee;}
.search-item:last-child {border:none;}
#active-filters {display: flex; gap: 6px; margin: 5px 0; overflow:auto;}
.pill {background: #f3f3f3; border-radius: 10px; padding: 3px 10px; font-size: 12px; display: flex; align-items: center; gap: 4px; white-space:nowrap; cursor: default;}
.pill .remove {font-weight: bold; cursor: pointer; color: #666;}
.pill .remove:hover {color: #000;}


/* BACKDROP */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 999;
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.modal-backdrop.active {
  display: block;
  opacity: 1;
}
/* MODALS (float above backdrop) */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;               /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.modal-overlay.show {
  display: flex;
  opacity: 1;
}

.modal-content {margin:2rem;
  padding: 1.5rem 2rem;
  border-radius: 12px;
  max-width: 400px; min-width: calc(100% - 4rem); box-sizing:border-box;
  position: relative;
  background: #fff; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  animation: popIn 0.25s ease; z-index:1001; pointer-events: auto;
}
.modal-content h1 {text-align: center; margin: -0.5rem 0 1rem 0; padding: 0;}
.modal-content h2,
.modal-content h3,
.modal-content h4 {padding-left:0;}
.modal-content .tabs-wrapper,
.modal-content .stats-container {height:auto; max-height:300px;margin-left:-2rem; margin-right:-2rem;}

@keyframes popIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 26px;
  color: #888;
  cursor: pointer; z-index:2;
}
.modal-close:hover { color: #000; }
.locked-from-limit .modal-close {display: none !important;}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 1rem;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-form input:focus {
  border-color: #0074f8;
  box-shadow: 0 0 0 2px rgba(0,116,248,0.15);
  outline: none;
}

.auth-form button[type="submit"] {
  background: #0074f8;
  color: #fff;
  border: none;
  padding: 10px 14px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.auth-form button:hover {background: #005ec2;}

.auth-form label {
  font-size: 14px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
}

.msg {
  margin-top: 8px;
  font-size: 14px;
  min-height: 18px;
  color: #000;
  text-align: center;
}
.msg.success { color: #008800; }
.msg.error { color: #d33; }
.msg:empty {display:none;}

.switch-text {
  margin-top: 1rem;
  text-align: center;
  font-size: 14px;
  color: #555;
}
.switch-text a {color: #0074f8; text-decoration: none; font-weight: 600;}
.switch-text a:hover { text-decoration: underline; }
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(0,0,0,0.1);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 1rem;
}

.loading-text {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.bet-balance {margin:-5px 0 -2px 0px;padding:5px 10px;border-radius:7px;background:#eee;}
.bet-ticket {display:grid; grid-template-columns:1fr 1fr; padding: 10px; border-radius: 10px;background: #eee; }
.bet-success-wrap {
  animation: fadeSlideIn 0.4s ease;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

button {font-weight:900;}
button, input {font-family:'Outfit';}