/* ===================================================================
   TSR THEME TOKENS
   Drop this AFTER your bootstrap.min.css include, in your Master Page.
   Goal: every card, button, border, and background pulls from these
   variables instead of one-off hex values scattered across pages.
   Adjust the hex values below to match your real brand colors exactly
   (use browser devtools "eyepicker" on your current site to confirm).
   =================================================================== */

:root {
    /* ---- Base palette (adjust to your exact brand hexes) ---- */
    --tsr-bg: #0c0e12; /* page background #0c0e12 #050505 */
    --tsr-surface-1: #161e26; /* card / panel background (matches the template's tab panels) */
    --tsr-surface-2: #1c1e24; /* raised elements on top of a card, e.g. pills, table rows */
    --tsr-border: rgba(255, 255, 255, 0.08);
    --tsr-border-strong: rgba(255, 255, 255, 0.16);
    --tsr-divider: rgba(255, 255, 255, 0.15); /* row separators inside cards - raise/lower the last number to taste */
    --tsr-text-primary: #f1f1f1;
    --tsr-text-secondary: #b8b8bc;
    --tsr-text-muted: #7a7a80;
    --tsr-red: #e0453c; /* TSR brand red - CTAs, badges, accents */
    --tsr-red-dark: #a32d2d; /* hover/active state for red elements */
    --tsr-blue: #3ba0e8; /* links, secondary accent */
    --tsr-blue-dark: #1d6fa5;
    /* ---- Shape ---- */
    --tsr-radius-sm: 6px; /* buttons, badges, small chips */
    --tsr-radius-md: 8px; /* table rows, list items */
    --tsr-radius-lg: 12px; /* cards, panels, modals */
    /* ---- Spacing (optional, keeps padding consistent) ---- */
    --tsr-space-sm: 8px;
    --tsr-space-md: 16px;
    --tsr-space-lg: 24px;
}

/* ===================================================================
   BOOTSTRAP VARIABLE OVERRIDES
   Bootstrap 5 reads its own components from these --bs- variables,
   so pointing them at your tokens makes .card, .btn, .list-group,
   .table etc. follow your theme automatically, site-wide.
   =================================================================== */

:root {
  --bs-body-bg:        var(--tsr-bg);
  --bs-body-color:      var(--tsr-text-primary);

  --bs-border-color:    var(--tsr-border);
  --bs-border-radius:   var(--tsr-radius-md);
  --bs-border-radius-sm: var(--tsr-radius-sm);
  --bs-border-radius-lg: var(--tsr-radius-lg);

  --bs-primary:         var(--tsr-red);
  --bs-primary-rgb:     224, 69, 60;   /* rgb of --tsr-red, used for translucent fills */
  --bs-link-color:      var(--tsr-blue);
  --bs-link-hover-color: var(--tsr-blue-dark);

  --bs-card-bg:         var(--tsr-surface-1);
  --bs-card-border-color: var(--tsr-border);
  --bs-card-border-radius: var(--tsr-radius-lg);

  --bs-table-bg:        transparent;
  --bs-table-border-color: var(--tsr-border);
}

body {
  background-color: var(--tsr-bg);
  color: var(--tsr-text-primary);
}

/*a { color: var(--tsr-blue); }
a:hover { color: var(--tsr-blue-dark); }*/

/* ===================================================================
   CARDS / PANELS
   Covers the "Races in the series" and "Round details" style boxes.
   =================================================================== */

.card,
.panel,
.tsr-card {
  background-color: var(--tsr-surface-1);
  border: 0.5px solid var(--tsr-border);
  border-radius: var(--tsr-radius-lg);
  padding: var(--tsr-space-md);
}
/* Bootstrap's .bg-dark forces its own grey (#212529) with !important,
   so cards using "card bg-dark" ignored the theme. Pull them back onto the token. */
.card.bg-dark {
  background-color: var(--tsr-surface-1) !important;
}

/* Row separators in cards (e.g. the event detail tabs) - softer than Bootstrap's default */
.card .border-bottom,
.card .border-top {
  border-color: var(--tsr-divider) !important;
}

.round-badge {
    position: absolute;
    top: 2px;
    left: -8px;
  /*  z-index: 10;*/
    background: linear-gradient(90deg, #0d1b3d, #1a5fd0);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    padding: 6px 14px 6px 18px;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0% 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
/* Rows inside a card (e.g. each race in the calendar list) become
   their own rounded chip instead of a full-width divided line. */
.tsr-card .tsr-row {
  background-color: var(--tsr-surface-2);
  border-radius: var(--tsr-radius-md);
  padding: 10px 14px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tsr-card .tsr-row:last-child { margin-bottom: 0; }

/* ===================================================================
   BUTTONS
   =================================================================== */

.btn {
  border-radius: var(--tsr-radius-sm);
  font-weight: 500;
}

.btn-primary,
.btn-tsr-red {
  background-color: var(--tsr-red);
  border-color: var(--tsr-red);
  color: #fff;
}
.btn-primary:hover,
.btn-tsr-red:hover {
  background-color: var(--tsr-red-dark);
  border-color: var(--tsr-red-dark);
}

.btn-outline-primary,
.btn-tsr-outline {
  background-color: transparent;
  border-color: var(--tsr-blue);
  color: var(--tsr-blue);
}
.btn-outline-primary:hover,
.btn-tsr-outline:hover {
  background-color: var(--tsr-blue);
  border-color: var(--tsr-blue);
  color: #fff;
}

/* ===================================================================
   BADGES / TAGS
   e.g. the "LMU" series tag on calendar rows
   =================================================================== */
.mb-25{
    margin-bottom: 25px !important;
}

.badge-tsr-red {
  background-color: rgba(224, 69, 60, 0.35);
  color: #f0999b;
  border-radius: var(--tsr-radius-sm);
  font-size: 14px;
  font-weight: 500;
  padding: 4px 10px;
}

/* ===================================================================
   TABLES / LIST GROUPS
   =================================================================== */

.table-event {
    --bs-table-color: var(--tsr-text-primary);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--tsr-border);
    color: var(--tsr-text-primary);
}

.list-group-item {
  background-color: var(--tsr-surface-2);
  border-color: var(--tsr-border);
  border-radius: var(--tsr-radius-md) !important;
  margin-bottom: 6px;
  color: var(--tsr-text-primary);
}

/* ===================================================================
   MIGRATION NOTES
   -------------------------------------------------------------------
   1. Search your CSS/inline styles for hardcoded hex colors close to
      the ones above (old blues, older reds, off-blacks) and replace
      them with the matching --tsr- variable. This is the main "align
      everything" step - it's mechanical once the variables exist.
   2. For ASP.NET server controls (GridView, Panel, etc.) that render
      their own wrapper divs/tables, add their CssClass to match
      .card / .table / .list-group-item so they inherit this theme
      without extra custom CSS per control.
   3. Once this file is included site-wide via your Master Page, any
      future color/radius change happens in ONE place (the :root
      block at the top) instead of hunting through every page.
   =================================================================== */


.card-body-dark {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: #eeeded;
}

.table-dark {
    --bs-table-bg: #161e26;
    --bs-table-striped-bg: #262a33;
    --bs-table-striped-color: #e1e1e1;
    --bs-table-active-bg: #1c1f25;
    --bs-table-active-color: #e1e1e1;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #e1e1e1;
    color: #e1e1e1;
}

.text-white-75 {
    --bs-text-opacity: 1;
    color: rgba(255, 255, 255, 0.7) !important;
}


.border-car-orange {
    border-left-color: #c77127 !important;
}

.border-car-red {
    border-left-color: #c43d4b !important;
}

.border-car-blue {
    border-left-color: #1639dd !important;
}

.border-car-green {
    border-left-color: #085f0d !important;
}

.border-car-yellow {
    border-left-color: #eefc2e !important;
}

/*.form-control-dark {
    border-radius: 0.1rem;
    outline: initial !important;
    box-shadow: initial !important;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    line-height: 1;
    border: 1px solid #424242;
    border-top-color: rgb(66, 66, 66);
    border-right-color: rgb(66, 66, 66);
    border-bottom-color: rgb(66, 66, 66);
    border-left-color: rgb(66, 66, 66);
    background: #232223;
    color: #8f8f8f;
    border-color: #424242;
    height: calc(2em + 0.8rem);
}*/

.form-control-dark {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #e1e1e1;
    background-color: #262a33;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
    color: #ccc !important;
}

td.dtr-control::before {
    color: #ccc !important;
}




.badge-secondary {
    background-color: #1d477a !important;
    color: #d0d0d0;
}

.badge-warning {
    background-color: #b69329;
}

.badge-success {
    background-color: #3e884f;
}

.badge-info {
    background-color: #1b99ca;
}

.badge-danger {
    background-color: #c43d4b;
}

.badge-indigo {
    background-color: #8c0fe8;
}

.badge-success,
.badge-danger,
.badge-warning,
.badge-indigo,
.badge-info {
    color: #F1F1F1;
}


.badge-large {
    padding: 0.2em 0.25em;
    font-size: 100%;
}

.badge {
    padding: 0.6em 0.65em;
    font-size: 80%;
}

.badge-gold {
    background-color: #b6a308;
    color: #444;
}

.badge-silver {
    background-color: #808080;
    color: #F1F1F1;
}

.badge-bronze {
    background-color: #a98202;
    color: #F1F1F1;
}

.badge-racenum {
    background-color: #1b99ca;
    color: #182029;
    font-size: 90%;
}



.badge-car-orange {
    background-color: #c77127;
}

.badge-car-red {
    background-color: #c43d4b;
}

.badge-car-blue {
    background-color: #1639dd;
}

.badge-car-green {
    background-color: #085f0d;
}

.badge-car-yellow {
    background-color: #eefc2e;
}


.badge.badge-pill {
    padding-right: 1.25em;
    padding-left: 1.25em;
}

.badge.badge-top-left {
    top: 10px;
    left: -7px;
}

.badge.badge-top-left-2 {
    top: 40px;
    left: -7px;
}

.badge.badge-top-right {
    top: 8px;
    right: -7px;
}

.badge.badge-top-right-2 {
    top: 40px;
    right: -7px;
}

.badge-light {
    background-color: #e4e4e4;
    color: #8d8d8d;
}



.badge-dark {
    background-color: #8d8d8d;
    color: #e4e4e4;
}

.badge-outline-primary,
.badge-outline-theme-1 {
    background: unset;
    border: 1px solid #236591;
    color: #236591;
}

.badge-outline-secondary,
.badge-outline-theme-2 {
    background: unset;
    border: 1px solid #1d477a;
    color: #1d477a;
}

.badge-outline-theme-3 {
    background: unset;
    border: 1px solid #637383;
    color: #637383;
}

.badge-outline-success {
    background: unset;
    border: 1px solid #3e884f;
    color: #3e884f;
}

.badge-outline-danger {
    background: unset;
    border: 1px solid #c43d4b;
    color: #c43d4b;
}

.badge-outline-warning {
    background: unset;
    border: 1px solid #b69329;
    color: #b69329;
}

.badge-outline-info {
    background: unset;
    border: 1px solid #3195a5;
    color: #3195a5;
}

.badge-outline-light {
    background: unset;
    border: 1px solid #e4e4e4;
    color: #e4e4e4;
}

.badge-outline-dark {
    background: unset;
    border: 1px solid #8d8d8d;
    color: #8d8d8d;
}



.accordion-dark {
    --bs-accordion-color: #e1e1e1;
    --bs-accordion-bg: #262a33;
    --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    --bs-accordion-border-color: #444;
    --bs-accordion-border-width: var(--bs-border-width);
    --bs-accordion-border-radius: var(--bs-border-radius);
    --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: #175cff;
    --bs-accordion-btn-bg: var(--bs-accordion-bg);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-focus-border-color: #86b7fe;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: #444;
    --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
}





/* livery */
.livery-wrap {
    overflow: hidden;
    padding: 20px 55px 20px 30px;
    display: flex;
    align-items: center;
    border: 1px solid #232a30;
    background: #182029;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    -ms-border-radius: 6px;
    border-radius: 6px;
}

@media (max-width: 1199.98px) {
    .livery-wrap {
        padding: 20px 45px 20px 30px;
    }
}

@media (max-width: 767.98px) {
    .livery-wrap {
        display: block;
        text-align: left;
        padding: 35px 25px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .livery-wrap {
        padding: 30px 30px;
    }
}

.livery-img {
    margin-right: 30px;
    width: 300px;
    flex: 0 0 auto;
}

@media (max-width: 1199.98px) {
    .livery-img {
        margin-right: 30px;
        /* width: 175px;*/
    }
}

@media (max-width: 767.98px) {
    .livery-img {
        margin: 0 auto 25px;
    }
}

.livery-img img {
    -webkit-border-radius: 10%;
    -moz-border-radius: 10%;
    -o-border-radius: 10%;
    -ms-border-radius: 10%;
    border-radius: 10%;
    height: 145px;
    object-fit: cover;
}

@media (max-width: 1199.98px) {
    .livery-img img {
        height: 130px;
    }
}

.livery-info .designation {
    font-size: 14px;
    color: var(--tg-theme-secondary);
    font-weight: var(--tg-fw-medium);
    display: block;
    margin-bottom: 1px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.livery-info .name {
    font-size: 20px;
    margin-bottom: 12px;
}

    .livery-info .name a:hover {
        color: var(--tg-theme-primary);
    }

.livery-info p {
    margin: 0 0 0;
}












.tgmenu__nav {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
}

@media (max-width: 1199.98px) {
    .tgmenu__nav {
        justify-content: space-between;
    }
}

.tgmenu__navbar-wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-grow: 1;
}

    .tgmenu__navbar-wrap ul {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        padding: 0;
        flex-direction: row;
        flex-wrap: wrap;
        /* was "0 auto 0 122px" (65px under 1500px), which pushed the menu to the left -
           equal auto margins centre it in the space between the logo and the menu icon */
        margin: 0 auto;
    }

.tgmenu__navbar-wrap ul li {
    display: block;
    position: relative;
    list-style: none;
}

    .tgmenu__navbar-wrap ul li a {
        font-size: 15px;
        font-weight: var(--tg-fw-bold);
        text-transform: uppercase;
        color: var(--tg-heading-color);
        font-family: var(--tg-heading-font-family);
        padding: 38px 23px;
        display: block;
        line-height: 1;
        position: relative;
        letter-spacing: 0.8px;
        z-index: 1;
    }




.tgmenu__navbar-wrap > ul > li > a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    width: 60%;
    height: 1px;
    top: 60%;
    background: var(--tg-theme-primary);
    -webkit-transform-origin: right top;
    -ms-transform-origin: right top;
    transform-origin: right top;
    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    transform: scale(0, 1);
    transition: transform 0.4s cubic-bezier(0.74, 0.72, 0.27, 0.24);
}

.tgmenu__navbar-wrap > ul > li.active > a, .tgmenu__navbar-wrap > ul > li:hover > a {
    color: var(--tg-theme-primary);
}

    .tgmenu__navbar-wrap > ul > li.active > a::before, .tgmenu__navbar-wrap > ul > li:hover > a::before {
        -webkit-transform-origin: left top;
        -ms-transform-origin: left top;
        transform-origin: left top;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
        transition: transform 0.4s cubic-bezier(0.74, 0.72, 0.27, 0.24);
    }




.blog-wrap {
    overflow: hidden;
    padding: 20px 55px 20px 30px;
    align-items: center;
    border: 1px solid #232a30;
    background: #182029;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    -ms-border-radius: 6px;
    border-radius: 6px;
}

@media (max-width: 767.98px) {
    .blog-wrap {
        padding: 20px 30px 20px 30px;
        margin-left: 0px;
    }
}

.blog-post-header {
    background: #182029;
    padding: 4px 3px 4px 6px;
    -webkit-clip-path: polygon(100% 0, 100% calc(100% - 1px), calc(100% - 1px) 100%, 0 100%, 0 0);
    clip-path: polygon(100% 0, 100% calc(100% - 1px), calc(100% - 1px) 100%, 0 100%, 0 0);
    border: 1px solid #232a30;
}

.blog-post-img-wrap {
    background: #182029;
    padding: 1px 1px 1px 1px;
    -webkit-clip-path: polygon(100% 0, 100% calc(100% - 1px), calc(100% - 1px) 100%, 0 100%, 0 0);
    clip-path: polygon(100% 0, 100% calc(100% - 1px), calc(100% - 1px) 100%, 0 100%, 0 0);
    border: 0px solid #232a30;
}

.blog-post-content {
    background: #182029;
    padding: 10px 3px 10px 6px;
    -webkit-clip-path: polygon(100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0 0);
    clip-path: polygon(100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0 0);
    border: 1px solid #232a30;
}

    .blog-post-content .title {
        font-size: 32px;
        letter-spacing: 1px;
        margin: 0 0 14px;
    }

.vh-65 {
    height: 65vh !important;
}

.min-vh-65 {
    min-height: 65vh !important;
}

.vh-75 {
    height: 75vh !important;
}

.min-vh-75 {
    min-height: 75vh !important;
}





/* Clock */


.tzcontainer {
    font-family: Cambria;
    font-weight: bold;
    width: 900px;
    margin: 5px auto;

    h5 {
        box-sizing: border-box;
        font-size: 18px;
        text-align: center;
        padding: 5px;
        width: 100%;
        border-top: 5px solid #aaa6a6;
        border-bottom: 5px solid #aaa6a6;
    }

    .timeZone {
        width: 100%;
        margin: 5px auto;
        border: 1px solid #aaa6a6;
        /*    tr
{
    border-bottom: 1px solid #aaa6a6;
}*/

        td {
            padding: 5px 5%;
            vertical-align: top;
            width: 33%;
        }

        h3 {
            padding-top: 5px;
            font-size: 18px;
        }

        p {
            font-size: 12px;
            font-style: italic;
            margin-bottom: 2px;
        }

        .time {
            padding-top: 0px;
            margin-top: 0px;
            font-size: 24px;
            text-align: center;
            vertical-align: top;
        }
    }
}

/* end clock */