/* This styling applies to all GMS tables */
.gms-table { width: 100%; margin: 0; border-collapse: collapse }
.gms-table th { text-align: left; background-color: silver }
.gms-table th, .gms-table td { border: 1px solid; padding: 3px 10px; border-color: silver }
.gms-footnote, .gms-filter { margin: 0 0 2rem }
.gms-clubteam:not(.gms-button), .gms-boldteam { font-weight: 700 }
.gms-filter > div { margin: 0 0 1rem }
.gms-filter fieldset { width: fit-content }
.gms-filter legend { padding: 0px }

/* This styling sets alignment for specific tables */
.gms-table-results th:nth-child(4), .gms-table-results td:nth-child(4) { text-align: center }
.gms-table-league td:nth-child(n+3), .gms-table-league th:nth-child(n+3) { text-align: right }
.gms-table-fixtures td:first-child, .gms-table-results td:first-child, .gms-table-league.gms-table-custom td:last-child { white-space: nowrap }

/* The following will highlight team or club win, draw and loss on results */
.gms-form { display: inline-block; width: 1.25rem; text-align: center }
.gms-win { background-color: green }
.gms-draw { background-color: dimgray }
.gms-loss { background-color: red }
.gms-win, .gms-draw, .gms-loss { color: white; font-weight: 700 }

/* Helps makes GMS feed responsive depending on screen size and input device */
@media screen and (max-width: 767px) { .gms-table { overflow-x: auto; display: block; white-space: nowrap } .gms-nomobile { display: none } }
@media not screen and (max-width: 767px) { .gms-mobile { display: none } }
@media (hover: hover) and (pointer: fine) { .gms-detaillink { cursor: pointer } .gms-detaillink:hover { background-color: yellow } }

/* Styling for fixtures and results displayed as list and fixture details */
.gms-list > * + * { margin-top: 1.5rem; margin-bottom: 1.5rem }
.gms-list + .gms-footnote { margin-top: 1rem }
.gms-card { text-align: center; padding: 3px 3px; border-radius: 0.5rem; position: relative }
.gms-card, .gms-cardtime, .gms-cardnoscore, .gms-fixturedetails > div { border: 1px solid; border-color: silver }
.gms-cardtitle, .gms-cancel, .gms-card .gms-directions-card { font-weight: 700; font-size: larger }
.gms-cancel { position: absolute; right: 0.5rem; top: 0 }
.gms-cardfixture, .gms-cardscorers { display: flex; gap: 0.5rem; align-items: center }
.gms-cardhome { flex: 1 1 0%; text-align: right }
.gms-carddivide { padding: 0.25rem 0.5rem }
.gms-cardtime, .gms-cardnoscore { font-weight: 700; border-radius: 0.375rem; background-color: white }
.gms-cardaway { flex: 1 1 0%; text-align: left }
.gms-cardscorers { font-size: smaller }
.gms-cardstatus { background-color: black; color: white; margin: 0.25rem auto; width:fit-content; padding: 0.25rem 0.5rem }
.gms-directions-card { font-weight: 700; max-width: max-content; margin-left: auto; margin-right: auto; padding: 0.5rem; color: white; background-color: black; border-radius: 0.375rem; display: flex; flex-direction: column; row-gap: 0.75rem }
.gms-directions-btns { display: flex; gap: 0.5rem }
.gms-directions-btns svg { width: 2rem; height: 2rem; pointer-events: none }
.gms-map-google, .gms-map-apple { background-color: white }
.gms-map-waze { background-color: #05c8f7 }
.gms-fixture .gms-card > *, .gms-cardform { margin-top: 0.5rem; margin-bottom: 0.5rem }
.gms-fixturedetails { display: flex; flex-wrap: wrap; gap: 1rem }
.gms-fixturedetails > div { flex-grow: 1; padding: 0.5rem 0.5rem; border-radius: 0.5rem }
.gms-fixturedetails img { display: inline; width: 1.5rem; height: 1.5rem; vertical-align: middle; margin-right: 0.25rem }
.gms-fixturedetails ul { list-style-type: none; padding: 0; margin: 0 }
.gms-players li { display: flex; align-items: center }
.gms-players svg { width: 1rem; height: 1rem }

/* Creates a loader image for the AJAX wait */
.gms-loader { margin: 1rem auto; border: 16px solid silver; border-top: 16px solid black; border-radius: 50%; width: 120px; height: 120px; animation: gms-spin 1s linear infinite } @keyframes gms-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }