body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f0f4f7;
    margin: 0;
    padding: 12px;
}

.divInner {
    padding: 1em;
    /*border: 2px solid #e1e1e1;*/
    border-radius: 25px;
    /*background-color: #ededed;*/
}

.header-event {
    background-color: #0056b3;
    color: #FFFFFF;
    padding: 12px;
    margin: 0px;
    text-align: center;
    font-weight: 700;
    font-size: 1.6em;
}

.event-details {
    text-align: center;
    padding: 0px;
    color: #efefef;
    font-size: .5em;
}

.head-link {
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    font-size: 1em;
}

.head-link-selected {
    font-weight: 500;
    color: #bcbcbc;
    text-decoration: none;
}

.header-entry {
    background-color: #fff;
    padding: 12px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.eventTitle {
    font-size: 1.3em;
    font-weight: bold;
    display: inline-block;
    padding-bottom: 5px;
}

.eventAddressDetails {
    font-size: 1em;
    display: inline-block;
    padding-left: 2px;
    padding-top: 5px;
    opacity: .7;
}

.eventDetails {
    font-size: 1.2em;
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 3px;
    font-style: italic;
}

.eventExtraDetails {
    font-size: 1em;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 3px;
    font-style: italic;
}

.divFooter {
    font-size: .6em;
}

.container {
    padding: .5rem;
}

.container-center {
    display: flex;
    justify-content: center;
}

.scoring-header {
    padding-bottom: 1.2em;
}

.filter-section {
    padding-left: .5rem;
}

.filter-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.filter-section label {
    font-size: 1em;
    font-weight: 600;
    color: #333;
    margin-right: 6px;
    width: 75px;
    display: inline-block;
}

.filter-section select {
    padding: 6px;
    font-size: .9em;
    border-radius: 5px;
}

.select2-results__option input {
    margin-right: 10px;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    min-width: 300px; /* Adjust the width as per your need */
    white-space: normal; /* Allow the text to wrap to the next line instead of truncating */
    word-wrap: break-word; /* Ensure words wrap to the next line if too long */
    line-height: 1.5; /* Adjust the line height for readability */
}

.small-font {
    font-size: 0.8em;
    color: gray; /* Optional: Change text color */
    font-style: italic; /* Optional: Add emphasis */
}

table, th, td {
    border: solid 0px #DDD;
    width: 700px;    
}

.tooltip {
    position: relative;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 60px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 25%;
    left: 50%;
    margin-left: 0px;
    opacity: 0;
    transition: opacity 0.3s;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    border-radius: .3em;
    border: 2px solid #9e9e9e;
}

table.tablesorter tbody td {
	font-size: 1.2em;
    text-align: left;
    border-left: 1px #DDD solid;
}

table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    /*background-color: #cdcdcd;*/
    background-color: #0056b3;
    font-size: 1.3em;
    padding: 4px;
    color: #FFFFFF;    
    padding-left:2px;
}

/* Extra selectors needed to override the default styling */
table.tablesorter tbody tr.normal-row td {
    background: #FFFFFF;
}

table.tablesorter tbody tr.alt-row td {
    background: #e6EEEE;
}

table.tablesorter tbody tr.search-highlight td {
    background: #A8D5BA !important;
}

table.tablesorter-default {
    margin: 3px 0 3px;
}

table.tablesorter-default td {
    background-color: #DDD;
    border-bottom: #ccc 1px solid;
    vertical-align: top;
    padding-left: 2px;
}

.left-dash-panel { width:70%;padding:0 0 0 0;float:left;vertical-align:top;  }

.right-dash-panel {  width:30%;padding:0 0 0 0px;float:right;vertical-align:top;  }

.thCellNone {
    display: none;
}

.tdCellNone {
    display: none;
}

.thCell {
    display: table-cell;
}

.thPrint {
    display: table-cell;
    border-right: 1px #DDD solid;
}

.tdPrint {
    display: table-cell;
    border-right: 1px #DDD solid;
}

.tdCell {
    display: table-cell;
}

.thCellSingle1 {
    display: table-cell;
}

.tdCellSingle1 {
    display: table-cell;
}

.thCellSingle2 {
    display: table-cell;
}

.tdCellSingle2 {
    display: table-cell;
}

.thCellMerged1 {
    display: none;
}

.tdCellMerged1 {
    display: none;
}

.thCellMerged2 {
    display: none;
}

.tdCellMerged2 {
    display: none;
}

.table-separator-right-header {
    border-right: 1px #FFFFFF solid;
}

.table-separator-right {
    border-right: 1px #4D4D4D solid;
}

.division-title {
    font-size: 2em;
    font-weight: 700;
    color:#0056b3;
    padding-bottom:3px;
}

.cross-country-details-title {
    font-size: 0.7em;
    text-decoration: underline;
    color:#0056b3;
    color:#0056b3;
}

.division-status {
    font-size: 1.5em;
    font-weight: bold;
    color: red;
}

.division-status-print {
    font-size: 1.5em;
    font-weight: bold;
}

.division-text {
    font-size: 1.2em;
}

.detailed-cross-country-details-title {
    font-size: 1.5em;
    text-decoration: underline;
}


.scoring-details-link {
    font-size: 1.2em;
    text-decoration: underline;
}

.detailed-cross-country-details {
    padding: 0px 10px 10px 0px;
}

.txtSearch {
    height: 2.5em;
    border-radius: .3em;
    border: 2px solid #e9e9e9;
    font-size: 1em;
    width:240px;
}

.search-button {
    padding: 6px;
    font-size: .8em;
    border-radius: 5px;
    background-color: #0056b3;
    color: #fff;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}

.divisionExpandedDetails {
    background-color: #DDD;
}

@media only screen and (max-width: 420px) {
    .small-font {
        font-size: 1em;
        color: gray; /* Optional: Change text color */
        font-style: italic; /* Optional: Add emphasis */
    }

    table.tablesorter tbody tr.alt-row td {
        background: #FFE996;
    }

    .table-separator-right-header {
        border-right: 1px #FFFFFF solid;
    }

    .table-separator-right {
        border-right: 1px #4D4D4D solid;
    }

    .eventTitle {
        font-size: 1.1em;
        font-weight: bold;
        display: inline-block;
        padding-bottom: 5px;
    }

    .eventAddressDetails {
        font-size: 0.9em;
        display: inline-block;
        padding-left: 2px;
        padding-top: 5px;
        opacity: .7;
    }

    .eventDetails {
        font-size: 0.8em;
        display: inline-block;
        padding-top: 5px;
        padding-bottom: 3px;
        font-style: italic;
    }

    .eventExtraDetails {
        font-size: 0.8em;
        display: inline-block;
        padding-top: 10px;
        padding-bottom: 3px;
        font-style: italic;
    }

    .scoring-header {
        padding-bottom: 0.5em;
    }

    table.tablesorter tbody td {
        font-size: 1em;
        text-align: left;
        border-left: 1px #DDD solid;
    }

    table.tablesorter thead tr th, table.tablesorter tfoot tr th {
        background-color: #0056b3;
        font-size: .8em;
        color: #FFFFFF;
    }

    .thCell {
        display: table-cell;
    }

    .tdCell {
        display: table-cell;
    }

    .thCellSingle1 {
        display: none;
    }

    .tdCellSingle1 {
        display: none;
    }

    .thCellSingle2 {
        display: none;
    }

    .tdCellSingle2 {
        display: none;
    }

    .thCellMerged1 {
        display: table-cell;
    }

    .tdCellMerged1 {
        display: table-cell;
    }

    .thCellMerged2 {
        display: table-cell;
    }

    .tdCellMerged2 {
        display: table-cell;
    }

    .division-title {
        font-size: 1.3em;
    }

    .cross-country-details-title {
        font-size: 0.8em;
        text-decoration: underline;
    }

    .detailed-cross-country-details-title {
        font-size: 1em;
        text-decoration: underline;
    }

    .division-status {
        font-size: 1em;
        font-weight: bold;
        color: red;
    }

    .division-text {
        font-size: 1em;
    }
}

@media only screen and (min-width: 421px) and (max-width: 559px) {
/*@media only screen and (max-width: 559px) {*/
    table.tablesorter tbody tr.alt-row td {
        background: #FFE996;
    }

    .eventTitle {
        font-size: 1.2em;
        font-weight: bold;
    }

    .eventDetails {
        font-size: 1em;
    }

    table.tablesorter tbody td {
        font-size: 1.2em;
        /*background-color: #CDCDCD;*/
        text-align: left;
        border-left: 1px #DDD solid;
    }

    table.tablesorter thead tr th, table.tablesorter tfoot tr th {
        background-color: #0056b3;
        font-size: 1.2em;
        padding: 4px;
        color: #FFFFFF;
    }

    .thCell {
        display: table-cell;
    }

    .tdCell {
        display: table-cell;
    }

    .thCellSingle1 {
        display: none;
    }

    .tdCellSingle1 {
        display: none;
    }

    .thCellSingle2 {
        display: none;
    }

    .tdCellSingle2 {
        display: none;
    }

    .thCellMerged1 {
        display: table-cell;
    }

    .tdCellMerged1 {
        display: table-cell;
    }

    .thCellMerged2 {
        display: table-cell;
    }

    .tdCellMerged2 {
        display: table-cell;
    }

    .table-separator-right-header {
        border-right: 1px #FFFFFF solid;
    }

    .table-separator-right {
        border-right: 1px #4D4D4D solid;
    }

    .division-title {
        font-size: 1.5em;
    }

    .cross-country-details-title {
        font-size: 0.8em;
        text-decoration: underline;
    }

    .detailed-cross-country-details-title {
        font-size: 1.2em;
        text-decoration: underline;
    }

    .division-status {
        font-size: 1.2em;
        font-weight: bold;
        color: red;
    }

    .division-text {
        font-size: 1.1em;
    }
}

@media only screen and (min-width: 560px) and (max-width: 980px) {
    table.tablesorter tbody tr.alt-row td {
        background: #FFE996;
    }

    table.tablesorter tbody td {
        font-size: 1.3em;
        /*background-color: #CDCDCD;*/
        text-align: left;
        border-left: 1px #DDD solid;
    }

    table.tablesorter thead tr th, table.tablesorter tfoot tr th {
        background-color: #0056b3;
        font-size: 1.2em;
        padding: 4px;
        color: #FFFFFF;
    }

    .thCell {
        display: table-cell;
    }

    .tdCell {
        display: table-cell;
    }

    .thCellSingle1 {
        display: none;
    }

    .tdCellSingle1 {
        display: none;
    }

    .thCellSingle2 {
        display: none;
    }

    .tdCellSingle2 {
        display: none;
    }

    .thCellMerged1 {
        display: table-cell;
    }

    .tdCellMerged1 {
        display: table-cell;
    }

    .thCellMerged2 {
        display: table-cell;
    }

    .tdCellMerged2 {
        display: table-cell;
    }

    .table-separator-right-header {
        border-right: 1px #FFFFFF solid;
    }

    .table-separator-right {
        border-right: 1px #4D4D4D solid;
    }

    .division-title {
        font-size: 1.7em;
        font-weight: bold;
    }

    .cross-country-details-title {
        font-size: 0.8em;
        text-decoration: underline;
    }

    .detailed-cross-country-details-title {
        font-size: 1.3em;
        text-decoration: underline;
    }

    .division-status {
        font-size: 1.3em;
        font-weight: bold;
        color: red;
    }

    .division-text {
        font-size: 1.1em;
    }
}

@media print {
    table, th, td {
        border: solid 1px #DDD;
        width: 700px;
    }

    table.tablesorter tbody td {
        font-size: 1.6em;
        /*background-color: #CDCDCD;*/
        text-align: left;
        border-left: 1px #DDD solid;
    }

    table.tablesorter thead tr th, table.tablesorter tfoot tr th {
        background-color: #0056b3;
        font-size: 1.8em;
        padding: 4px;
        color: #FFFFFF;
    }

    .thCellNone {
        display: none;
    }

    .tdCellNone {
        display: none;
    }

    .thCell {
        display: table-cell;
    }

    .thPrint {
        display: none;
        border-right: 1px #DDD solid;
    }

    .tdPrint {
        display: none;
        border-right: 1px #DDD solid;
    }

    .tdCell {
        display: table-cell;
    }

    .thCellSingle1 {
        display: table-cell;
    }

    .tdCellSingle1 {
        display: table-cell;
    }

    .thCellSingle2 {
        display: table-cell;
    }

    .tdCellSingle2 {
        display: table-cell;
    }

    .thCellMerged1 {
        display: none;
    }

    .tdCellMerged1 {
        display: none;
    }

    .thCellMerged2 {
        display: none;
    }

    .tdCellMerged2 {
        display: none;
    }

    .table-separator-right-header {
        border-right: 1px #FFFFFF solid;
    }

    .table-separator-right {
        border-right: 1px #4D4D4D solid;
    }

    .division-title {
        font-size: 2.2em;
    }

    .cross-country-details-title {
        font-size: 0.8em;
        text-decoration: underline;
    }

    .division-status {
        font-size: 1.3em;
        font-weight: bold;
        color: red;
    }

    .division-text {
        font-size: 1.1em;
    }
}


/* ------------------------------------------------------------------
   Horse-info popover (added 2026-08-11)
   Moved out of SCTestLiveScoringV75.js so the styling lives here with the
   rest of the page styles instead of being injected at runtime.
   Palette matches the existing page theme - #f0f4f7 page background,
   #0056b3 primary, #e6EEEE alt-row - light and neutral, no dark green.
   ------------------------------------------------------------------ */
/* Defensive: the horse name must render at EXACTLY the cell's size and weight.
   !important is deliberate - an older cached build of the JS injected its own
   <style id="sc-horse-info-style"> at runtime with font-weight:600 and a green colour.
   An injected <style> sits later in <head> and would otherwise beat this file, so a stale
   cached script could still make the name look bold/large. This guarantees it cannot. */
.sc-horse-wrap,
.sc-horse-wrap .sc-horse-link {
    /* METRICS stay locked - these are what caused the "font got bigger" problem and
       what drives column width. Colour is deliberately NOT locked here so the
       horse/rider colour variation below can apply. */
    font-size: inherit !important;
    font-style: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
}

/* ---- Rider vs Horse name variation -------------------------------------
   COLOUR ONLY, on purpose. Changing weight or size would alter glyph widths and
   push the column widths out again, which is the problem we just fixed. These
   two tones both come from the existing page palette. */
.sc-rider-name {
    /* Dark neutral - per Seetha, the rider name must NOT be light. With both names dark the
       separation is HUE-based: this is a pure neutral (R=G=B) while the horse name is navy,
       so they still read as different fields without the rider looking washed out.
       #333 also matches the tablesorter theme's own body colour. */
    color: #333333;          /* rider - dark neutral */
}

.sc-horse-name,
.sc-horse-wrap .sc-horse-link {
    /* Same dark blue the popover title used to use - the horse name is the row's
       headline, so it carries the accent colour and the rider (#333) stays neutral. */
    color: #0056b3;          /* horse - dark blue */
    /* NO font-weight here on purpose: bold glyphs are wider and would push the
       Horse/Owner column out again. If you want it bolder, add font-weight:600
       here and re-check the column width. */
}

.sc-horse-wrap {
    position: relative;
    /* display:inline (NOT inline-block) on purpose: inline-block makes the
       name+pill+dot one shrink-to-fit box, which raises the cell's intrinsic
       width and widens the Horse/Owner and Rider columns in this auto-layout
       table. inline behaves exactly like the plain text did before. */
    display: inline;
}

/* Horse name renders exactly as it did before the popover existed:
   inherits the cell's colour and weight so it can never drift from the theme. */
.sc-horse-link {
    /* Inherit EVERYTHING that affects glyph size/appearance. The name must render
       identically to the plain <span> V73 used - a UA or theme rule targeting <a>
       must not be able to change its size, weight or colour. */
    color: inherit;
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-decoration: none;
    cursor: pointer;
}

.sc-sex-pill {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 9px;
    background: #e6EEEE;
    color: #0056b3;
    margin-left: 4px;
    vertical-align: middle;
}

.sc-sex-pill-f {
    background: #f4ecf2;
    color: #8a4a72;
}

/* Hover cue next to the horse name. Kept deliberately tiny (9px glyph, 11px box,
   3px gap) so it adds ~14px to the cell and nothing else - the name itself is
   unchanged. superscript-style alignment keeps the row height identical. */
.sc-info-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    line-height: 10px;
    text-align: center;
    border-radius: 50%;
    background: #e6EEEE;
    color: #0056b3;
    border: 1px solid #c9d6e0;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 10px !important;
    margin-left: 3px;
    vertical-align: super;
    cursor: pointer;
}

.sc-horse-popover {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    width: 210px;
    z-index: 9999;
    background: #ffffff;
    color: #333;
    border: 1px solid #c9d6e0;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    text-align: left;
    white-space: normal;
}

/* Two arrows: the first draws the border edge, the second covers it in the
   panel colour so the pointer matches the bordered white popover cleanly. */
.sc-horse-popover::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 14px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent #c9d6e0 transparent;
}

.sc-horse-popover::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 14px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent #ffffff transparent;
}

.sc-horse-popover.sc-open {
    display: block;
}

.sc-hp-title {
    font-weight: 700;
    font-size: 11.5px;
    margin-bottom: 3px;
    /* Near-black: the blue moved out to the table's horse name, so inside the white
       popover the heading reads as plain strong text rather than competing with it. */
    color: #222222;
}

.sc-hp-line {
    color: #333;
}

.sc-hp-close {
    position: absolute;
    top: 3px;
    right: 6px;
    color: #8aa0b3;
    font-size: 12px;
    cursor: pointer;
    display: none;
    line-height: 1;
}

@media (hover: none) {
    .sc-hp-close {
        display: block;
    }
}