/* Web fonts include */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@700&family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&family=Roboto:wght@400;700&family=Bree+Serif&family=Dongle:wght@300;400;700&display=swap');

/***
 * Bootstrap variables and styles available for override by variable specialisation
 ***/
@import url('tipping-bootstrap.css?20260102042031692');

/***
 * OnlineSportsTipping variables available for override
 ***/
@import url('tipping-ost-vars.css?20260102042031692');

/***
 * Apply any custom theme overrides
 ***/
@import url('tipping-theme.css?20260102042031692');

/***
 * Styles for legacy pages not yet mobile-friendly
 ***/
@import url('tipping.css?20260102042031692');

/* Element-level defaults */
body, p, td, th, div, li {
    font-family: var(--ost-base-font);
    color: var(--ost-base-font-color);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ost-heading-font);
    color: var(--ost-heading-font-color);
}
h1 {
    font-size: var(--ost-heading-h1-size);
}
h2 {
    font-size: var(--ost-heading-h2-size);
}
h3 {
    font-size: var(--ost-heading-h3-size);
}
textarea,input[type="text"],input[type="number"],input[type="email"],input[type="submit"],button {
    font-family: var(--ost-input-font);
}
textarea,input[type="text"],input[type="number"],input[type="email"] {
    color: var(--ost-input-text-color);
    background-color: var(--ost-input-bg-color);
}
body {
    background-color: var(--ost-body-bg-color); 
}



.disclaimer             { font-size: x-small; }
div.disclaimer          { margin-top: 1rem; text-align: center; }

/* Introduced in 201907 */
.padding-top        { padding-top: 1rem; }
.padding-top-lg     { padding-top: 2rem; }
.padding-for-navbar-unauth   { padding-top: 3.5rem; }
.padding-for-navbar-auth     { padding-top: 70px; }
.margin-for-navbar-auth      { margin-top: 60px; }
body:not(.ost-201907) div.padding-for-navbar-auth   { padding-top: 70px; } /* Hybrid pages that show bootstrap menu and legacy layout */
body.ost-201907       div.padding-for-navbar-auth   { display: none; }
tr.highlight0, div.highlight0
                { background-color: transparent }
tr.highlight1, div.highlight1
                { background-color: var(--ost-alt-row-highlight-color); }
tr.selected, table#ost-fg-history-table tr.selected {
    background-color: var(--ost-attention-highlight-bg-color);
}
tr.selected td, tr.selected td a {
    color: var(--ost-attention-highlight-text-color);
}

/***
 * Page structure
 ***/
div.ost-page-container {
    padding-bottom: 10px;
    margin-bottom: var(--ad-container-height);
}

/***
 * Navbar
 ***/
.ost-navbar {
    background-color: var(--ost-navbar-color);
}
.ost-navbar .navbar-brand {
    color: var(--ost-navbar-text-color);
}
.ost-navbar .nav-link {
    color: var(--ost-navbar-text-color);
    opacity: var(--ost-navbar-text-opacity-std);
    font-weight: var(--ost-navbar-text-weight);
}
.ost-navbar .nav-link:hover, .ost-navbar .nav-link:active {
    color: var(--ost-navbar-text-color-hover);
    opacity: var(--ost-navbar-text-opacity-hover);
}
.ost-navbar-unauth .ost-navbar-brand
    { margin: 0; padding: 0; max-width: 75%; }
@media screen and (max-width: 575.98px) {
    .ost-navbar-unauth .ost-navbar-brand { font-size: 1rem; }
}
.ost-navbar-auth
    { padding-top: 0; padding-bottom: 0; padding-left: 0 }
.ost-navbar-auth .ost-navbar-brand
    { padding-top: 0; padding-bottom: 0 }
.ost-nav-item
    { position: relative; } /* Allow for absolute positioning of subitems within the navitem */
.ost-nav-item > a > i
    { font-size: 1.2rem; margin-left: 0.5rem;}
.ost-nav-item a.dropdown-item > i
    { width: 1.4rem; text-align: center; }
nav.ost-navbar-nav a.nav-link
    { white-space: nowrap; }

@media screen and (max-width: 1199.98px) {
    .ost-nav-label
        {  }
    #mAdmin .ost-nav-label
        { font-size: 0.9rem; }
}
nav#mAdmin {
    z-index: 990; /* Needs to be less than Bootstap .dropdown-menu */
}

/****
    Mobile devices use 980px for legacy pages where that have not set the viewport meta tag
    Extend display style as at the lg breakpoint (992) down as far as 980
 ****/
@media screen and (min-width: 980px) and (max-width: 991.98px) {
    body:not(.ost-201907) .ost-nav-label
        { display: inline!important }
}
.ost-nav-item i.unread
    { color: rgba(255,0,0,0.5); }
.ost-nav-item a:hover i.unread
    { color: rgba(255,0,0,0.7); }
.ost-inbox-badge
    { position: absolute; top: 4px; left: 11px; } /* absolute within a relative parent (ost-nav-item)

/***
 * Resurrected Bootstrap Navbar behaviour for hybrid pages showing Bootstrap menus but legacy content/layout
 ***/
body:not(.ost-201907) .ost-nav-item    { font-size: 1rem; }
body:not(.ost-201907) .ost-nav-item  a { text-decoration: none; }
body:not(.ost-201907) .dropdown-menu   { font-size: 1rem; }
body:not(.ost-201907) a.dropdown-item  { color: var(--ost-dropdown-menu-text-color); }
body:not(.ost-201907) a.dropdown-item.disabled { color: var(--ost-dropdown-menu-disabled-color); }

/***
 * Advertisement styling, shrink ad banners to fit on small screens
 ***/
div#ost-ad-container {
    background-color: var(--ost-navbar-color);
}
@media screen and (max-width: 468px) {
    div#ost-ad-container img { width: 100% }
}

/***
 * Carousel colour overrides
 ***/
#ostCarousel .carousel-indicators li
    { background-color: #333; }
#ostCarousel .carousel-control-prev-icon
    { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e") }
#ostCarousel .carousel-control-next-icon
    { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e") }

/***
 * Terms & Conditions
 ***/
.ost-tandc-textarea { width: 600px; height: 400px; font-size: smaller; }
@media screen and (max-width: 730px) {
    .ost-tandc-textarea { width: 100% }
}
div.ost-tandc-block {
    font-size: 80%;
    font-weight: 400;
    text-align: center;
}

/***
 * Select2 usage within Bootstrap form-control to emulate Bootstrap CSS heights and padding
 *   and integration with competition-specific theming
 ***/
.ost-201907 .form-group .select2-container .select2-selection {
    padding: 0.375rem 0;
    height: calc(1.5em + .75rem + 2px);
}
.ost-201907 .form-group .select2-container--default .select2-selection__arrow {
    top: 0px;
    height: calc(1.5em + .75rem + 2px);
}
.ost-201907 .form-group .select2-container--default .select2-selection__rendered {
    line-height: inherit;
    font-family: var(--ost-input-font);
}
.ost-201907 .form-group .select2-container--default .select2-selection__placeholder {
    color: var(--ost-placeholder-text-color);
}
.ost-201907 .select2-container--default .select2-selection--single {
    background-color: var(--ost-input-bg-color);
    border-color: var(--ost-input-border-color);
}
.ost-201907 .select2-container--default .select2-selection__rendered {
    color: var(--ost-input-text-color);
}
.ost-201907 .select2-container--open, 
.ost-201907 .select2-container--focus {
    border-color: var(--ost-input-focus-border-color);
    box-shadow: 0 0 0 0.2rem var(--ost-input-focus-shadow-color);
}
li.select2-results__option, 
.select2-container--default .select2-search--dropdown {
    background-color: var(--ost-select2-bg-color);
    color: var(--ost-select2-text-color);
}
li.select2-results__option:has(span.ost-is-closed) {
    color: var(--ost-attention-highlight-text-color);
    background-color: var(--ost-attention-highlight-bg-color);
}
li.select2-results__option > span.ost-is-closed::after {
    content: " (closed)";
}
.select2-container--default li.select2-results__option[aria-selected=true] {
    background-color: var(--ost-select2-selected-bg-color);
    color: var(--ost-select2-selected-text-color);
}
.select2-container--default li.select2-results__option--highlighted[aria-selected] {
    background-color: var(--ost-select2-highlighted-bg-color);
    color: var(--ost-select2-highlighted-text-color);
}
.select2-container--default .select2-search--dropdown input.select2-search__field {
    border-color: var(--ost-input-border-color);
    background-color: var(--ost-input-bg-color);
}

/***
 * Tooltip override on legacy pages
 ***/
body:not(.ost-201907) div.tooltip-inner
    { color: white; }

/***
 * Field groups
 ***/
div.ost-field-group {
    position: relative;
    background-color: var(--ost-field-group-bg-color);
    border: solid 1px var(--ost-field-group-border-color);
    border-radius: 10px;
    padding: 10px 6px 6px 6px;
    margin: auto;
    margin-top: 10px;
    width: fit-content;
}

span.ost-field-group-label {
    position: absolute;
    top: 1px;
    font-family: var(--ost-tip-selection-secondary-font);
    color: var(--ost-field-group-text-color);
    font-size: var(--ost-tip-selection-secondary-font-size);
    padding: 0px 3px;
}

div.ost-field-group.ost-admin span.ost-field-group-label i {
    font-size: 1.3em;
}

/***
 * Bootstrap table extensions
 ***/
table.table.ost-table {
    margin: auto;
    width: auto;
}

@media screen and (max-width: 767.98px) {
    table.table.ost-table.ost-table-responsive-sm {
        width: 100%;
    }
    table.table.ost-table.ost-table-responsive-sm thead {
        display: none;
    }
    table.table.ost-table.ost-table-responsive-sm tr {
        display: block;
        padding: 0.5rem;
    }
    table.table.ost-table.ost-table-responsive-sm td {
        display: table-row-group;
        border: 0;
    }
}

/***
 * Confirmation dialog
 ***/
.popover.confirmation {
    background-color: var(--ost-confirmation-body-bg-color);
    border-color: var(--ost-confirmation-body-border-color);
}

.popover.confirmation .popover-header {
    background-color: var(--ost-confirmation-header-bg-color);
    border-bottom-color: var(--ost-confirmation-header-border-color);
}

.popover.confirmation .popover-body,
.popover.confirmation .popover-body p {
    color: var(--ost-confirmation-body-text-color);
}

/***
 * Readonly forms
 ***/
.ost-readonly-form label { font-weight: bolder; }

/***
 * Payment panel
 ***/
.ost-payment-panel {
    border: dashed 1px var(--ost-payment-panel-border-color);
    background-color: var(--ost-payment-panel-bg-color);
    padding: 0.5rem;
}
.ost-payment-panel .ost-paypal-spiel {
    font-size: smaller;
}
.ost-payment-panel .ost-bank-spiel {
    color: var(--ost-payment-panel-bank-text-color);
}
@media screen and (max-width: 500px) {
    .ost-payment-panel-grid { font-size: 0.8rem; }
}

/***
 * Inbox & Inbox Messages
 ***/
table#ost-inbox thead th {
    color: var(--ost-inbox-heading-text-color);
    background-color: var(--ost-inbox-heading-bg-color);
    border-color: var(--ost-inbox-heading-border-color);
}
table#ost-inbox .unread {
    background-color: var(--ost-inbox-unread-bg-color);
    color: var(--ost-inbox-unread-text-color);
    font-weight: bold;
}
table#ost-inbox .unread a {
    color: var(--ost-inbox-unread-link-color);
}
table#ost-inbox .read a {
    color: var(--ost-inbox-read-link-color);
}
table#ost-inbox .ost-inbox-col-selector {
    width: 30px;
}
table#ost-inbox .ost-inbox-col-date {
    width: 150px;
}

/* Allow font settings applied inline in third-party HTML templates take effect for message content */
div#ost-view-message-container p,
div#ost-view-message-container td,
div#ost-view-message-container div,
div#ost-view-message-container li {
    color: inherit;
}


/***
 * Special Tips Entry (some shared with Fixtures)
 ***/
.ost-tip-selection {
    display: inline-flex;
    padding: 0;
    background-color: var(--ost-tip-selection-team-bg-color);
    color: var(--ost-tip-selection-team-text-color);
    border: solid 3px var(--ost-body-bg-color);
    text-transform: uppercase;
    font-weight: 700;
}
.ost-tip-selection input {
    margin: 0;
    padding: 0;
/*
    -webkit-appearance:none;
            appearance:none;
*/
    -moz-appearance:none;
    width: 0;

}
.ost-tip-selection .ost-selection-indicator {
    min-width: 50px;
    height: 50px;
    background-color: var(--ost-tip-selection-readonly-bg-color);
    margin: 0;
}
.ost-tip-selection .ost-selected {
    display: none;
    background-color: var(--ost-tip-selection-tick-bg-color);
    padding: 1px 0;
    text-align: center;
    color: var(--ost-tip-selection-tick-color);
}
.ost-tip-selection .ost-unselected {
    background-color: var(--ost-tip-selection-unselected-bg-color);
    border: dashed 2px var(--ost-tip-selection-unselected-border-color);
}
.ost-tip-selection input:checked ~ label {
/* Transitions not consistent cross-browser
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
*/
}
.ost-tip-selection input:checked ~ label.ost-selected {
    display: inline-grid;
    display: -ms-inline-grid;
}
.ost-tip-selection input:checked ~ label.ost-unselected {
    display: none;
}
.ost-tip-selection label {
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
/* Transitions not consistent cross-browser
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(0.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(0.7);
            filter: brightness(1.8) grayscale(1) opacity(0.7);
*/
}
.ost-tip-selection label.ost-selection-label,
.ost-tip-selection label.ost-vs-label,
.ost-tip-selection div.ost-selection-result {
    margin-top:     0.45rem;
    margin-bottom:  0.25rem;
    font-family:    var(--ost-tip-selection-font);
    font-size:      var(--ost-tip-selection-font-size);
}

/* Transitions not consistent cross-browser
.ost-tip-selection label.ost-selection-label:hover {
    -webkit-filter: brightness(1.2) grayscale(0.5) opacity(0.9);
       -moz-filter: brightness(1.2) grayscale(0.5) opacity(0.9);
            filter: brightness(1.2) grayscale(0.5) opacity(0.9);
}
*/

/***
 * Fixtures & Tips
 ***/
.fourDigitNumeric {
    width: 60px;
    text-align: right;
}

.sixDigitNumeric {
    width: 80px;
    text-align: right;
}

/* Fixtures & Tips - bootstrap-specific */
div#ost-fixtures .ost-fixture-item {
    margin: 0.5rem 0;
}

div#ost-fixtures .ost-tip-selection {
    border: 0px;
}

div#ost-fixtures .ost-selection-label,
div#ost-fixtures .ost-vs-label {
    width: 85%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

div#ost-fixtures .ost-vs-label {
    font-size: 14px;
    min-width: 30px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0.2rem;
    padding-bottom: 0;
}

div#ost-fixtures .ost-selection-label.vs-separator {
    width: 50px;
}
div#ost-fixtures.ost-teamicons-shown .ost-selection-label.vs-separator {
    width: 94px;
}

div#ost-fixtures .ost-secondary-selections div,
div#ost-fixtures .ost-secondary-selections label,
div#ost-fixtures .ost-fixture-form,
div#ost-fixtures .ost-roundwide-tips,
div#ost-fixtures .ost-roundwide-tips label,
div.ost-deadline,
div.ost-submission-time,
div.ost-submit-alert,
div#ost-fixtures-submit-messages li {
    font-family: var(--ost-tip-selection-secondary-font);
    font-weight: var(--ost-tip-selection-secondary-font-weight);
    font-size: var(--ost-tip-selection-secondary-font-size);
    color: var(--ost-tip-selection-secondary-font-color);
    text-transform: none;
}

div#ost-fixtures .ost-secondary-selections,
div#ost-fixtures .ost-roundwide-tips,
div.ost-deadline,
div.ost-submission-time {
    border: solid 1px var(--ost-tip-selection-secondary-border-color);
    background-color: var(--ost-tip-selection-secondary-bg-color);
    padding: 0.1rem 0.75rem;
    border-radius: 10px;
    display: inline-flex;
}

div.ost-deadline span.ost-deadline-time {
    font-weight: 700;
    margin-left: 0.25rem;
}

div.ost-deadline.ost-deadline-urgent {
    background-color: var(--ost-danger-color);
    color: var(--ost-danger-font-color);
}

div.ost-submission-time {
    border: solid 1px var(--ost-tip-submit-time-border-color);
    background-color: var(--ost-tip-submit-time-bg-color);
}

div#ost-fixtures .ost-secondary-selections .ost-tip-selection .ost-selected {
    color: var(--ost-tip-selection-secondary-selection-text-color);
}

div#ost-fixtures .ost-secondary-selections.top {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: relative;
    top: 1px;
}

div#ost-fixtures .ost-secondary-selections.bottom {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    position: relative;
    top: -1px;
    padding-top: 0;
    padding-bottom: 0;
}

div#ost-fixtures .ost-secondary-selections .ost-tip-selection {
    background-color: var(--ost-tip-selection-secondary-selection-bg-color);
}

div#ost-fixtures .ost-secondary-selections .ost-selection-indicator {
    min-width: 25px;
    height: 25px;
    font-size: 1.4rem;
}

div#ost-fixtures .ost-secondary-selections .ost-secondary-label,
div#ost-fixtures .ost-secondary-selections .ost-secondary-label i,
div#ost-fixtures .ost-secondary-selections div.ost-ineligibility-label,
div#ost-fixtures div.ost-survivor-system-allocated,
div#ost-fixtures div.ost-too-many-selections-label {
    margin-left: 0.25rem;
    margin-top: 0.25rem;
    margin-bottom: 0;
}

div#ost-fixtures .ost-secondary-selections .ost-secondary-menu {
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    padding-right: 1rem;
}

div#ost-fixtures .ost-secondary-selections .ost-margin-tip-item {
    margin-left: 25px;
}

body:not(.ost-201907) #marginprompt {
    font-weight: bold;
}

@media screen and (max-width: 400px) {
    div#ost-fixtures div.ost-survivor-label {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        max-width: 180px;
    }
}

/* Secondary tip ineligibility labels are hidden by default */
div#ost-fixtures div.ost-ineligibility-label, 
div#ost-fixtures div.ost-survivor-system-allocated,
div#ost-fixtures div.ost-too-many-selections-label {
    color: var(--ost-tip-selection-secondary-label-color);
    display: none;
}

div#ost-fixtures .ost-survivor-ineligible .ost-selection-indicator {
    visibility: hidden;
}

/* Hide secondary tip control when an ineligibility scenario is applied */
div#ost-fixtures .ost-survivor-ineligible .ost-secondary-label,
div#ost-fixtures div.ost-survivor.ost-is-system-allocated,
div#ost-fixtures .ost-confidence-ineligible .ost-secondary-label,
div#ost-fixtures.ost-too-many-selections div.ost-confidence-block .ost-secondary-label {
    display: none;
}

/* Show secondary tip ineligibility labels when ineligibility scenarios are in force */
div#ost-fixtures .ost-survivor-ineligible div.ost-ineligibility-label,
div#ost-fixtures div.ost-survivor-system-allocated.ost-is-system-allocated,
div#ost-fixtures .ost-confidence-ineligible div.ost-ineligibility-label,
div#ost-fixtures.ost-too-many-selections div.ost-confidence-block div.ost-too-many-selections-label {
    display: inline-flex;
}

/* Confidence ineligibility and too many selections need to be mutually exclusive, show only one if both eligible */
div#ost-fixtures.ost-too-many-selections div.ost-confidence-block div.ost-ineligibility-label {
    display: none;
}

div#ost-fixtures .ost-survivor-ineligible div.ost-ineligibility-label i.ost-more-info {
    padding-left: 0.2rem;
    padding-top: 0.2rem;
}

div#ost-fixtures .ost-fixture-item.compulsory-fixture .ost-main-selection .ost-tip-selection {
    background-color: var(--ost-tip-selection-compulsory-bg-color);
    color: var(--ost-tip-selection-compulsory-text-color);
}

div#ost-fixtures a.ost-fixture-form-action {
    text-decoration: none;
}

div#ost-fixtures .ost-fixture-form {
    background-color: var(--ost-tip-selection-secondary-bg-color);
    border: solid 1px var(--ost-tip-selection-secondary-border-color);
    border-top: 0;
    border-bottom-right-radius: 10px;
}

div#ost-fixtures .ost-fixture-form .fg-first {
    text-align: right;
}
div#ost-fixtures .ost-fixture-form .fg-middle {
    width: 135px;
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media screen and (max-width: 767.98px) {
    div#ost-fixtures .ost-fixture-form .fg-middle { width: 50px; }
}
div#ost-fixtures .ost-fixture-form .fg-second {
    text-align: left;
}

div#ost-fixtures .ost-fixture-form .fg-form-item {
    display: flex;
    padding-left: 0px;
    padding-right: 0px;
}

div#ost-fixtures .ost-fixture-form .fg-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: underline;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

@media screen and (max-width: 575.98px) {
    div#ost-fixtures .ost-fixture-form { font-size: 10px; }
    div#ost-fixtures .ost-fixture-form .fg-title { font-size: 12px; }
}

div#ost-fixtures .ost-fixture-form .current-round,
div#ost-fixtures .ost-fixture-form .current-round div {
    background-color: var(--ost-tip-form-current-round-bg-color);
    color: var(--ost-tip-form-current-round-text-color);
}

div#ost-fixtures .ost-fixture-form .win,
div#ost-fixtures .ost-fixture-form .current-round div.win {
    background-color: var(--ost-tip-form-win-bg-color);
    color: var(--ost-tip-form-win-text-color);
}

div#ost-fixtures .ost-fixture-form .loss,
div#ost-fixtures .ost-fixture-form .current-round div.loss {
    background-color: var(--ost-tip-form-loss-bg-color);
    color: var(--ost-tip-form-loss-text-color);
}

div#ost-fixtures .ost-fixture-form .draw,
div#ost-fixtures .ost-fixture-form .current-round div.draw {
    background-color: var(--ost-tip-form-draw-bg-color);
    color: var(--ost-tip-form-draw-text-color);
}

div#ost-fixtures div.ost-roundwide-tips {
    display: none;
}

div#ost-fixtures div.ost-roundwide-tips:has(*) {
    display: flex;
}

div#ost-fixtures .ost-roundwide-tips.ost-roundwide-scoring {
    width: 300px;
    text-align: right;
}

div#ost-fixtures .ost-roundwide-tips > div {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}

div#ost-fixtures .ost-roundwide-tips label {
    white-space: nowrap;
    margin-bottom: 0;
}

div#ost-fixtures .ost-roundwide-tips div.long-label {
    min-width: 230px;
}

div#ost-fixtures .ost-roundwide-tips div.ost-roundwide-result {
    padding-left: 0px;
}

#ost-fixtures div.match-not-tippable label.ost-selection-indicator.ost-unselected {
    background-color: var(--ost-tip-selection-not-tippable-bg-color);
    border: 0;
}

div#ost-fixtures-submit-messages {
    max-width: fit-content;
    border-radius: 10px;
    background-color: var(--ost-tip-messages-bg-color);
}

div#ost-fixtures-submit-messages ul.list-group {
    padding-left: 5px;
    padding-right: 5px;
}

div#ost-fixtures-submit-messages li.list-group-item {
    border: 0;
    padding: 0.2rem 0.5rem;
    background-color: inherit;
    font-weight: 700;
}

div#ost-fixtures-submit-messages li.list-group-item.valid {
    color: var(--ost-tip-messages-color-valid);
}

div#ost-fixtures-submit-messages li.list-group-item.invalid {
    color: var(--ost-tip-messages-color-invalid);
}

div.ost-submit-alert {
    color: var(--ost-tip-messages-alert-color);
    font-weight: 700;
}

div.ost-submit-alert i {
    padding-top: 3px;
}

/* Fixtures & Tips - Bootstrap: READONLY specific */
div#ost-fixtures .ost-selection-result {
    font-weight: 700;
    text-align: center;
    color: var(--ost-tip-selection-readonly-text-color);
}

div#ost-fixtures .ost-result-item .ost-main-selection label {
    cursor: default;
}

div#ost-fixtures .ost-secondary-selections.bottom .ost-result-item {
    padding: 0.25rem;
    margin-right: 0.25rem;
}

div#ost-fixtures .ost-secondary-selections.bottom .ost-result-item.ost-wildcard-display,
div#ost-fixtures .ost-secondary-selections.bottom div.ost-wildcard-entry label.ost-selected {
    background-color: var(--ost-tip-selection-wildcard-bg-color);
    color: var(--ost-tip-selection-wildcard-color);
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

div#ost-fixtures .ost-secondary-selections.bottom div.ost-wildcard-entry label.ost-selected {
    font-size: 12px;
    padding: 0.4rem;
}

div#ost-fixtures .ost-fixture-item.ost-result-item .ost-main-selection div.tip-success,
div#ost-fixtures div.ost-secondary-selections div.tip-success {
    background-color: var(--ost-tip-selection-success-bg-color);
    color: var(--ost-tip-selection-success-text-color);
}

div#ost-fixtures .ost-fixture-item.ost-result-item .ost-main-selection div.tip-fail,
div#ost-fixtures div.ost-secondary-selections div.tip-fail {
    background-color: var(--ost-tip-selection-fail-bg-color);
    color: var(--ost-tip-selection-fail-text-color);
}

div#ost-fixtures .ost-fixture-item.ost-result-item .ost-main-selection div.tip-push,
div#ost-fixtures div.ost-secondary-selections div.tip-push {
    color: var(--ost-tip-selection-push-text-color);
    background: var(--ost-tip-selection-fail-bg-color); /* Show as a fail in browsers not supporting gradient */
    background: var(--ost-tip-selection-push-bg);
}

div#ost-fixtures .ost-fixture-item.ost-result-item .ost-main-selection.match-postponed div.ost-tip-selection,
div#ost-fixtures div.ost-secondary-selections div.match-postponed,
div#ost-fixtures .ost-fixture-form .postponed,
div#ost-fixtures div.ost-fixture-item.match-not-tippable div.ost-tip-selection,
div#ost-fixtures div.ost-fixture-item.ost-not-handicapped div.ost-main-selection div.ost-tip-selection,
div#ost-fixtures div.match-postponed div.ost-tip-selection div.ost-selected {
    background-color: var(--ost-tip-selection-not-tippable-bg-color);
    color: var(--ost-tip-selection-not-tippable-color);
}

div#ost-fixtures div.ost-fixture-item.match-not-tippable div.ost-secondary-menu {
    color: var(--ost-tip-selection-not-tippable-color);
}

div#ost-fixtures div.match-postponed div.ost-selection-indicator {
    padding-top: 0.5rem;
}

div#ost-fixtures input.ost-margin-cell {
    background-color: var(--ost-tip-selection-margin-input-bg-color);
}

div#ost-fixtures div.ost-not-handicapped div.ost-date::after {
    content: " - Handicap to be allocated";
}

div#ost-fixtures span.ost-handicap-label,
div#ost-fixtures span.ost-confidence-label {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Legacy styles whilst transitioning to mobile-friendly UX */
div#ost-fixtures th { text-align: center; }
div#ost-fixtures .centered-text-block    { margin: auto; text-align: center; } /* set width of block as an inline style */
div#ost-fixtures .content                { font-size: 13px; padding: 5px; }
div#ost-fixtures .contentcenter          { text-align: center; }
div#ost-fixtures .form                   { font-size: 9px; padding: 2px; }
div#ost-fixtures .formrecent             { color: blue }
div#ost-fixtures .paddedcontent          { font-size: 13px; padding: 10px; padding-top: 5px; padding-bottom: 5px }
div#ost-fixtures .paddedcontent.numeric  { text-align: right; }
div#ost-fixtures .paddedsides            { font-size: 13px; padding-left: 4px; padding-right: 4px }
div#ost-fixtures .roundheader            { font-family: 'Oxygen'; color: #cf0000; font-size: 16px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; padding-top: 2px }
div#ost-fixtures .score                  { color: #7f0000; font-style: italic }
div#ost-fixtures .serious                { font-size: 18px; }
div#ost-fixtures .survivor               { color: #660000; font-weight: bolder; font-size: 14px; }
div#ost-fixtures .supportingtext         { font-size: 12px }
div#ost-fixtures .tblabel                { font-size: 12px }
div#ost-fixtures .tbscore                { color: #7f0000; font-size: 12px; font-style: italic }
div#ost-fixtures .trump                  { font-size: 13px; border: dashed 1px #007f00 }
div#ost-fixtures .trumpremaining         { font-size: 13px; border: dashed 1px #7f0000 }
div#ost-fixtures .trumpused              { font-size: 14px; color: #cf0000 }

div#ost-fixtures .actionable a:link,
div#ost-fixtures .actionable a:visited {
    text-decoration: none;
    color: black;
}

div#ost-fixtures .actionable a:hover,
div#ost-fixtures .actionable a:active {
    text-decoration: underline;
}

div#ost-fixtures .actionable:hover {
    background-color: rgba(0, 127, 0, 0.12);
}

div#ost-fixtures .actionable:active {
    background-color: rgba(255, 87, 34, 0.19);
}
div#ost-fixtures .twoDigitNumeric {
    width: 45px;
    text-align: right;
}

div#ost-fixtures span.select2-container {
    max-width: 600px;
}

div#ost-fixtures .survNoTip {
    display: none;
}

/***
 * Fixtures - hybrid readwrite/readonly mode
 ***/
div#ost-fixtures div.ost-fixture-item.ost-result-item.ost-not-commenced {
    display: none;
}

div#ost-fixtures div.ost-tip-is-changeable.ost-urgent-low div.ost-secondary-selections.top {
    background-color: var(--ost-tip-countdown-urgency-low-bg-color);
}

div#ost-fixtures div.ost-tip-is-changeable.ost-urgent-low div.ost-secondary-selections.top div {
    color: var(--ost-tip-countdown-urgency-low-text-color);
}

div#ost-fixtures div.ost-tip-is-changeable.ost-urgent-medium div.ost-secondary-selections.top {
    background-color: var(--ost-tip-countdown-urgency-medium-bg-color);
}

div#ost-fixtures div.ost-tip-is-changeable.ost-urgent-medium div.ost-secondary-selections.top div {
    color: var(--ost-tip-countdown-urgency-medium-text-color);
}

div#ost-fixtures div.ost-tip-is-changeable.ost-urgent-high div.ost-secondary-selections.top {
    background-color: var(--ost-tip-countdown-urgency-high-bg-color);
}

div#ost-fixtures div.ost-tip-is-changeable.ost-urgent-high div.ost-secondary-selections.top div {
    color: var(--ost-tip-countdown-urgency-high-text-color);
    font-weight: bold;
}
div#ost-fixtures span.ost-confidence-unit {
    font-size: 0.6em;
    padding-left: 0.2em;
}
div#ost-fixtures span.ost-confidence-unit::after {
    content: "CP";
}
div#ost-fixtures select.ost-confidence-select option:disabled {
    color: var(--ost-tip-selection-not-tippable-color);
    background-color: var(--ost-tip-selection-not-tippable-bg-color);
}
div#ost-fixtures select.ost-confidence-select option:checked,
div#ost-fixtures select.ost-confidence-select:has(option.ost-select-placeholder:checked),
div#ost-fixtures input[type=number][required]:invalid {
    color: var(--ost-attention-highlight-text-color);
    background-color: var(--ost-attention-highlight-bg-color);
}
div#ost-fixtures select.ost-confidence-select option:not(:checked):not(:disabled) {
    color: var(--ost-tip-selection-secondary-font-color);
    background-color: var(--ost-tip-selection-secondary-bg-color);
}

/***
 * Standings
 ***/
.ost-standings {
    max-width: 898px;
}

/* Secondary content */
.outofcontention {
    color: #999999;
    text-decoration: line-through;
}
img.outofcontention {
    opacity: 0.4;
    filter: alpha(opacity=40) grayscale(70%);
    -webkit-filter: grayscale(70%);
    -moz-filter: grayscale(70%);
    -ms-filter: grayscale(70%);
}
.ost-standings .ost-secondary {
    font-size: 10px;
}
.ost-standings.ost-details-hidden .ost-secondary {
    display: none!important;
}
.ost-standings .ost-secondary div {
    padding-left: 3px;
    text-align: right;
    color: var(--ost-standings-secondary-text-color);
}
.ost-standings .ost-focus-user .ost-secondary div {
    color: var(--ost-standings-secondary-text-color-focus-user);
}
.ost-standings .ost-tw-tip span {
    white-space: nowrap;
}
.ost-standings .ost-secondary div:not(:last-child)::after {
    content: "; "
}

/* Standings - Card-level action */
.ost-standings .card,
div#ost-standings-heading {
    padding: 0.5rem;
}
div#ost-standings-heading {
    font-size: 13px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    visibility: hidden; /* Programmatically shown after calculating right margin */
}
.ost-standings .card {
    cursor: pointer;
    break-inside: avoid;
    margin-bottom: 0.25rem;
}
.ost-standings .card [data-toggle] {
    cursor: default;
}
.ost-standings .ost-focus-user {
    background-color: var(--ost-attention-highlight-bg-color);
}
.ost-standings .ost-focus-user div {
    color: var(--ost-attention-highlight-text-color);
}

/* Standings - Trend highlighting */
.ost-trend {
    color: hsl(var(--ost-standings-trend-color-level-h),
               var(--ost-standings-trend-color-level-s),
               var(--ost-standings-trend-color-level-l));
}
.ost-focus-user .ost-trend {
    color: hsl(var(--ost-standings-trend-color-level-h),
               var(--ost-standings-trend-color-level-s),
               calc(var(--ost-standings-trend-color-level-l) + var(--ost-standings-trend-color-level-l-adj)));
}
.ost-trend.notrend {
    visibility: hidden;
}
.ost-trend.down {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    color: var(--ost-standings-trend-color-down);
}
.ost-trend.up {
    -webkit-transform: rotate(315deg);
            transform: rotate(315deg);
    color: var(--ost-standings-trend-color-up);
}

/* Standings - Prize indicators */
.ost-noprize {
    visibility: hidden;
}
.ost-surv {
    color: hsl(var(--ost-survivor-color-eliminated-h),
               var(--ost-survivor-color-eliminated-s),
               var(--ost-survivor-color-eliminated-l));
}
.ost-focus-user .ost-surv {
    color: hsl(var(--ost-survivor-color-eliminated-h),
               var(--ost-survivor-color-eliminated-s),
               calc(var(--ost-survivor-color-eliminated-l) + var(--ost-survivor-color-eliminated-l-adj)));
}
.ost-surv.elim {
    color: var(--ost-survivor-color-fail);
}
.ost-surv.survived {
    color: var(--ost-survivor-color-success);
}
.ost-trump {
    color: hsl(var(--ost-standings-feature-color-used-h),
               var(--ost-standings-feature-color-used-s),
               var(--ost-standings-feature-color-used-l));
}
.ost-focus-user .ost-trump {
    color: hsl(var(--ost-standings-feature-color-used-h),
               var(--ost-standings-feature-color-used-s),
               calc(var(--ost-standings-feature-color-used-l) + var(--ost-standings-feature-color-used-l-adj)));
}
.ost-trump.played {
    color: var(--ost-standings-feature-color-active);
}
.ost-trump.avail {
    color: var(--ost-standings-feature-color-unused);
}

/* Standings - Small screen font size reductions */
@media screen and (max-width: 575px) {
    .ost-standings div {
        font-size: 14px;
    }
    .ost-standings .ost-secondary div {
        font-size: 9px;
    }
    div#ost-standings-heading div {
        font-size: 11px;
    }
}

/* Standings - Animation of tournament winner bonus points */
.ost-fadeout-fadein {
    -webkit-animation: fadeout-fadein 10s linear infinite both;
            animation: fadeout-fadein 10s linear infinite both;
}
.ost-fadein-fadeout {
    position: absolute;
         top: 0px;
    -webkit-animation: fadein-fadeout 10s linear infinite both;
            animation: fadein-fadeout 10s linear infinite both;
}

@-webkit-keyframes fadeout-fadein {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadein-fadeout {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeout-fadein {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadein-fadeout {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* Standings - show/hide details styling */
.ost-toggle-active {
    display: none;
}
button#ost-standings-details-toggle.active .ost-toggle-inactive {
    display: none;
}
button#ost-standings-details-toggle.active .ost-toggle-active {
    display: inherit;
}

/* Standings - withdrawn player handling */
div#ost-standings-player-list .ost-is-withdrawn {
    background-color: var(--ost-standings-withdrawn-bg-color);
    cursor: default;
}
div#ost-standings-player-list .ost-is-withdrawn div,
table#ost-round-results tbody tr.ost-is-withdrawn td {
    color: var(--ost-standings-withdrawn-text-color);
}
div#ost-standings-player-list .ost-is-withdrawn div.ost-player-name,
table#ost-round-results tbody tr.ost-is-withdrawn td.ost-player-name {
    font-style: italic;
}
div#ost-standings-player-list .ost-is-withdrawn div.ost-player-chips,
div#ost-standings-player-list .ost-is-withdrawn .ost-trend {
    visibility: hidden;
}

/**************************
 * Scrolling
 **************************/

/* Vertically scrollable DIVs to make list data scrollable on screens but fully displayable on printers */
@media screen {
    div.ost-vert-scroll {
        overflow-y: scroll;
        height: 60vh;
    }
}


/**********************
 * Messages & Notifications
 **********************/
div.ost-notification-container {
    position: fixed;
    top: 100px;
    right: 10%;
    z-index: 900;
}

div.ost-notification-container div.ost-toast-success div.toast-header,
div.ost-notification-container div.ost-toast-success .ost-toast-close-icon {
    background-color: hsl(var(--ost-notification-success-color-h), 
                          var(--ost-notification-success-color-s), 
                          var(--ost-notification-success-color-l));
    color: var(--ost-notification-success-header-text-color);
}

div.ost-notification-container div.ost-toast-error div.toast-header,
div.ost-notification-container div.ost-toast-error .ost-toast-close-icon {
    background-color: hsl(var(--ost-notification-error-color-h), 
                          var(--ost-notification-error-color-s), 
                          var(--ost-notification-error-color-l));
    color: var(--ost-notification-error-header-text-color);
}

div.ost-notification-container div.ost-toast-success .ost-toast-title::after {
    content: "Success";
}

div.ost-notification-container div.ost-toast-success div.toast-body {
    background-color: hsl(var(--ost-notification-success-color-h), 
                          var(--ost-notification-success-color-s), 
                          calc(var(--ost-notification-success-color-l) +
                               var(--ost-notification-success-color-l-bodyadj)));
    color: var(--ost-notification-success-body-text-color);
}

div.ost-notification-container div.ost-toast-error div.toast-body {
    background-color: hsl(var(--ost-notification-error-color-h), 
                          var(--ost-notification-error-color-s), 
                          calc(var(--ost-notification-error-color-l) +
                               var(--ost-notification-error-color-l-bodyadj)));
    color: var(--ost-notification-error-body-text-color);
}

div.ost-notification-container div.fade {
    transition-duration: 0.5s;
}

/**********************
 * Standalone form guide
 **********************/
table#ost-fg-general-table th,
table#ost-fg-general-table td,
table#ost-fg-history-table th,
table#ost-fg-history-table td {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-align: center;
    min-width: 25px;
}

table#ost-fg-general-table tr.ost-fg-overall {
    border-top: 2px solid var(--ost-table-row-separator-primary-color);
}

table#ost-fg-history-table tr.ost-fg-result-w td.ost-fg-result,
table#ost-fg-history-table tr.ost-fg-result-w td.ost-fg-score,
table#ost-fg-history-table tr.ost-fg-result-w td.ost-fg-sep {
    background-color: var(--ost-tip-form-win-bg-color);
    color: var(--ost-tip-form-win-text-color);
}

table#ost-fg-history-table tr.ost-fg-result-l td.ost-fg-result,
table#ost-fg-history-table tr.ost-fg-result-l td.ost-fg-score,
table#ost-fg-history-table tr.ost-fg-result-l td.ost-fg-sep {
    background-color: var(--ost-tip-form-loss-bg-color);
    color: var(--ost-tip-form-loss-text-color);
}

table#ost-fg-history-table tr.ost-fg-result-d td.ost-fg-result,
table#ost-fg-history-table tr.ost-fg-result-d td.ost-fg-score,
table#ost-fg-history-table tr.ost-fg-result-d td.ost-fg-sep {
    background-color: var(--ost-tip-form-draw-bg-color);
    color: var(--ost-tip-form-draw-text-color);
}

table#ost-fg-history-table td {
    vertical-align: middle;
}

table#ost-fg-history-table td.ost-fg-team-icon {
    text-align: right;
}

table#ost-fg-history-table td.ost-fg-team {
    text-align: left;
}
table#ost-fg-history-table td.ost-fg-result {
    text-transform: uppercase;
}

table#ost-fg-history-table td.ost-fg-sep {
    min-width: 0;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    text-align: center;
}

table#ost-fg-history-table td.ost-fg-score {
    padding-left: 0;
    padding-right: 0;
    min-width: 0;
}

table#ost-fg-history-table td.ost-fg-score.ost-fg-first {
    text-align: right;
}

table#ost-fg-history-table td.ost-fg-score.ost-fg-second {
    text-align: left;
    padding-right: 0.5rem;
}

table#ost-fg-history-table td.ost-fg-sep::after {
    content: "-";
}

table#ost-fg-history-table td.ost-fg-score:last-child {
    padding-right: 0.5rem;
}

/**********************
 * Draw Summary
 **********************/
table#ost-draw-summary td.under-quota {
    background-color: var(--ost-tip-form-win-bg-color);
    color: var(--ost-tip-form-win-text-color);
}

table#ost-draw-summary td.over-quota {
    background-color: var(--ost-tip-form-loss-bg-color);
    color: var(--ost-tip-form-loss-text-color);
}


/**********************
 * My Details (Personal Details)
 **********************/
div#ost-live-sessions {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

div#ost-live-sessions-header button {
    width: 100%;
    text-align: left;
}

span.ost-this-device {
    font-weight: bolder;
}

span#ost-tour-reset-in-progress, span#ost-tour-reset-done {
    margin-left: 0.5em;
    display: none;
}
span#ost-tour-reset-in-progress {
    color: inherit;
}
span#ost-tour-reset-done {
    color: var(--ost-tip-selection-success-bg-color);
}
button#ost-tour-reset-action.ost-status-in-progress span#ost-tour-reset-in-progress,
button#ost-tour-reset-action.ost-status-done span#ost-tour-reset-done {
    display: inline;
}

/**********************
 * Printable templated mailouts
 **********************/
@media print {
  .mj-column-per-100 { width:100% !important; max-width: 100%; }
  .mj-column-per-25 { width:25% !important; max-width: 25%; }
  .mj-column-per-50 { width:50% !important; max-width: 50%; }
  div.ost-print-page:not(.ost-count-0) { page-break-before: always; }
}

/**********************
 * Usability tours
 **********************/

/* Not qualified with div#ost-tour-container
 *  as 'temp' variants can be used as siblings to the focused element
 */
div.tour-highlight {
    border-radius: 0.5em;
}

div#ost-tour-container div.tour-backdrop {
    position: fixed;
}
div#ost-tour-container .popover {
    background-color: var(--ost-tour-body-bg-color);
}

div#ost-tour-container .bs-popover-auto[x-placement^=top]>.arrow::after,
div#ost-tour-container .bs-popover-top>.arrow::after {
    border-top-color: var(--ost-tour-body-bg-color);
}
div#ost-tour-container .bs-popover-auto[x-placement^=bottom]>.arrow::after,
div#ost-tour-container .bs-popover-bottom>.arrow::after {
    border-bottom-color: var(--ost-tour-header-bg-color);
}
div#ost-tour-container .bs-popover-auto[x-placement^=left]>.arrow::after,
div#ost-tour-container .bs-popover-left>.arrow::after {
    border-left-color: var(--ost-tour-body-bg-color);
}
div#ost-tour-container .bs-popover-auto[x-placement^=right]>.arrow::after,
div#ost-tour-container .bs-popover-right>.arrow::after {
    border-right-color: var(--ost-tour-body-bg-color);
}

div#ost-tour-container .bs-popover-auto[x-placement^=top] .popover-header::before,
div#ost-tour-container .bs-popover-top .popover-header::before {
    border-top: unset;
}
div#ost-tour-container .bs-popover-auto[x-placement^=bottom] .popover-header::before,
div#ost-tour-container .bs-popover-bottom .popover-header::before {
    border-bottom: unset;
}
div#ost-tour-container .bs-popover-auto[x-placement^=left] .popover-header::before,
div#ost-tour-container .bs-popover-left .popover-header::before {
    border-left: unset;
}
div#ost-tour-container .bs-popover-auto[x-placement^=right] .popover-header::before,
div#ost-tour-container .bs-popover-right .popover-header::before {
    border-right: unset;
}

div#ost-tour-container .popover-header {
    font-family: var(--ost-tour-header-text-font);
    font-weight: 400;
    font-size: var(--ost-tour-header-text-size);
    line-height: 0.8;
    padding-bottom: var(--ost-tour-header-padding-bottom);
    background-color: var(--ost-tour-header-bg-color);
    color: var(--ost-tour-header-text-color);
    border-bottom-color: var(--ost-tour-header-border-color);
}

div#ost-tour-container .popover-header span.ost-tour-progress {
    float: right;
    font-size: var(--ost-tour-header-progress-text-size);
    margin-top: 0.2em;
}

div#ost-tour-container .popover-body {
    font-family: var(--ost-tour-body-text-font);
    font-weight: 400;
    font-size: var(--ost-tour-body-text-size);
    line-height: 0.8;
    color: var(--ost-tour-body-text-color);
}

div#ost-tour-container div.popover-navigation {
    padding-top: 0;
    padding-bottom: 0;
}
div#ost-tour-container div.popover-navigation button {
    background-color: var(--ost-tour-nav-button-bg-color);
    font-family: var(--ost-tour-body-text-font);
    color: var(--ost-tour-body-text-color);
    font-size: var(--ost-tour-body-text-size);
    font-weight: 700;
    border: 0;
    border-radius: 0.5rem;
    padding-top: 0.1rem;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
}
div#ost-tour-container div.popover-navigation button.disabled {
    display: none;
}
div#ost-tour-container div.popover-navigation button:hover {
    background-color: var(--ost-tour-nav-button-hover-bg-color);
}

/* When Tour-highlighting elements with light coloured text, (mostly) invert the text color */
div#ost-fixtures .ost-secondary-selections div.tour-highlight-element div.ost-ineligibility-label,
div#ost-fixtures .ost-secondary-selections div.ost-ineligibility-label.tour-highlight-element,
div#ost-fixtures .ost-secondary-selections div.tour-highlight-element.ost-survivor-system-allocated,
span.ost-confidence-label.tour-highlight-element,
label.ost-selection-label.tour-highlight-element {
    color: var(--ost-tour-contrast-color);
}


/********************************
 * Browser compatibility helpers
 ********************************/
div#ost-browsercheck-has {
    width: 0;
    height: 0;
    display: none;
}

div#ost-browsercheck-has:has(span) {
    display: block;
}


/**********************
 * General reusability
 **********************/
.form-control.twoDigitNumeric { width: 65px; text-align: right; }
.form-control.fourDigitNumeric { width: 90px; text-align: right; }

/* More visually distinguish inactive items in a button group using toggling */
.ost-button-group-toggle .btn:not(.active) {
    opacity: 0.2;
}

/* Generic placeholder styling */
.form-control.ost-placeholder-light::placeholder {
  color: var(--ost-placeholder-text-color);
}
/* Chrome/Opera/Safari */
.form-control.ost-placeholder-light::-webkit-input-placeholder {
  color: var(--ost-placeholder-text-color);
}
/* Firefox 19+ */
.form-control.ost-placeholder-light::-moz-placeholder {
  color: var(--ost-placeholder-text-color);
}
/* IE 10+ */
.form-control.ost-placeholder-light:-ms-input-placeholder {
  color: var(--ost-placeholder-text-color);
}
/* Firefox 18- */
.form-control.ost-placeholder-light:-moz-placeholder {
  color: var(--ost-placeholder-text-color);
}

.ost-teamselect-container {
    width: 100%;
}
.ost-teamselect-container span.select2-container {
    text-align: left;
    width: 100%;
}
/* Wide enough to accommodate "November 30 YYYY HH:MM" - the widest day of the year */
input.ost-datetime-control {
    min-width: 220px;
}

/* Date/Time control can be smaller on mobile as field has its own row;
 *   220px interferes with clickability of timezone badge
 */
@media screen and (max-width: 575px) {
    input.ost-datetime-control {
        min-width: inherit;
    }
}

/* When team icons are shown on more than just the form guide detail page */
img.ost-teamicon {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

div#ost-fixtures div.ost-fixture-item:not(.ost-tip-is-changeable) img.ost-teamicon {
    margin-top: 0.4rem;
}

body#ost-formguide-selector img.ost-teamicon {
    margin-top: 0.2rem;
}

div.ost-standings img.ost-teamicon {
    max-height: 24px;
}

/* Formatting of labels associated with disabled controls that appear subsequent and cannot use the CSS '~' convention */
div.ost-inline-label-textfield.ost-disabled label {
    color: var(--ost-disabled-text-color);
}

/* Banner to spotlight a recent Survivor winner */
#ost-survivor-winner-banner {
    text-align: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    background-color: var(--ost-survivor-banner-bg-color);
    color: var(--ost-survivor-banner-text-color);
}

/* General purpose inline UNPAID badges */
span.ost-unpaid-badge {
    position: relative;
    top: -0.2em;
    margin-left: 1em;
    font-size: 0.65em;
}
span.ost-unpaid-badge::after {
    content: 'UNPAID';
}
span.badge.ost-unpaid-badge:empty {
    display: revert;
}