/* =========================================
   MGP DISPLAY FONT
========================================= */

@font-face{

  font-family:
    "MGPDisplay";

  src:
    url("/assets/fonts/MGPDISPLAY-LIGHT.otf")
    format("opentype");

  font-weight:
    300;

  font-style:
    normal;

  font-display:
    swap;
}

@font-face{

  font-family:
    "MGPDisplay";

  src:
    url("/assets/fonts/MGPDISPLAY-MEDIUM.OTF")
    format("opentype");

  font-weight:
    700 900;

  font-style:
    normal;

  font-display:
    swap;
}

/* =========================================
   RESET
========================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* =========================================
   DESIGN SYSTEM
========================================= */

:root{

  --bg-dark:#081018;

  --primary:#FF3048;
  --primary-dark:#D4001F;

  --secondary:#58D3FF;

  --text:#FFFFFF;
  --text-soft:#AFC7E3;

  --success:#00D084;
  --danger:#FF4B4B;

  --radius-sm:2px;
  --radius-md:0px;
  --radius-lg:0px;

  --shadow:
    0 10px 30px rgba(0,0,0,.35);

  --shadow-heavy:
    0 16px 50px rgba(0,0,0,.45);

  --glass-blur:
    blur(3px);

  --ease:
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  /* =====================================
     MOTION SYSTEM
  ===================================== */

  --motion-ultrafast:
    140ms;

  --motion-fast:
    220ms;

  --motion-normal:
    380ms;

  --motion-slow:
    650ms;

  --motion-cinematic:
    900ms;

  --motion-in:
    var(--motion-normal);

  --motion-out:
    var(--motion-fast);

  --motion-ease:
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  --motion-soft:
    cubic-bezier(
      0.25,
      0.46,
      0.45,
      0.94
    );

  --motion-sharp:
    cubic-bezier(
      0.4,
      0,
      0.2,
      1
    );

  --speed-fast:300ms;
  --speed-normal:500ms;
  --speed-slow:700ms;
}

/* =========================================
   HTML BODY
========================================= */

html,
body{

  width:100vw;
  height:100vh;

  overflow:hidden;

  isolation:isolate;

  background:transparent;

  font-family:
    "MGPDisplay",
    sans-serif !important;
}

body{
  position:relative;
}

/* =========================================
   FORCE GLOBAL FONT
========================================= */

*{

  font-family:
    "MGPDisplay",
    sans-serif !important;
}

/* =========================================
   ROOT
========================================= */

#overlay-root{

  position:fixed;

  inset:0;

  width:100vw;
  height:100vh;

  overflow:hidden;

  pointer-events:none;
}

/* =========================================
   LAYERS
========================================= */

#topbar-layer,
#leaderboard-layer,
#popup-layer,
#track-status-layer,
#lowerthird-layer,
#trackinfo-layer,
#starting-grid-layer,
#final-result-layer,
#weather-layer{

  display:none;
}

#leaderboard-layer{

  position:fixed;

  inset:0;

  z-index:1200;

  pointer-events:none;
}

#topbar-layer{

  position:fixed;

  inset:0;

  z-index:1300;

  pointer-events:none;
}

/* =========================================
   POPUP LAYER
========================================= */

#popup-layer{

  position:fixed;

  inset:0;

  z-index:1400;

  pointer-events:none;
}

/* =========================================
   GLOBAL ATMOSPHERE
========================================= */

#overlay-root::before{

  content:"";

  position:absolute;

  inset:0;

  background:

    radial-gradient(

      circle at top left,

      color-mix(
        in srgb,
        var(--primary) 8%,
        transparent
      ),

      transparent 38%
    ),

    radial-gradient(

      circle at bottom right,

      color-mix(
        in srgb,
        var(--secondary) 6%,
        transparent
      ),

      transparent 40%
    );

  pointer-events:none;
}

/* =========================================
   TOPBAR
========================================= */

.mgp-topbar{

  position:absolute;

  top:130px;
  left:18px;

  width:210px;

  padding:
    10px 14px;

  border-radius:0;

  background:
    linear-gradient(
      180deg,
      rgba(10,12,20,.94),
      rgba(14,22,36,.92)
    );

  border-top:
  2px solid color-mix(
  in srgb,
  var(--secondary) 75%,
  transparent
);

  border-left:
    1px solid rgba(255,255,255,.05);

  border-right:
    1px solid rgba(255,255,255,.05);

  border-bottom:
    1px solid rgba(255,255,255,.05);

  box-shadow:
    0 10px 30px rgba(0,0,0,.35);

  backdrop-filter:none;

  overflow:hidden;
}

.mgp-topbar::before{

  content:"";

  position:absolute;

  inset:0;

  background:
    radial-gradient(
      circle at top right,
      rgba(88,211,255,.18),
      transparent 40%
    );

  pointer-events:none;
}

.mgp-topbar-content{

  position:relative;

  display:flex;

  flex-direction:column;

  align-items:flex-start;
}

.mgp-rnname{

  color:
    rgba(255,255,255,.55);

  font-size:0.8rem;

  font-weight:700;

  letter-spacing:1px;

  text-transform:uppercase;
}

.mgp-status{

  margin-top:2px;

  color:white;

  font-size:.90rem;

  font-weight:900;

  line-height:1;

  font-style:italic;

  text-transform:uppercase;
}

/* =========================================
   MOTOGP LEADERBOARD
========================================= */

.mgp-board{

  position:absolute;

  top:200px;
  left:18px;

  width:210px;

  padding:3px;

  border-radius:0;

  background:
    linear-gradient(
      180deg,
      rgba(10,12,20,.90),
      rgba(14,22,36,.88)
    );

  border:
    1px solid rgba(255,255,255,.04);

  box-shadow:
    0 8px 24px rgba(0,0,0,.30);

  backdrop-filter:none;

  overflow:hidden;
}

/* =========================================
   ROW
========================================= */

.mgp-row{

  position:relative;

  height:30px;

  display:flex;

  align-items:center;

  margin-top:2px;

  padding:0 5px;

  overflow:hidden;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.88),
      rgba(0,12,24,.84)
    );

  border-left:
    2px solid transparent;

  transition:

transform
var(--motion-slow)
var(--motion-ease),

background
var(--motion-fast)
var(--motion-soft),

opacity
var(--motion-fast)
var(--motion-soft);

  will-change:
transform;

transform:
translateZ(0);

backface-visibility:
hidden;
}

/* =========================================
   STAGGER
========================================= */

.mgp-row:nth-child(1){ animation-delay:.03s; }
.mgp-row:nth-child(2){ animation-delay:.06s; }
.mgp-row:nth-child(3){ animation-delay:.09s; }
.mgp-row:nth-child(4){ animation-delay:.12s; }
.mgp-row:nth-child(5){ animation-delay:.15s; }
.mgp-row:nth-child(6){ animation-delay:.18s; }
.mgp-row:nth-child(7){ animation-delay:.21s; }
.mgp-row:nth-child(8){ animation-delay:.24s; }
.mgp-row:nth-child(9){ animation-delay:.27s; }
.mgp-row:nth-child(10){ animation-delay:.30s; }



/* =========================================
   LEADER
========================================= */

.mgp-row:first-child{

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.92),
      rgba(0,16,30,.88)
    );

  border-left:
    3px solid var(--secondary);

  box-shadow:
    inset 0 0 12px color-mix(
  in srgb,
  var(--secondary) 20%,
  transparent
);
}

/* =========================================
   TOP 3
========================================= */

.mgp-row:nth-child(2),
.mgp-row:nth-child(3),
.mgp-row:nth-child(4){

  border:
    1px solid rgba(255,255,255,.04);
}

/* =========================================
   POSITION
========================================= */

.mgp-pos{

  width:16px;

  text-align:center;

  color:white;

  font-size:11px;

  font-weight:900;

  font-style:italic;
}

/* =========================================
   RIDER NAME
========================================= */

.mgp-name{

  flex:1;

  padding-left:6px;

  color:white;

  font-size:15px;

  font-weight:800;

  text-transform:uppercase;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
  
}

/* =========================================
   NUMBER
========================================= */

.mgp-number{

  width:40px;
  height:26px;

  display:flex;

  align-items:center;
  justify-content:center;

  margin-left:6px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.18),
      rgba(180,180,180,.14)
    );

  border:
    1px solid rgba(255,255,255,.08);

  color:white;

  font-size:13px;

  font-weight:900;

  border-radius:3px;
}

/* =====================================
   MINI LAST LAP
===================================== */

.mgp-lastlap{

  min-width:54px;

  height:16px;

  padding:0 4px;

  display:flex;

  align-items:center;
  justify-content:center;

  background:
    rgba(255,255,255,.05);

  border:
    1px solid rgba(255,255,255,.05);

  border-radius:2px;

  color:#FFD54A;

  font-size:7px;

  font-weight:800;

  letter-spacing:.02em;

  white-space:nowrap;

  line-height:1;

  flex-shrink:0;
}

/* =========================================
   GAP
========================================= */

.mgp-info{

  position:absolute;

  right:-68px;

  min-width:60px;

  padding:
    2px 6px;

  border-radius:2px;

  background:
    rgba(0,0,0,.72);

  text-align:center;

  color:
    var(--secondary);

  font-size:10px;

  font-weight:700;

  opacity:0;

  transform:
    translateX(-6px);

  transition:

all

var(--motion-fast)

var(--motion-soft);
}

/* =========================================
   POSITION UP
========================================= */

.position-up{

animation:
positionBoost
1s
var(--motion-ease);

  border-left:
    3px solid var(--success);
}

@keyframes positionBoost{

  0%{

    transform:
      scale(1);
  }

  50%{

    transform:
      scale(1.03);
  }

  100%{

    transform:
      scale(1);
  }
}

/* =========================================
   POSITION DOWN
========================================= */

.position-down{

  border-left:
    3px solid var(--danger);
}

/* =========================================
   BATTLE ROW
========================================= */

.battle-row{

  animation:

battleGlow

1.8s

infinite;
}


/* =========================================
   LIVE FLASH
========================================= */

.live-flash{

  animation:

liveFlash

var(--motion-cinematic)

infinite;
}

@keyframes liveFlash{

  0%{
    opacity:1;
  }

  50%{
    opacity:.6;
  }

  100%{
    opacity:1;
  }
}

.lt-name{

  width:100%;

  font-size:22px;

  font-weight:900;

  color:white;

  line-height:1;

  text-transform:uppercase;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}

.lt-number{

  width:84px;

  height:100%;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:27px;

  font-weight:900;

  color:var(--primary);

  background:
    rgba(255,255,255,.03);
}

.lt-content{

  flex:1;

  min-width:0;

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:0 18px;

  overflow:hidden;
}

.lt-team{

  margin-top:6px;

  font-size:13px;

  font-weight:700;

  color:var(--secondary);

  letter-spacing:.08em;

  text-transform:uppercase;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}

.lt-position{

  min-width:92px;

  height:100%;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:34px;

  font-weight:900;

  color:white;

  background:
    rgba(255,255,255,.03);
}

.lt-gap{

  display:none;
}

/* =========================================
   WEATHER PAGE
========================================= */

#weather-layer{

  z-index:950;

  display:none;

  pointer-events:none;
}

.weather-page{

  position:absolute;

  right:24px;
  top:100px;

  width:420px;

  animation:
    slideInRight
    var(--speed-slow)
    var(--ease);
}

.weather-content{

  position:relative;

  overflow:hidden;

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      135deg,
      rgba(10,15,24,.94),
      rgba(20,32,52,.90)
    );

  border:
    1px solid rgba(255,255,255,.06);

  box-shadow:
    var(--shadow-heavy);

  backdrop-filter:
    var(--glass-blur);

  padding:20px;
}

.weather-title{

  color:white;

  font-size:28px;

  font-weight:900;

  margin-bottom:18px;
}

.weather-grid{

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:10px;
}

.weather-card{

  height:100px;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  border-radius:
    var(--radius-md);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.02)
    );

  border:
    1px solid rgba(255,255,255,.05);
}

.weather-label{

  color:
    var(--text-soft);

  font-size:13px;

  font-weight:700;
}

.weather-value{

  margin-top:8px;

  color:white;

  font-size:34px;

  font-weight:900;
}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes slideInRight{

  0%{

    opacity:0;

    transform:
      translateX(80px)
      scale(.96);

    filter:
      blur(3px);
  }

  100%{

    opacity:1;

    transform:
      translateX(0)
      scale(1);

    filter:
      blur(0);
  }
}

@keyframes slideInLeft{

  0%{

    opacity:0;

    transform:
      translateX(-80px)
      scale(.96);

    filter:
      blur(3px);
  }

  100%{

    opacity:1;

    transform:
      translateX(0)
      scale(1);

    filter:
      blur(0);
  }
}

@keyframes slideInBottom{

  0%{

    opacity:0;

    transform:
      translate(-50%, calc(-50% + 60px))
      scale(.96);

    filter:
      blur(3px);
  }

  100%{

    opacity:1;

    transform:
      translate(-50%,-50%)
      scale(1);

    filter:
      blur(0);
  }
}

@keyframes fadeIn{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}

@keyframes fadeOut{

  from{
    opacity:1;
  }

  to{
    opacity:0;
  }
}

/* =========================================
   BATTLE GLOW
========================================= */

@keyframes battleGlow{

  0%{

    box-shadow:
      inset 0 0 0 rgba(255,80,80,0);
  }

  50%{

    box-shadow:
      inset 0 0 12px rgba(255,80,80,.18);
  }

  100%{

    box-shadow:
      inset 0 0 0 rgba(255,80,80,0);
  }
}
  
/* =========================================
   FASTEST LAP POPUP
========================================= */

.fastest-popup{

  position:fixed;

  left:24px;
  bottom:160px;

  width:220px;

  padding:12px 14px;

  border-radius:10px;

  background:
    linear-gradient(
      135deg,
      rgba(2,12,28,.96),
      rgba(0,24,60,.94)
    );

  border-left:
    3px solid #ff3048;

  box-shadow:
    0 8px 20px rgba(0,0,0,.34);

  backdrop-filter:
    blur(8px);

  z-index:3000;
}


/* =========================================
   HEADER
========================================= */

.popup-header {

  color:white !important;

  font-size:10px;

  font-weight:800;

  letter-spacing:2px;

  text-transform:uppercase;

  opacity:.82;
}

/* =========================================
   POPUP TITLE
========================================= */

.popup-title{

  color:white !important;

  font-size:10px;

  font-weight:800;

  letter-spacing:2px;

  text-transform:uppercase;

  opacity:.82;
}

/* =========================================
   DRIVER ROW
========================================= */

.popup-driver-row {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 10px;
}

/* =========================================
   NUMBER
========================================= */

.popup-number {

  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  background:
    rgba(255,255,255,.08);

  color: white;

  font-size: 14px;

  font-weight: 900;

  border-radius:
    var(--radius-sm);
}

/* =========================================
   NAME
========================================= */

.popup-name {

  color:white !important;

  font-size:16px;

  font-weight:900;

  text-transform:uppercase;

  line-height:1.1;
}

/* =========================================
   TIME
========================================= */

.popup-time {

  margin-top:6px;

  color:
    var(--primary);

  font-size:20px;

  font-weight:900;

  line-height:1;
}

/* =========================================
   BATTLE ROW
========================================= */

.battle-row-modern {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 10px;
}

/* =========================================
   RIDER
========================================= */

.popup-rider {

  display: flex;

  align-items: center;

  gap: 8px;
}

/* =========================================
   VS
========================================= */

.popup-vs {

  color:
    var(--primary);

  font-size: 10px;

  font-weight: 900;
}

/* =========================================
   GAP
========================================= */

.popup-gap {

  margin-top: 10px;

  color:
    var(--text-soft);

  font-size: 10px;

  font-weight: 700;

  text-align: center;
}
/* =========================================
   STARTING GRID / FINAL RESULT
========================================= */

.sg-backdrop {

  position: absolute;

  inset: 0;

  background:
    rgba(0,0,0,.55);

  backdrop-filter:
    blur(3px);
}


/* =========================================
   GAP
========================================= */

.fr-gap {

  color:
    var(--secondary);

  font-size: 12px;

  font-weight: 700;
}

/* =========================================
   STARTING GRID HEADER
========================================= */

.sg-header,
.fr-header {

  margin-bottom: 30px;

  text-align: center;
}

/* =========================================
   EVENT
========================================= */

.sg-event,
.fr-event {

  margin-top: 6px;

  color:
    var(--secondary);

  font-size: 18px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 1px;
}

/* =========================================
   SESSION
========================================= */

.sg-session,
.fr-session {

  margin-top: 4px;

  color:
    var(--text-soft);

  font-size: 13px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1px;
}



/* =========================================
   MOTOGP EXIT
========================================= */

@keyframes motogpExit{

  0%{

    opacity:1;

    transform:
      translateX(0);

    filter:
      blur(0);
  }

  100%{

    opacity:0;

    transform:
      translateX(-14px);

    filter:
      blur(4px);
  }
}


.motogp-exit{

  animation:

    motogpExit

    var(--motion-out)

    var(--motion-ease)

    forwards;
}

/* =========================================
   MOTOGP ENTER
========================================= */

@keyframes motogpEnter{

  0%{

    opacity:0;

    transform:
      translateX(-24px);

    filter:
      blur(3px);
  }

  100%{

    opacity:1;

    transform:
      translateX(0);

    filter:
      blur(0);
  }
}

/* =========================================
   FINAL RESULT — CLEAN TV BROADCAST STYLE
========================================= */

.fr-wrapper {

  position:absolute;

  top:52%;
  left:50%;

  transform:
    translate(-50%,-50%);

  width:1360px;

  color:white;

  font-family:
    "MGPDisplay",
    sans-serif;

  z-index:99999;
}

/* =========================================
   HEADER
========================================= */

.fr-header{

  position:relative;

  margin-bottom:10px;

  text-align:center;
}

.fr-header::before{

  content:"";

  position:absolute;

  left:50%;
  top:-10px;

  transform:
    translateX(-50%);

  width:520px;
  height:120px;

  background:
    radial-gradient(
      circle,
      rgba(0,150,255,.10),
      transparent 70%
    );

  pointer-events:none;
}

/* =========================================
   TITLE
========================================= */

.fr-title {

  position:relative;

  display:inline-block;

  padding-bottom:8px;

  color:white;

  font-size:68px;

  font-weight:900;

  font-style:italic;

  text-transform:uppercase;

  letter-spacing:1px;

  line-height:1;
}

.fr-title::after{

  content:"";

  position:absolute;

  left:50%;

  bottom:0;

  transform:
    translateX(-50%);

  width:300px;
  height:5px;

  background:
  linear-gradient(
    90deg,
    var(--primary),
    var(--primary)
  );

  clip-path:
    polygon(
      10% 0,
      100% 0,
      90% 100%,
      0 100%
    );
}

/* =========================================
   EVENT
========================================= */

.fr-event{

  margin-top:12px;

  color:var(--secondary);

  font-size:22px;

  font-weight:900;

  text-transform:uppercase;
}

/* =========================================
   SESSION
========================================= */

.fr-session{

  margin-top:-2px;

  color:
    rgba(255,255,255,.75);

  font-size:15px;

  font-weight:700;

  text-transform:uppercase;
}

/* =========================================
   COLUMN HEADER
========================================= */

.fr-columns{

  display:grid;

  grid-template-columns:
  70px
  90px
  3fr
  90px
  150px
  120px
  120px
  150px
  150px;

  align-items:center;

  margin-bottom:4px;

  padding:
    0 18px;

  color:
    rgba(255,255,255,.68);

  font-size:13px;

  font-weight:800;

  font-style:italic;

  text-transform:uppercase;

  letter-spacing:.5px;
}

/* =========================================
   LIST
========================================= */

.fr-list{

  display:flex;

  flex-direction:column;

  gap:3px;
}

/* =========================================
   ROW
========================================= */

.fr-row{

  position:relative;

  min-height:56px;

  display:grid;

  grid-template-columns:
  70px
  90px
  3fr
  90px
  150px
  120px
  120px
  150px
  150px;

  align-items:center;

  padding:
    0 18px;

  overflow:hidden;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.78),
      rgba(0,14,28,.76),
      rgba(0,0,0,.78)
    );

  border-top:
    1px solid rgba(255,255,255,.06);

  border-bottom:
    1px solid rgba(255,255,255,.06);

  box-shadow:
    0 4px 12px rgba(0,0,0,.24);

  backdrop-filter:
    blur(5px);

  animation:
    motogpEnter
    .65s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    both;
}

/* =========================================
   STAGGER ANIMATION
========================================= */

.fr-row:nth-child(1){ animation-delay:.05s; }
.fr-row:nth-child(2){ animation-delay:.10s; }
.fr-row:nth-child(3){ animation-delay:.15s; }
.fr-row:nth-child(4){ animation-delay:.20s; }
.fr-row:nth-child(5){ animation-delay:.25s; }
.fr-row:nth-child(6){ animation-delay:.30s; }
.fr-row:nth-child(7){ animation-delay:.35s; }
.fr-row:nth-child(8){ animation-delay:.40s; }
.fr-row:nth-child(9){ animation-delay:.45s; }
.fr-row:nth-child(10){ animation-delay:.50s; }

/* =========================================
   HEADER ALIGN FIX
========================================= */

.fr-columns div{

  display:flex;

  align-items:center;
}

.fr-columns div:nth-child(1),
.fr-columns div:nth-child(2),
.fr-columns div:nth-child(4),
.fr-columns div:nth-child(5),
.fr-columns div:nth-child(6),
.fr-columns div:nth-child(7),
.fr-columns div:nth-child(8),
.fr-columns div:nth-child(9){

  justify-content:center;
}

.fr-columns div:nth-child(3){

  justify-content:flex-start;

  padding-left:8px;
}

/* =========================================
   DATA ALIGN FIX
========================================= */

.fr-pos,
.fr-no,
.fr-laps,
.fr-lastlap,
.fr-diff,
.fr-gap,
.fr-total,
.fr-bestlap{

  justify-self:center;
}

.fr-name{

  justify-self:start;

  padding-left:8px;
}

/* =========================================
   LIGHT EFFECT
========================================= */

.fr-row::before{

  content:"";

  position:absolute;

  top:0;
  bottom:0;
  left:45%;

  width:90px;

  background:
    linear-gradient(
      180deg,
      rgba(0,140,255,.10),
      transparent
    );

  transform:
    skewX(-14deg);
}

/* =========================================
   POSITION
========================================= */

.fr-pos{

  width:72px;
  height:46px;

  display:flex;

  align-items:center;
  justify-content:center;

  color:white;

  font-size:18px;

  font-weight:900;

  font-style:italic;

  background:
    linear-gradient(
      180deg,
      var(--primary),
      var(--primary-dark)
    );

  clip-path:
    polygon(
      0 0,
      100% 0,
      78% 100%,
      0 100%
    );
}

/* =========================================
   WINNER POSITION
========================================= */

.fr-winner .fr-pos{

  background:
    linear-gradient(
      180deg,
      var(--primary),
      var(--primary)
    );
}

/* =========================================
   NUMBER
========================================= */

.fr-no{

  width:56px;
  height:42px;

  display:flex;

  align-items:center;
  justify-content:center;

  background:
    rgba(255,255,255,.04);

  border:
    1px solid rgba(255,255,255,.05);

  color:white;

  font-size:18px;

  font-weight:900;

  font-style:italic;
}

/* =========================================
   RIDER NAME
========================================= */

.fr-name{

  padding-left:6px;

  color:white;

  font-size:15px;

  font-weight:900;

  font-style:italic;

  text-transform:uppercase;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}

/* =========================================
   STATS
========================================= */

.fr-laps,
.fr-lastlap,
.fr-diff,
.fr-gap,
.fr-total,
.fr-bestlap{

  text-align:center;

  font-size:13px;

  font-weight:800;

  font-style:italic;
}

/* =========================================
   GAP
========================================= */

.fr-gap{

  color:var(--secondary);

  font-weight:900;

  text-shadow:
    0 0 8px rgba(0,200,255,.18);
}

/* =========================================
   BEST LAP
========================================= */

.fr-bestlap{

  color:var(--primary);

  font-weight:900;

  text-shadow:
    0 0 8px color-mix(
  in srgb,
  var(--primary) 25%,
  transparent
);
}

/* =========================================
   WINNER ROW
========================================= */

.fr-winner{

  border-top:
    1px solid rgba(255,60,100,.20);

  border-bottom:
    1px solid rgba(255,60,100,.20);

  box-shadow:
    0 0 14px color-mix(
  in srgb,
  var(--primary) 30%,
  transparent
);
}

/* =========================================
   STARTING GRID — TV BROADCAST STYLE
========================================= */

.sg-wrapper{

  position:absolute;

  top:52%;
  left:50%;

  transform:
    translate(-50%,-50%);

  width:1420px;

  z-index:99999;

  font-family:
    "MGPDisplay",
    sans-serif;
}

/* =========================================
   HEADER
========================================= */

.sg-header{

  position:relative;

  margin-bottom:36px;

  text-align:center;
}

.sg-title{

  position:relative;

  display:inline-block;

  padding-bottom:8px;

  color:white;

  font-size:68px;

  font-weight:900;

  font-style:italic;

  text-transform:uppercase;

  letter-spacing:1px;

  line-height:1;
}

.sg-title::after{

  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  transform:
    translateX(-50%);

  width:280px;
  height:5px;

  background:
    linear-gradient(
      90deg,
      var(--primary),
      var(--primary)
    );

  clip-path:
    polygon(
      10% 0,
      100% 0,
      90% 100%,
      0 100%
    );
}

/* =========================================
   EVENT
========================================= */

.sg-event{

  margin-top:14px;

  color:var(--secondary);

  font-size:22px;

  font-weight:900;

  text-transform:uppercase;
}

/* =========================================
   SESSION
========================================= */

.sg-session{

  margin-top:-2px;

  color:
    rgba(255,255,255,.72);

  font-size:15px;

  font-weight:700;

  text-transform:uppercase;
}

/* =========================================
   GRID
========================================= */

.sg-grid{

  display:flex;

  flex-direction:column;

  gap:28px;

  align-items:center;
}

/* =========================================
   ROW
========================================= */

.sg-row{

  display:flex;

  justify-content:center;

  align-items:flex-start;

  gap:34px;
}

/* =========================================
   LADDER EFFECT
========================================= */

.sg-row .sg-card-modern:nth-child(1){

  margin-top:0;
}

.sg-row .sg-card-modern:nth-child(2){

  margin-top:28px;
}

.sg-row .sg-card-modern:nth-child(3){

  margin-top:56px;
}

/* =========================================
   CARD
========================================= */

.sg-card-modern{

  position:relative;

  width:380px;
  height:74px;

  display:flex;

  align-items:center;

  gap:14px;

  padding:0 18px;

  overflow:hidden;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.82),
      rgba(0,16,32,.80),
      rgba(0,0,0,.82)
    );

  border-top:
    1px solid rgba(255,255,255,.08);

  border-bottom:
    1px solid rgba(255,255,255,.08);

  box-shadow:
    0 6px 18px rgba(0,0,0,.28);

  backdrop-filter:
    blur(3px);

  animation:
    motogpEnter
    .65s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    both;
}

/* =========================================
   STAGGER ANIMATION
========================================= */

.sg-card-modern:nth-child(1){ animation-delay:.05s; }
.sg-card-modern:nth-child(2){ animation-delay:.12s; }
.sg-card-modern:nth-child(3){ animation-delay:.19s; }

/* =========================================
   LIGHT EFFECT
========================================= */

.sg-card-modern::before{

  content:"";

  position:absolute;

  top:0;
  bottom:0;
  left:38%;

  width:90px;

  background:
    linear-gradient(
      180deg,
      rgba(0,140,255,.08),
      transparent
    );

  transform:
    skewX(-16deg);
}

/* =========================================
   POSITION
========================================= */

.sg-pos{

  width:48px;
  height:48px;

  display:flex;

  align-items:center;
  justify-content:center;

  color:var(--secondary);

  font-size:18px;

  font-weight:900;

  font-style:italic;

  background:
    linear-gradient(
      180deg,
      rgba(0,90,220,.18),
      rgba(0,50,120,.18)
    );

  border-left:
    3px solid var(--secondary);
}

/* =========================================
   NUMBER
========================================= */

.sg-no{

  width:54px;
  height:42px;

  display:flex;

  align-items:center;
  justify-content:center;

  background:
    rgba(255,255,255,.04);

  border:
    1px solid rgba(255,255,255,.06);

  color:white;

  font-size:18px;

  font-weight:900;

  font-style:italic;
}

/* =========================================
   INFO
========================================= */

.sg-info{

  flex:1;

  min-width:0;
}

/* =========================================
   NAME
========================================= */

.sg-name{

  color:white;

  font-size:15px;

  font-weight:900;

  font-style:italic;

  text-transform:uppercase;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}

/* =========================================
   TEAM
========================================= */

.sg-team{

  margin-top:2px;

  color:
    rgba(255,255,255,.45);

  font-size:11px;

  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.5px;
}
/* =========================================
   COMPACT MODE
========================================= */

.mgp-board.compact .mgp-row{

  height:20px;
}

.mgp-board.compact .mgp-name{

  font-size:10px;
}

.mgp-board.compact .mgp-number{

  width:20px;
  height:15px;

  font-size:9px;
}

.mgp-board.compact .mgp-number-wrap{

  gap:2px;

  margin-left:2px;
}

.mgp-board.compact .mgp-lastlap{

  min-width:40px;

  height:12px;

  padding:0 3px;

  font-size:6px;
}

.mgp-board.compact .mgp-pos{

  font-size:10px;
}

.mgp-board.compact .mgp-info{

  font-size:8px;
}

/* =========================================
   PAGE INDICATOR
========================================= */

.mgp-page{

  margin-top:4px;

  padding:
    4px 0 2px;

  text-align:center;

  color:
    rgba(255,255,255,.45);

  font-size:9px;

  font-weight:700;

  letter-spacing:1px;

  text-transform:uppercase;
}

/* =========================================
   PAGINATION DOTS
========================================= */

.mgp-page-dots{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:5px;

  padding:
    6px 0 2px;
}

/* =========================================
   DOT
========================================= */

.mgp-page-dot{

  width:5px;
  height:5px;

  border-radius:50%;

  background:
    rgba(255,255,255,.18);

  transition:

all

var(--motion-normal)

var(--motion-soft);
}

/* =========================================
   ACTIVE DOT
========================================= */

.mgp-page-dot.active{

  width:16px;

  border-radius:20px;

  background:
    linear-gradient(
      90deg,
      var(--secondary),
      var(--secondary)
    );

  box-shadow:
    0 0 10px rgba(0,180,255,.35);

  animation:

dotPulse

2.2s

infinite;
}

/* =========================================
   DOT PULSE
========================================= */

@keyframes dotPulse{

  0%{

    transform:
      scale(1);
  }

  50%{

    transform:
      scale(1.15);
  }

  100%{

    transform:
      scale(1);
  }
}

/* =========================================
   CONTEXTUAL INFO
========================================= */

.mgp-info{

  min-width:62px;

  opacity:0;

  transform:
    translateX(-8px);

  transition:

all

var(--motion-fast)

var(--motion-soft);

  font-size:9px;

  font-weight:700;

  letter-spacing:.3px;

  text-align:right;
}

/* =========================================
   POSITION UP
========================================= */

.mgp-info.pos-up{

  color:var(--success);

  text-shadow:
    0 0 10px rgba(89,255,180,.35);
}

/* =========================================
   FASTEST LAP
========================================= */

.mgp-info.fastest{

  color:var(--primary);

  text-shadow:
    0 0 12px color-mix(
  in srgb,
  var(--primary) 25%,
  transparent
);
}

.live-dot{

  width:6px;
  height:6px;

  border-radius:50%;

  background:#FF4040;

  display:inline-block;

  margin-right:6px;

  animation:
    dotPulse
    2s infinite;
}

/* =========================================
   TRACK STATUS
========================================= */

.track-status{

  position:absolute;

  top:78px;

  left:50%;

  transform:
    translateX(-50%);

  min-width:320px;

  height:54px;

  display:flex;

  align-items:center;
  justify-content:center;

  padding:
    0 24px;

  border-radius:14px;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      rgba(0,0,0,.92),
      rgba(10,18,34,.94)
    );

  border:
    1px solid rgba(255,255,255,.08);

  box-shadow:
    0 12px 40px rgba(0,0,0,.45);

  backdrop-filter:
    blur(3px);

  z-index:1600;

  animation:

trackStatusEnter

.45s

cubic-bezier(
  0.22,
  1,
  0.36,
  1
)

forwards;
}

/* =========================================
   STATUS TEXT
========================================= */

.track-status-text{

  position:relative;

  color:white;

  font-size:24px;

  font-weight:900;

  font-style:italic;

  letter-spacing:1px;

  text-transform:uppercase;

  line-height:1;

  z-index:2;
}

/* =========================================
   RED
========================================= */

.track-status.red{

  background:
    linear-gradient(
      135deg,
      rgba(60,0,0,.96),
      rgba(120,0,0,.94)
    );

  border-color:
    rgba(255,60,60,.35);

  box-shadow:
    0 0 60px rgba(255,0,0,.25);
}

/* =========================================
   YELLOW
========================================= */

.track-status.yellow{

  background:
    linear-gradient(
      135deg,
      rgba(50,40,0,.96),
      rgba(120,90,0,.94)
    );

  border-color:
    rgba(255,220,0,.35);

  box-shadow:
    0 0 60px rgba(255,220,0,.18);
}

.track-status.yellow
.track-status-text{

  color:#FFD400;
}

/* =========================================
   GREEN
========================================= */

.track-status.green{

  background:
    linear-gradient(
      135deg,
      rgba(0,40,10,.96),
      rgba(0,100,40,.94)
    );

  border-color:
    rgba(0,255,120,.25);

  box-shadow:
    0 0 60px rgba(0,255,120,.15);
}

.track-status.green
.track-status-text{

  color:var(--success);
}

/* =========================================
   SAFETY CAR
========================================= */

.track-status.safetycar{

  background:
    linear-gradient(
      135deg,
      rgba(0,20,50,.96),
      rgba(0,80,140,.94)
    );

  border-color:
    rgba(0,180,255,.35);

  box-shadow:
    0 0 60px rgba(0,180,255,.20);
}

.track-status.safetycar
.track-status-text{

  color:var(--secondary);
}

/* =========================================
   CHECKERED
========================================= */

.track-status.checkered{

  background:
    linear-gradient(
      135deg,
      rgba(30,30,30,.96),
      rgba(90,90,90,.94)
    );

  border-color:
    rgba(255,255,255,.20);
}

/* =========================================
   LIGHT EFFECT
========================================= */

.track-status::before{

  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.08),
      transparent
    );

  animation:
    trackScan
    2s linear infinite;
}

/* =========================================
   ENTER
========================================= */

@keyframes trackStatusEnter{

  0%{

    opacity:0;

    transform:
      translate(-50%,-50%)
      scale(.88);

    filter:
      blur(3px);
  }

  100%{

    opacity:1;

    transform:
      translate(-50%,-50%)
      scale(1);

    filter:
      blur(0);
  }
}

/* =========================================
   SCAN
========================================= */

@keyframes trackScan{

  0%{

    transform:
      translateX(-100%);
  }

  100%{

    transform:
      translateX(100%);
  }
}

/* =========================================
   TOP LIGHT BAR
========================================= */

.track-status::after{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:2px;

  background:
    rgba(255,255,255,.18);
}

/* =========================================
   INFO VISIBILITY FIX
========================================= */

.mgp-info.show{

  opacity:1 !important;

  transform:
    translateX(0) !important;
}

/* =========================================
   POSITION UP
========================================= */

.mgp-info.show.pos-up{

  color:var(--success);

  text-shadow:
    0 0 10px rgba(89,255,180,.35);

  animation:
    infoPulse 1.2s infinite;
}

/* =========================================
   POSITION DOWN
========================================= */

.mgp-info.show.lost{

  color:var(--danger);

  text-shadow:
    0 0 10px rgba(255,80,80,.25);
}

/* =========================================
   FASTEST LAP
========================================= */

.mgp-info.show.fastest{

  color:var(--primary);

  text-shadow:
    0 0 14px rgba(255,77,255,.45);

  animation:
    fastestPulse 1s infinite;
}

/* =========================================
   PULSE
========================================= */

@keyframes infoPulse{

  0%{
    opacity:1;
  }

  50%{
    opacity:.65;
  }

  100%{
    opacity:1;
  }
}

/* =========================================
   FASTEST
========================================= */

@keyframes fastestPulse{

  0%{

    transform:
      scale(1);
  }

  50%{

    transform:
      scale(1.08);
  }

  100%{

    transform:
      scale(1);
  }
}

/* =========================================
   MOTOGP ENTER
========================================= */

.motogp-enter{

  animation:

    motogpEnter

    var(--motion-normal)

    var(--motion-ease);
}

/* =========================================
   POPUP SHOW
========================================= */

.popup-show{

  animation:
    popupEnter
    .45s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    forwards;
}

/* =========================================
   POPUP HIDE
========================================= */

.popup-hide{

  animation:
    popupExit
    .35s
    ease
    forwards;
}

/* =========================================
   ENTER
========================================= */

@keyframes popupEnter{

  0%{

    opacity:0;

    transform:
      translateX(40px)
      scale(.92);

    filter:
      blur(8px);
  }

  100%{

    opacity:1;

    transform:
      translateX(0)
      scale(1);

    filter:
      blur(0);
  }
}

/* =========================================
   EXIT
========================================= */

@keyframes popupExit{

  0%{

    opacity:1;

    transform:
      translateX(0)
      scale(1);

    filter:
      blur(0);
  }

  100%{

    opacity:0;

    transform:
      translateX(24px)
      scale(.96);

    filter:
      blur(3px);
    }
}

/* =========================================
   LOWER THIRD LAYER
========================================= */

#lowerthird-layer{

  position:fixed;

  left:28px;

  bottom:78px;

  width:auto;

  height:auto;

  z-index:1200;

  pointer-events:none;

  overflow:visible;

  display:block;
}

/* =========================================
   RIDER LOWER THIRD
========================================= */

.rider-lowerthird{

  display:flex;

  align-items:center;

  min-width:460px;

  max-width:760px;

  height:68px;

  background:
    linear-gradient(
      90deg,
      rgba(5,8,15,.96),
      rgba(10,20,45,.94)
    );

  border-left:
    4px solid var(--primary);

  border-radius:
    0 12px 12px 0;

  box-shadow:
    0 10px 34px rgba(0,0,0,.42);

  backdrop-filter:
    blur(3px);

  overflow:hidden;
}


/* =========================================
   BATTLE ANIMATION
========================================= */

@keyframes battleSlide{

  from{

    opacity:0;

    transform:
      translateY(24px);
  }

  to{

    opacity:1;

    transform:
      translateY(0);
  }
}

/* =========================================
   BATTLE WRAP
========================================= */

.battle-popup-wrap{

  position:absolute;

  left:50%;
  bottom:58px;

  transform:
    translateX(-50%);

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:6px;

  z-index:3000;
}

/* =========================================
   BATTLE TITLE
========================================= */

.battle-popup-title{

  padding:
    4px 12px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      var(--primary),
      var(--primary-dark)
    );

  color:white;

  font-size:10px;

  font-weight:900;

  letter-spacing:.12em;

  text-transform:uppercase;

  box-shadow:
    0 4px 12px rgba(0,0,0,.25);
}

.battle-popup{

  position:relative;

  width:440px;
  height:64px;

  padding:0 16px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      rgba(2,12,28,.96),
      rgba(0,24,60,.94)
    );

  border-left:
    3px solid var(--primary);

  border-right:
    3px solid var(--secondary);

  box-shadow:
    0 10px 22px rgba(0,0,0,.34);

  backdrop-filter:
    blur(8px);

  overflow:hidden;
}

/* =========================================
   DRIVER
========================================= */

.battle-driver{

  flex:1;

  min-width:0;

  display:flex;

  flex-direction:column;

  justify-content:center;
}

/* =========================================
   RIGHT SIDE
========================================= */

.battle-driver{

  width:190px;

  display:flex;
  flex-direction:column;

  justify-content:center;

  overflow:hidden;
}

/* =========================================
   NAME
========================================= */

.battle-name{

  font-size:15px;

  font-weight:900;

  color:white;

  line-height:1;

  text-transform:uppercase;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}

.battle-time{

  margin-top:2px;

  font-size:10px;

  font-weight:700;

  color:var(--secondary);

  letter-spacing:.08em;
}

/* =========================================
   CENTER
========================================= */

.battle-center{

  width:70px;

  display:flex;

  align-items:center;

  justify-content:center;

  flex-shrink:0;
}

/* =========================================
   GAP
========================================= */

.battle-gap{

  min-width:72px;

  text-align:center;

  font-size:14px;
  font-weight:900;

  color:var(--primary);

  letter-spacing:.03em;
}

/* =========================================
   EVENT LOGO
========================================= */

.event-logo{

  position:fixed;

  top:24px;
  left:22px;

  width:170px;

  z-index:2200;

  pointer-events:none;

  opacity:.96;

  filter:
    drop-shadow(
      0 0px 10px rgba(0,0,0,.25)
    );

  animation:
    sponsorFadeIn .8s
    cubic-bezier(.22,1,.36,1);
}

/* =========================================
   SPONSOR ROTATOR
========================================= */

.sponsor-rotator{

  position:fixed;

  top:24px;
  right:28px;

  width:170px;

  height:70px;

  z-index:2200;

  pointer-events:none;
}

/* =========================================
   SPONSOR SLIDE
========================================= */

.sponsor-slide{

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  object-fit:contain;

  opacity:0;

  transition:
    opacity .8s ease;

  filter:
    drop-shadow(
      0 4px 16px rgba(0,0,0,.35)
    );
}

/* =========================================
   ACTIVE
========================================= */

.sponsor-slide.active{

  opacity:.96;
}

/* =========================================
   FADE ANIMATION
========================================= */

@keyframes sponsorFadeIn{

  from{

    opacity:0;

    transform:
      translateY(-8px);

    filter:
      blur(3px);
  }

  to{

    opacity:1;

    transform:
      translateY(0);

    filter:
      blur(0);
  }
}

/* =========================================
   STARTING GRID SPONSOR
========================================= */

.sg-sponsored{

  margin-top:18px;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:8px;

  color:
    rgba(255,255,255,.45);

  font-size:10px;

  font-weight:700;

  letter-spacing:.12em;

  text-transform:uppercase;
}

.sg-sponsored img{

  width:170px;

  object-fit:contain;

  opacity:.94;

  filter:
    drop-shadow(
      0 4px 12px rgba(0,0,0,.35)
    );
}

/* =========================================
   FINAL RESULT SPONSOR
========================================= */

.fr-sponsored{

  margin-top:18px;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:8px;

  color:
    rgba(255,255,255,.45);

  font-size:10px;

  font-weight:700;

  letter-spacing:.12em;

  text-transform:uppercase;
}

.fr-sponsored img{

  width:170px;

  object-fit:contain;

  opacity:.94;

  filter:
    drop-shadow(
      0 4px 12px rgba(0,0,0,.35)
    );
}

/* =========================================
   TRACK INFO V2
========================================= */

.trackinfo-wrapper{

  position:absolute;

  top:50%;
  left:50%;

  transform:
    translate(-50%,-50%);

  width:1120px;

  height:500px;

  padding:34px;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      rgba(5,10,18,.97),
      rgba(0,20,42,.96)
    );

  border:
    1px solid rgba(88,211,255,.12);

  box-shadow:
    0 24px 80px rgba(0,0,0,.55);

  color:white;
}

/* =========================================
   HEADER
========================================= */

.trackinfo-header{

  display:flex;

  justify-content:space-between;

  align-items:flex-start;
}

.trackinfo-title{

  font-size:22px;

  font-weight:900;

  letter-spacing:.03em;

  text-transform:uppercase;
}

.trackinfo-session{

  margin-top:8px;

  color:var(--secondary);

  font-size:16px;

  font-weight:700;

  letter-spacing:.08em;

  text-transform:uppercase;
}

.trackinfo-trackname{

  font-size:20px;

  font-weight:900;

  text-transform:uppercase;

  text-align:right;
}

/* =========================================
   CONTENT
========================================= */

.trackinfo-content{

  margin-top:30px;

  display:grid;

  grid-template-columns:
    220px
    1fr
    220px;

  align-items:center;

  gap:20px;
}

/* =========================================
   LEFT
========================================= */

.trackinfo-left{

  display:flex;

  flex-direction:column;

  justify-content:center;
}

.trackinfo-specs{

  display:flex;

  flex-direction:column;

  gap:28px;
}

.trackinfo-spec-card{

  display:flex;

  flex-direction:column;
}

.trackinfo-label{

  color:var(--secondary);

  font-size:12px;

  font-weight:700;

  letter-spacing:.12em;

  text-transform:uppercase;
}

.trackinfo-value{

  margin-top:6px;

  font-size:48px;

  font-weight:900;
}

/* =========================================
   CENTER MAP
========================================= */

.trackinfo-map-area{

  display:flex;

  align-items:center;

  justify-content:center;
}

.trackinfo-map{

  width:100%;

  max-width:620px;

  object-fit:contain;

  opacity:.98;

  filter:
    drop-shadow(
      0 0 26px rgba(88,211,255,.24)
    );
}

/* =========================================
   RIGHT
========================================= */

.trackinfo-right{

  display:flex;

  flex-direction:column;

  gap:22px;
}

.trackinfo-weather-card{

  display:flex;

  flex-direction:column;
}

.trackinfo-weather-card span{

  color:var(--secondary);

  font-size:12px;

  font-weight:700;

  letter-spacing:.12em;

  text-transform:uppercase;
}

.trackinfo-weather-card strong{

  margin-top:4px;

  font-size:32px;

  font-weight:900;
}

/* =========================================
   SPONSOR
========================================= */

.trackinfo-sponsored{

  position:absolute;

  left:50%;

  bottom:24px;

  transform:
    translateX(-50%);

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:8px;

  color:
    rgba(255,255,255,.45);

  font-size:10px;

  font-weight:700;

  letter-spacing:.12em;

  text-transform:uppercase;
}

.trackinfo-sponsored img{

  width:180px;

  object-fit:contain;

  opacity:.95;
}

/* =========================================
   RESPONSIVE SAFETY
========================================= */

.fr-wrapper,
.sg-wrapper,
.trackinfo-wrapper{

  max-width:92vw;
}

/* =========================================
   TRACKINFO ENTER
========================================= */

.trackinfo-enter{

  animation:
    slideInBottom
    .65s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}

/* =========================================
   GPU OPTIMIZATION
========================================= */

.fr-row,
.sg-card-modern,
.track-status,
.rider-lowerthird,
.fastest-lap-popup,
.battle-popup{

  will-change:
    transform,
    opacity;

  transform:
    translateZ(0);

  backface-visibility:
    hidden;
}

/* =========================================
   SCROLLBAR
========================================= */

.left-panel::-webkit-scrollbar,
.event-log::-webkit-scrollbar,
.timing-table::-webkit-scrollbar{

  width:6px;
}

.left-panel::-webkit-scrollbar-thumb,
.event-log::-webkit-scrollbar-thumb,
.timing-table::-webkit-scrollbar-thumb{

  background:
    rgba(255,255,255,.12);

  border-radius:999px;
}

.trackinfo-wrapper{

  will-change:
    transform,
    opacity;

  backface-visibility:
    hidden;
}

/* =========================================
   RACE FINISH FX
========================================= */

.race-finished::before{

  content:"";

  position:fixed;

  inset:0;

  z-index:999999;

  pointer-events:none;

  background:

    radial-gradient(

      circle,

      rgba(255,255,255,.10),

      transparent 60%
    );

  animation:

    finishFlash

    1.2s

    ease-in-out

    infinite;
}

@keyframes finishFlash{

  0%{
    opacity:0;
  }

  50%{
    opacity:1;
  }

  100%{
    opacity:0;
  }
}

/* =========================================
   FINISHED RIDER
========================================= */

.rider-finished{

  border-left:
    3px solid #ffffff;

  opacity:.92;

  background:
    linear-gradient(
      90deg,
      rgba(40,40,40,.96),
      rgba(80,80,80,.92)
    );
}

/* =========================================
   CHECKER FLAG
========================================= */

.mgp-finish{

  margin-left:6px;

  font-size:12px;

  animation:
    finishPulse
    1.2s infinite;
}

@keyframes finishPulse{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.18);
  }

  100%{
    transform:scale(1);
  }
}

/* =========================================
   FINISHED RIDER
========================================= */

.rider-finished{

  border-left:
    3px solid #ffffff;

  background:
    linear-gradient(
      90deg,
      rgba(35,35,35,.96),
      rgba(70,70,70,.92)
    );

  opacity:.94;
}

/* =========================================
   WINNER FINISHED
========================================= */

.winner-finished{

  border-left:
    3px solid #FFD700;

  box-shadow:
    0 0 26px rgba(255,215,0,.22);

  animation:
    winnerGlow
    2s infinite;
}

/* =========================================
   CHECKER FLAG
========================================= */

.mgp-finish{

  display:flex;

  align-items:center;

  margin-left:6px;

  font-size:12px;

  animation:
    finishPulse
    1.2s infinite;
}

/* =========================================
   FINISH PULSE
========================================= */

@keyframes finishPulse{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.18);
  }

  100%{
    transform:scale(1);
  }
}

/* =========================================
   WINNER GLOW
========================================= */

@keyframes winnerGlow{

  0%{

    box-shadow:
      0 0 12px rgba(255,215,0,.12);
  }

  50%{

    box-shadow:
      0 0 30px rgba(255,215,0,.30);
  }

  100%{

    box-shadow:
      0 0 12px rgba(255,215,0,.12);
  }
}

/* =====================================
   NUMBER WRAP
===================================== */

.mgp-number-wrap{

  display:flex;

  align-items:center;

  gap:6px;
}

/* =====================================
   MINI LAST LAP
===================================== */

.mgp-lastlap{

  min-width:62px;

  height:22px;

  padding:0 6px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:3px;

  background:
    rgba(255,255,255,.06);

  border:
    1px solid rgba(255,255,255,.05);

  color:
    #FFD54A;

  font-size:9px;

  font-weight:800;

  letter-spacing:.02em;

  white-space:nowrap;

  backdrop-filter:
    blur(4px);
}


/* =====================================
   FINISH FLAG
===================================== */

.mgp-finish{

  margin-left:4px;

  font-size:12px;

  line-height:1;

  animation:
    finishPulse
    1.2s infinite;
}

@keyframes finishPulse{

  0%{
    opacity:1;
  }

  50%{
    opacity:.45;
  }

  100%{
    opacity:1;
  }
}

/* =========================================
   BROADCAST GRAPHICS UPGRADE
========================================= */

:root{

  --broadcast-ink:#05070B;
  --broadcast-panel:rgba(5,8,14,.94);
  --broadcast-panel-2:rgba(14,19,30,.92);
  --broadcast-line:rgba(255,255,255,.16);
  --broadcast-muted:rgba(224,234,244,.72);
  --broadcast-gold:#F4C542;
  --broadcast-shadow:
    0 18px 48px rgba(0,0,0,.48),
    0 1px 0 rgba(255,255,255,.08) inset;
}

body,
body *{

  letter-spacing:0 !important;
}

#overlay-root::before{

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.16),
      transparent 18%,
      transparent 76%,
      rgba(0,0,0,.22)
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.018) 0,
      rgba(255,255,255,.018) 1px,
      transparent 1px,
      transparent 78px
    );

  opacity:.9;
}

#overlay-root::after{

  content:"";

  position:absolute;

  inset:18px;

  border-top:
    1px solid rgba(255,255,255,.08);

  border-bottom:
    1px solid rgba(255,255,255,.05);

  pointer-events:none;

  opacity:.46;
}

.mgp-topbar{

  top:118px;
  left:24px;

  width:340px;
  min-height:58px;

  padding:
    11px 16px 12px 18px;

  border-radius:6px;

  background:
    linear-gradient(
      135deg,
      rgba(4,7,12,.98),
      rgba(14,18,28,.95) 55%,
      rgba(30,12,18,.92)
    );

  border:
    1px solid var(--broadcast-line);

  border-left:
    5px solid var(--primary);

  box-shadow:
    var(--broadcast-shadow);

  clip-path:
    polygon(
      0 0,
      calc(100% - 18px) 0,
      100% 18px,
      100% 100%,
      0 100%
    );
}

.mgp-topbar::before{

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.10),
      transparent 32%
    );
}

.mgp-topbar::after{

  content:"";

  position:absolute;

  right:12px;
  top:12px;

  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--success);

  box-shadow:
    0 0 14px rgba(0,208,132,.72);
}

.mgp-rnname{

  max-width:286px;

  color:var(--broadcast-muted);

  font-size:12px;

  font-weight:800;

  line-height:1.1;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}

.mgp-status{

  margin-top:5px;

  color:#fff;

  font-size:20px;

  font-weight:900;

  text-shadow:
    0 2px 14px rgba(0,0,0,.42);
}

.mgp-status.urgent-state{

  color:var(--broadcast-gold);

  animation:
    liveFlash
    900ms
    var(--motion-ease)
    infinite;
}

.mgp-board{

  top:186px;
  left:24px;

  width:340px;

  padding:4px;

  border-radius:6px;

  background:
    linear-gradient(
      180deg,
      rgba(3,6,11,.96),
      rgba(11,16,26,.92)
    );

  border:
    1px solid rgba(255,255,255,.14);

  box-shadow:
    var(--broadcast-shadow);

  backdrop-filter:
    blur(4px);
}

.mgp-board::before{

  content:"TIMING";

  display:flex;

  align-items:center;

  height:18px;

  padding:0 8px;

  margin-bottom:3px;

  color:rgba(255,255,255,.68);

  font-size:9px;

  font-weight:900;

  background:
    linear-gradient(
      90deg,
      rgba(255,48,72,.92),
      rgba(255,48,72,.18) 38%,
      transparent
    );
}

.mgp-row{

  height:34px;

  margin-top:3px;

  padding:
    0 66px 0 8px;

  border-radius:4px;

  background:
    linear-gradient(
      90deg,
      rgba(7,10,15,.98),
      rgba(20,26,36,.96) 52%,
      rgba(4,7,12,.98)
    );

  border:
    1px solid rgba(255,255,255,.08);

  border-left:
    4px solid rgba(255,255,255,.18);

  box-shadow:
    0 5px 14px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.mgp-row::before{

  content:"";

  position:absolute;

  top:0;
  bottom:0;
  left:38%;

  width:58px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.09),
      rgba(255,255,255,0)
    );

  transform:
    skewX(-18deg);

  opacity:.5;
}

.mgp-row:first-child{

  min-height:38px;

  background:
    linear-gradient(
      90deg,
      rgba(18,9,11,.98),
      rgba(50,11,19,.94) 46%,
      rgba(6,8,13,.98)
    );

  border-left-color:var(--primary);

  box-shadow:
    0 8px 22px rgba(0,0,0,.36),
    inset 0 0 20px color-mix(
      in srgb,
      var(--primary) 18%,
      transparent
    );
}

.mgp-row:nth-child(2),
.mgp-row:nth-child(3),
.mgp-row:nth-child(4){

  border-left-color:var(--secondary);
}

.mgp-pos{

  position:relative;

  z-index:1;

  width:26px;

  color:#fff;

  font-size:13px;

  font-weight:900;
}

.mgp-name{

  position:relative;

  z-index:1;

  padding-left:8px;

  font-size:15px;

  font-weight:900;

  line-height:1;
}

.mgp-number-wrap{

  position:relative;

  z-index:1;

  gap:5px;
}

.mgp-number{

  width:40px;
  height:26px;

  margin-left:4px;

  border-radius:4px;

  border:
    1px solid rgba(255,255,255,.22);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 4px 10px rgba(0,0,0,.25);

  font-size:13px;
}

.mgp-lastlap{

  min-width:58px;
  height:22px;

  border-radius:4px;

  background:
    rgba(244,197,66,.13);

  border:
    1px solid rgba(244,197,66,.24);

  color:var(--broadcast-gold);

  font-size:8px;
}

.mgp-info{

  right:6px;

  min-width:60px;
  height:22px;

  display:flex;

  align-items:center;
  justify-content:center;

  padding:0 6px;

  border-radius:4px;

  background:
    rgba(0,0,0,.68);

  border:
    1px solid rgba(255,255,255,.08);

  font-size:9px;

  font-weight:900;
}

.position-up{

  border-left-color:var(--success);
}

.position-down{

  border-left-color:var(--danger);
}

.battle-row{

  border-left-color:var(--broadcast-gold);

  animation:
    battleGlow
    1.2s
    var(--motion-ease)
    infinite;
}

.rider-finished{

  border-left-color:#fff;

  background:
    linear-gradient(
      90deg,
      rgba(24,24,24,.98),
      rgba(70,70,70,.9)
    );
}

.winner-finished{

  border-left-color:var(--broadcast-gold);

  box-shadow:
    0 0 26px rgba(244,197,66,.26),
    inset 0 0 18px rgba(244,197,66,.10);
}

.mgp-finish{

  position:absolute;

  right:8px;

  width:34px;
  height:18px;

  display:flex;

  align-items:center;
  justify-content:center;

  margin:0;

  border-radius:3px;

  background:
    repeating-conic-gradient(
      from 45deg,
      #fff 0 25%,
      #111 0 50%
    )
    50% / 8px 8px;

  color:transparent;

  font-size:0;
}

.mgp-board.compact .mgp-row{

  height:24px;

  padding-right:54px;
}

.mgp-board.compact .mgp-name{

  font-size:11px;
}

.mgp-board.compact .mgp-number{

  width:28px;
  height:18px;
}

.mgp-board.compact .mgp-info{

  min-width:46px;
  height:16px;

  font-size:7px;
}

.fastest-popup{

  left:30px;
  bottom:148px;

  width:320px;

  padding:15px;

  border-radius:8px;

  background:
    linear-gradient(
      135deg,
      rgba(5,7,12,.98),
      rgba(30,11,20,.94)
    );

  border:
    1px solid rgba(255,255,255,.14);

  border-left:
    5px solid var(--primary);

  box-shadow:
    var(--broadcast-shadow);
}

.fastest-popup::before,
.battle-popup::before,
.rider-lowerthird::before,
.weather-content::before,
.trackinfo-wrapper::before{

  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      105deg,
      rgba(255,255,255,.12),
      transparent 20%,
      transparent 72%,
      rgba(255,255,255,.06)
    );

  pointer-events:none;
}

.popup-main{

  position:relative;

  display:flex;

  align-items:center;

  gap:12px;

  margin-top:11px;
}

.popup-title,
.popup-header{

  color:var(--broadcast-muted) !important;

  font-size:11px;

  font-weight:900;
}

.popup-number{

  width:50px;
  height:50px;

  border-radius:6px;

  background:
    linear-gradient(
      180deg,
      var(--primary),
      var(--primary-dark)
    );

  border:
    1px solid rgba(255,255,255,.20);

  font-size:18px;
}

.popup-name{

  max-width:220px;

  font-size:19px;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}

.popup-time{

  color:var(--broadcast-gold);

  font-size:26px;
}

#lowerthird-layer{

  left:30px;
  bottom:72px;
}

.rider-lowerthird{

  position:relative;

  min-width:620px;
  max-width:820px;
  height:78px;

  border-radius:0 8px 8px 0;

  background:
    linear-gradient(
      90deg,
      rgba(5,7,12,.98),
      rgba(22,26,36,.96) 48%,
      rgba(6,8,13,.98)
    );

  border:
    1px solid rgba(255,255,255,.14);

  border-left:
    7px solid var(--primary);

  box-shadow:
    var(--broadcast-shadow);
}

.lt-number{

  width:92px;

  color:#fff;

  background:
    linear-gradient(
      180deg,
      var(--primary),
      var(--primary-dark)
    );

  font-size:34px;
}

.lt-name{

  font-size:30px;

  font-weight:900;
}

.lt-team{

  color:var(--broadcast-gold);

  font-size:14px;

  font-weight:900;
}

.lt-position{

  min-width:108px;

  color:#fff;

  background:
    rgba(255,255,255,.07);

  font-size:36px;
}

.battle-popup-wrap{

  bottom:64px;
}

.battle-popup-title{

  padding:
    5px 14px;

  border-radius:6px;

  background:
    linear-gradient(
      90deg,
      var(--primary),
      var(--broadcast-gold)
    );

  color:#090909;

  font-size:11px;
}

.battle-popup{

  width:560px;
  height:78px;

  padding:0 20px;

  border-radius:8px;

  background:
    linear-gradient(
      135deg,
      rgba(4,7,12,.98),
      rgba(24,26,34,.94)
    );

  border:
    1px solid rgba(255,255,255,.14);

  border-left:
    5px solid var(--primary);

  border-right:
    5px solid var(--secondary);

  box-shadow:
    var(--broadcast-shadow);
}

.battle-driver{

  width:210px;
}

.battle-driver.right{

  align-items:flex-end;

  text-align:right;
}

.battle-name{

  font-size:17px;
}

.battle-time{

  color:var(--broadcast-muted);

  font-size:11px;
}

.battle-center{

  width:92px;
}

.battle-gap{

  min-width:86px;

  padding:7px 8px;

  border-radius:5px;

  background:
    rgba(244,197,66,.13);

  border:
    1px solid rgba(244,197,66,.22);

  color:var(--broadcast-gold);

  font-size:18px;
}

.track-status{

  top:84px;

  min-width:430px;
  height:62px;

  border-radius:8px;

  border:
    1px solid rgba(255,255,255,.18);

  box-shadow:
    var(--broadcast-shadow);
}

.track-status-text{

  font-size:28px;
}

.track-status.checkered{

  background:
    linear-gradient(
      135deg,
      rgba(5,5,5,.98),
      rgba(46,46,46,.94)
    );
}

.track-status.checkered::before{

  background:
    repeating-conic-gradient(
      from 45deg,
      rgba(255,255,255,.18) 0 25%,
      rgba(0,0,0,.10) 0 50%
    )
    50% / 22px 22px;

  opacity:.55;
}

.weather-page{

  top:110px;
  right:34px;

  width:470px;
}

.weather-content{

  border-radius:8px;

  background:
    linear-gradient(
      135deg,
      rgba(5,7,12,.98),
      rgba(18,25,32,.94)
    );

  border:
    1px solid rgba(255,255,255,.14);

  box-shadow:
    var(--broadcast-shadow);

  padding:22px;
}

.weather-title{

  font-size:30px;

  line-height:1;
}

.weather-grid{

  gap:12px;
}

.weather-card{

  height:108px;

  border-radius:8px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.025)
    );

  border:
    1px solid rgba(255,255,255,.12);
}

.weather-label{

  color:var(--broadcast-muted);

  font-size:12px;

  font-weight:900;
}

.weather-value{

  color:#fff;

  font-size:36px;
}

.sg-backdrop{

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.72),
      rgba(0,0,0,.55)
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.035) 0,
      rgba(255,255,255,.035) 1px,
      transparent 1px,
      transparent 96px
    );

  backdrop-filter:
    blur(5px);
}

.sg-wrapper,
.fr-wrapper{

  top:51%;

  max-width:92vw;
}

.sg-title,
.fr-title{

  font-size:70px;

  text-shadow:
    0 10px 34px rgba(0,0,0,.5);
}

.sg-title::after,
.fr-title::after{

  width:320px;

  background:
    linear-gradient(
      90deg,
      var(--primary),
      var(--broadcast-gold)
    );
}

.sg-event,
.fr-event{

  color:var(--broadcast-gold);

  font-size:20px;
}

.sg-session,
.fr-session{

  color:var(--broadcast-muted);

  font-size:14px;
}

.sg-card-modern,
.fr-row{

  border-radius:6px;

  background:
    linear-gradient(
      90deg,
      rgba(5,7,12,.98),
      rgba(20,25,35,.94) 50%,
      rgba(5,7,12,.98)
    );

  border:
    1px solid rgba(255,255,255,.13);

  box-shadow:
    0 12px 28px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.sg-card-modern{

  width:400px;
  height:82px;

  border-left:
    5px solid var(--secondary);
}

.sg-pos,
.fr-pos{

  border-radius:5px;

  color:#fff;

  background:
    linear-gradient(
      180deg,
      var(--primary),
      var(--primary-dark)
    );

  clip-path:none;
}

.sg-no,
.fr-no{

  border-radius:5px;

  background:
    rgba(255,255,255,.07);

  border:
    1px solid rgba(255,255,255,.14);
}

.sg-name,
.fr-name{

  font-size:18px;

  font-weight:900;
}

.fr-columns{

  padding:0 18px 6px;

  color:var(--broadcast-muted);
}

.fr-row{

  min-height:60px;

  border-left:
    5px solid rgba(255,255,255,.16);
}

.fr-winner{

  border-left-color:var(--broadcast-gold);

  box-shadow:
    0 0 32px rgba(244,197,66,.22),
    inset 0 0 16px rgba(244,197,66,.08);
}

.fr-winner .fr-pos{

  background:
    linear-gradient(
      180deg,
      var(--broadcast-gold),
      #B57D13
    );

  color:#050505;
}

.fr-gap,
.fr-bestlap{

  font-size:14px;
}

.sg-sponsored,
.fr-sponsored,
.trackinfo-sponsored{

  color:var(--broadcast-muted);

  font-weight:900;
}

.event-logo{

  top:24px;
  left:26px;

  width:184px;

  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,.46));
}

.sponsor-rotator{

  top:22px;
  right:30px;

  width:190px;
  height:76px;
}

.sponsor-slide{

  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,.46));
}

.trackinfo-wrapper{

  width:1180px;
  height:548px;

  padding:36px;

  border-radius:8px;

  background:
    linear-gradient(
      135deg,
      rgba(5,7,12,.98),
      rgba(18,24,32,.95)
    );

  border:
    1px solid rgba(255,255,255,.14);

  box-shadow:
    var(--broadcast-shadow);
}

.trackinfo-wrapper::after{

  content:"";

  position:absolute;

  inset:0;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.03) 0,
      rgba(255,255,255,.03) 1px,
      transparent 1px,
      transparent 72px
    );

  pointer-events:none;
}

.trackinfo-header,
.trackinfo-content,
.trackinfo-sponsored{

  position:relative;

  z-index:1;
}

.trackinfo-title{

  font-size:28px;
}

.trackinfo-session{

  color:var(--broadcast-gold);
}

.trackinfo-trackname{

  font-size:30px;
}

.trackinfo-spec-card,
.trackinfo-weather-card{

  min-height:78px;

  justify-content:center;

  padding:13px 16px;

  border-radius:6px;

  background:
    rgba(255,255,255,.055);

  border:
    1px solid rgba(255,255,255,.12);
}

.trackinfo-spec-card{

  border-left:
    5px solid var(--primary);
}

.trackinfo-weather-card{

  border-left:
    5px solid var(--secondary);
}

.trackinfo-label,
.trackinfo-weather-card span{

  color:var(--broadcast-muted);

  font-weight:900;
}

.trackinfo-value{

  font-size:46px;
}

.trackinfo-weather-card strong{

  font-size:30px;
}

.trackinfo-map-area{

  min-height:350px;

  border-radius:8px;

  background:
    rgba(255,255,255,.035);

  border:
    1px solid rgba(255,255,255,.10);
}

.trackinfo-map{

  max-width:660px;

  filter:
    drop-shadow(0 0 28px rgba(88,211,255,.28))
    drop-shadow(0 12px 32px rgba(0,0,0,.48));
}

@media (max-width:960px){

  .mgp-topbar,
  .mgp-board{

    transform:
      scale(.82);

    transform-origin:
      top left;
  }

  .sg-wrapper,
  .fr-wrapper,
  .trackinfo-wrapper{

    transform:
      translate(-50%,-50%)
      scale(.72);
  }

  .weather-page{

    transform:
      scale(.82);

    transform-origin:
      top right;
  }
}

/* =========================================
   OPERATOR CORRECTION V2
========================================= */

.event-logo,
.sponsor-rotator{

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}

.event-logo{

  width:190px !important;
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.42)) !important;
}

.sponsor-rotator{

  width:190px !important;
  height:78px !important;
}

.sponsor-slide{

  object-fit:contain !important;
  filter:
    drop-shadow(0 8px 16px rgba(0,0,0,.34)) !important;
}

.mgp-topbar{

  top:118px !important;
  left:24px !important;
  width:438px !important;
  min-width:438px !important;
  height:56px !important;
  border-radius:6px !important;
  background:
    linear-gradient(
      90deg,
      rgba(4,7,11,.96) 0%,
      rgba(14,20,28,.92) 68%,
      rgba(192,23,42,.94) 100%
    ) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 16px 28px rgba(0,0,0,.34) !important;
  overflow:hidden !important;
}

.mgp-topbar::before{

  display:block !important;
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:5px !important;
  background:#ed1c2e !important;
}

.mgp-topbar::after,
.mgp-checker{

  display:none !important;
}

.mgp-topbar-content{

  height:100% !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 132px !important;
  grid-template-rows:29px 17px !important;
  gap:1px 12px !important;
  align-items:center !important;
  padding:5px 12px 5px 22px !important;
}

.mgp-series{

  min-width:0 !important;
  color:#fff !important;
  font-size:22px !important;
  line-height:1 !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.mgp-class{

  grid-column:1 !important;
  grid-row:2 !important;
  min-width:0 !important;
  color:rgba(255,255,255,.70) !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:850 !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.mgp-clock{

  grid-column:2 !important;
  grid-row:1 / span 2 !important;
  justify-self:end !important;
  min-width:122px !important;
  height:28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  border-radius:999px !important;
  color:#07120a !important;
  background:#2be678 !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:950 !important;
  font-variant-numeric:tabular-nums !important;
  text-transform:uppercase !important;
}

.mgp-clock.flag-yellow,
.mgp-clock.flag-safety,
.mgp-clock.flag-warmup{

  color:#111 !important;
  background:#ffe600 !important;
}

.mgp-clock.flag-red,
.mgp-clock.urgent-state{

  color:#fff !important;
  background:#e7192f !important;
}

.mgp-board,
.mgp-board.compact{

  top:180px !important;
  left:24px !important;
  width:342px !important;
  padding:0 !important;
  border-radius:6px !important;
  background:rgba(5,8,12,.70) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 18px 30px rgba(0,0,0,.38) !important;
  overflow:hidden !important;
}

.mgp-board::before,
.mgp-board.compact::before,
.mgp-board::after{

  display:none !important;
  content:none !important;
}

.mgp-row,
.mgp-board.compact .mgp-row{

  height:29px !important;
  min-height:29px !important;
  margin:0 !important;
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) 42px 82px !important;
  align-items:center !important;
  column-gap:0 !important;
  border-radius:0 !important;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.085),
      rgba(255,255,255,.035)
    ) !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

.mgp-board.compact .mgp-row{

  height:24px !important;
  min-height:24px !important;
}

.mgp-row::before,
.mgp-mover,
.mgp-sectors,
.mgp-row-logo{

  display:none !important;
}

.mgp-row:first-child{

  background:
    linear-gradient(
      90deg,
      rgba(244,197,66,.18),
      rgba(255,255,255,.055)
    ) !important;
}

.mgp-pos{

  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#fff !important;
  background:rgba(0,0,0,.34) !important;
  font-size:14px !important;
  font-weight:950 !important;
  font-variant-numeric:tabular-nums !important;
}

.mgp-board.compact .mgp-pos{

  font-size:12px !important;
}

.mgp-name{

  min-width:0 !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  padding:0 8px 0 10px !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
  overflow:hidden !important;
}

.mgp-board.compact .mgp-name{

  font-size:12px !important;
}

.mgp-name-text{

  min-width:0 !important;
  flex:1 1 auto !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.mgp-number{

  width:34px !important;
  height:21px !important;
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:4px !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:inset 0 -8px 12px rgba(0,0,0,.26) !important;
  font-size:13px !important;
  font-weight:950 !important;
  font-variant-numeric:tabular-nums !important;
}

.mgp-board.compact .mgp-number{

  width:33px !important;
  height:19px !important;
  font-size:12px !important;
}

.mgp-info{

  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  padding:0 7px !important;
  color:#f3f3f3 !important;
  background:rgba(0,0,0,.38) !important;
  border:0 !important;
  border-left:1px solid rgba(255,255,255,.08) !important;
  border-radius:0 !important;
  font-size:12px !important;
  font-weight:850 !important;
  font-variant-numeric:tabular-nums !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.mgp-board.compact .mgp-info{

  height:100% !important;
  font-size:11px !important;
}

.mgp-row.position-up,
.mgp-row.position-up .mgp-pos,
.mgp-row.position-up .mgp-name{

  color:#061007 !important;
  background:#2be678 !important;
}

.mgp-row.position-down,
.mgp-row.position-down .mgp-pos,
.mgp-row.position-down .mgp-name{

  color:#111 !important;
  background:#ffe600 !important;
}

.mgp-tower-footer{

  height:34px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.88) !important;
  border-top:1px solid rgba(255,255,255,.20) !important;
}

.mgp-tower-logo{

  width:128px !important;
  max-height:26px !important;
  object-fit:contain !important;
}

.sg-event,
.fr-event{

  max-width:720px !important;
  color:var(--rp-gold) !important;
  font-size:20px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

.sg-session,
.fr-session{

  color:var(--rp-muted) !important;
  font-size:18px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

/* =========================================
   FINAL TOWER CORRECTION
========================================= */

.mgp-topbar{

  top:118px !important;
  left:24px !important;
  width:438px !important;
  min-width:438px !important;
  height:56px !important;
  border-radius:6px !important;
  background:
    linear-gradient(
      90deg,
      rgba(3,5,8,.96) 0%,
      rgba(12,18,25,.91) 68%,
      rgba(193,23,42,.92) 100%
    ) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 16px 28px rgba(0,0,0,.34) !important;
  overflow:hidden !important;
}

.mgp-topbar::before{

  display:block !important;
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:5px !important;
  background:#ed1c2e !important;
}

.mgp-topbar::after{

  display:none !important;
}

.mgp-topbar-content{

  height:100% !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 144px !important;
  grid-template-rows:30px 18px !important;
  gap:1px 14px !important;
  align-items:center !important;
  padding:5px 14px 5px 22px !important;
}

.mgp-series{

  min-width:0 !important;
  color:#ffffff !important;
  font-size:26px !important;
  line-height:1 !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.mgp-class{

  grid-column:1 !important;
  grid-row:2 !important;
  min-width:0 !important;
  color:rgba(255,255,255,.62) !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:850 !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.mgp-checker{

  display:none !important;
}

.mgp-clock{

  grid-column:2 !important;
  grid-row:1 / span 2 !important;
  justify-self:end !important;
  min-width:128px !important;
  height:28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  border-radius:999px !important;
  color:#07120a !important;
  background:#2be678 !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:950 !important;
  font-variant-numeric:tabular-nums !important;
  text-transform:uppercase !important;
}

.mgp-clock.flag-yellow,
.mgp-clock.flag-safety,
.mgp-clock.flag-warmup{

  color:#111 !important;
  background:#ffe600 !important;
}

.mgp-clock.flag-red,
.mgp-clock.urgent-state{

  color:#fff !important;
  background:#e7192f !important;
}

.mgp-board,
.mgp-board.compact{

  top:180px !important;
  left:24px !important;
  width:332px !important;
  padding:0 !important;
  border-radius:6px !important;
  background:rgba(5,8,12,.76) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 18px 30px rgba(0,0,0,.38) !important;
  overflow:hidden !important;
}

.mgp-board::before,
.mgp-board.compact::before,
.mgp-board::after{

  display:none !important;
  content:none !important;
}

.mgp-row,
.mgp-board.compact .mgp-row{

  height:30px !important;
  min-height:30px !important;
  margin:0 !important;
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) 42px 74px !important;
  align-items:center !important;
  column-gap:0 !important;
  border-radius:0 !important;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.035)
    ) !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

.mgp-row::before{

  display:none !important;
}

.mgp-row:first-child{

  background:
    linear-gradient(
      90deg,
      rgba(244,197,66,.18),
      rgba(255,255,255,.05)
    ) !important;
}

.mgp-pos{

  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#fff !important;
  background:rgba(0,0,0,.34) !important;
  font-size:15px !important;
  font-weight:950 !important;
  font-variant-numeric:tabular-nums !important;
}

.mgp-mover,
.mgp-sectors{

  display:none !important;
}

.mgp-name{

  min-width:0 !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  padding:0 7px 0 10px !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
  overflow:hidden !important;
}

.mgp-name-text{

  min-width:0 !important;
  flex:1 1 auto !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.mgp-row-logo{

  width:18px !important;
  height:18px !important;
  flex:0 0 auto !important;
  object-fit:contain !important;
  opacity:.92 !important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.42)) !important;
}

.mgp-number{

  width:34px !important;
  height:21px !important;
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:4px !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    inset 0 -8px 12px rgba(0,0,0,.26) !important;
  font-size:13px !important;
  font-weight:950 !important;
  font-variant-numeric:tabular-nums !important;
}

.mgp-info{

  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  padding:0 7px !important;
  color:#f3f3f3 !important;
  background:rgba(0,0,0,.34) !important;
  border:0 !important;
  border-radius:0 !important;
  font-size:12px !important;
  font-weight:850 !important;
  font-variant-numeric:tabular-nums !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.mgp-row.position-up,
.mgp-row.position-up .mgp-pos,
.mgp-row.position-up .mgp-name{

  color:#061007 !important;
  background:#2be678 !important;
}

.mgp-row.position-down,
.mgp-row.position-down .mgp-pos,
.mgp-row.position-down .mgp-name{

  color:#111 !important;
  background:#ffe600 !important;
}

.fastest-popup{

  left:30px !important;
  bottom:148px !important;
  width:326px !important;
  min-height:84px !important;
  border-radius:6px !important;
  background:rgba(5,10,16,.88) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-left:5px solid #21d36c !important;
  box-shadow:
    0 18px 30px rgba(0,0,0,.38) !important;
  overflow:hidden !important;
}

.fastest-popup::before{

  display:none !important;
}

.popup-title{

  height:23px !important;
  display:flex !important;
  align-items:center !important;
  padding:0 12px !important;
  border-radius:0 !important;
  color:#07120a !important;
  background:#21d36c !important;
  font-size:12px !important;
  font-weight:950 !important;
}

.popup-main{

  display:grid !important;
  grid-template-columns:54px minmax(0,1fr) !important;
  gap:10px !important;
  align-items:center !important;
  min-height:58px !important;
  padding:8px 12px !important;
}

.popup-number{

  width:44px !important;
  height:44px !important;
  border-radius:5px !important;
  font-size:23px !important;
}

.popup-name{

  max-width:none !important;
  font-size:19px !important;
  line-height:1 !important;
}

.popup-time{

  margin-top:2px !important;
  color:#17d8ff !important;
  font-size:29px !important;
  line-height:1 !important;
}

/* =========================================
   REFERENCE TIMING TOWER PACKAGE
========================================= */

.mgp-topbar{

  top:118px;
  left:28px;
  width:286px;
  height:112px;
  min-width:0;
  border-radius:0;
  background:#020202;
  border:0;
  box-shadow:
    0 14px 24px rgba(0,0,0,.42);
  overflow:visible;
}

.mgp-topbar::before,
.mgp-topbar::after{

  display:none;
}

.mgp-topbar-content{

  height:100%;
  display:block;
  padding:12px 12px 10px;
}

.mgp-series{

  color:#fff;
  font-size:29px;
  line-height:.88;
  font-weight:950;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mgp-class{

  margin-top:2px;
  color:#a6a6a6;
  font-size:13px;
  line-height:1;
  font-weight:850;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mgp-checker{

  height:5px;
  margin:7px 0 5px;
  background:
    repeating-linear-gradient(
      90deg,
      #fff 0 4px,
      #050505 4px 8px
    );
  opacity:.92;
}

.mgp-session{

  color:#f4f4f4;
  font-size:13px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
}

.mgp-clock{

  margin-top:2px;
  color:#fff;
  font-size:30px;
  line-height:1;
  font-weight:950;
  font-variant-numeric:tabular-nums;
  text-transform:uppercase;
}

.mgp-clock.flag-yellow,
.mgp-clock.flag-safety,
.mgp-clock.flag-warmup{

  color:#fff200;
}

.mgp-clock.flag-red,
.mgp-clock.urgent-state{

  color:#ff293c;
}

.mgp-clock.flag-checkered,
.mgp-clock.flag-complete{

  color:#fff;
  background:transparent;
  text-shadow:none;
}

.mgp-board{

  top:230px;
  left:28px;
  width:408px;
  padding:32px 0 0;
  border-radius:0;
  background:transparent;
  border:0;
  box-shadow:
    0 14px 26px rgba(0,0,0,.32);
  overflow:visible;
}

.mgp-board::before{

  content:"TIMING";
  top:0;
  left:0;
  right:auto;
  width:292px;
  height:32px;
  display:flex;
  align-items:center;
  padding:0 12px;
  border-radius:0;
  color:white;
  background:#d71928;
  font-size:18px;
  line-height:1;
  font-weight:950;
  text-transform:uppercase;
}

.mgp-board::after{

  display:none;
}

.mgp-row{

  height:28px;
  min-height:28px;
  margin:0;
  display:grid;
  grid-template-columns:32px 26px minmax(0,1fr) 48px 44px 86px;
  align-items:center;
  column-gap:0;
  border-radius:0;
  background:rgba(0,0,0,.76);
  border:0;
  border-bottom:1px solid rgba(255,255,255,.10);
  border-left:0;
  box-shadow:none;
  overflow:visible;
  animation:rpTowerRowIn .28s cubic-bezier(.2,.8,.2,1) both;
}

.mgp-row::before{

  display:none;
}

.mgp-row:first-child,
.mgp-row:nth-child(2),
.mgp-row:nth-child(3),
.mgp-row:nth-child(4){

  min-height:28px;
  border-left:0;
  background:rgba(0,0,0,.76);
}

.mgp-pos{

  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e9e9e9;
  background:rgba(0,0,0,.22);
  font-size:15px;
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

.mgp-mover{

  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:transparent;
  background:rgba(255,255,255,.04);
  font-size:16px;
  font-weight:950;
}

.mgp-row.position-up .mgp-mover{

  color:#050505;
  background:#50ff16;
}

.mgp-row.position-up .mgp-mover::before{

  content:"^";
}

.mgp-row.position-down .mgp-mover{

  color:#050505;
  background:#fff200;
}

.mgp-row.position-down .mgp-mover::before{

  content:"v";
}

.mgp-name{

  min-width:0;
  padding:0 9px;
  color:#ececec;
  font-size:15px;
  line-height:1;
  font-weight:850;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mgp-number-wrap{

  display:contents;
}

.mgp-number{

  width:42px;
  height:24px;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 -12px 14px rgba(0,0,0,.26);
  font-size:15px;
  line-height:1;
  font-weight:950;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 1px rgba(0,0,0,.62);
}

.mgp-sectors{

  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  background:#050505;
}

.mgp-sector{

  width:4px;
  height:22px;
  display:block;
  background:#4b4b4b;
}

.mgp-sector.red{

  background:#e80f21;
}

.mgp-sector.gold{

  background:#f3b500;
}

.mgp-sector.white{

  background:#f2f2f2;
}

.mgp-sector.green{

  background:#42ff18;
}

.mgp-sector.dim{

  background:#555;
}

.mgp-info{

  width:100%;
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0 8px;
  border-radius:0;
  color:#f0f0f0;
  background:#030303;
  border:0;
  font-size:13px;
  line-height:1;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mgp-info.fastest,
.mgp-row.position-up .mgp-info,
.mgp-row.position-down .mgp-info{

  color:#f0f0f0;
  background:#030303;
}

.mgp-row.position-up{

  background:#47ff14;
}

.mgp-row.position-up .mgp-pos,
.mgp-row.position-up .mgp-name{

  color:#071007;
  background:#47ff14;
}

.mgp-row.position-down{

  background:#fff200;
}

.mgp-row.position-down .mgp-pos,
.mgp-row.position-down .mgp-name{

  color:#111;
  background:#fff200;
}

.mgp-row.battle-row{

  animation:
    rpTowerRowIn .28s cubic-bezier(.2,.8,.2,1) both,
    rpTowerPulse 1.1s ease-in-out infinite;
}

.winner-finished,
.rider-finished{

  opacity:1;
}

.mgp-finish{

  right:-42px;
  width:36px;
  height:22px;
  border-radius:0;
}

.mgp-board.compact{

  width:408px;
  padding-top:32px;
}

.mgp-board.compact::before{

  width:292px;
  height:32px;
  font-size:18px;
}

.mgp-board.compact .mgp-row{

  height:24px;
  min-height:24px;
  grid-template-columns:32px 26px minmax(0,1fr) 48px 44px 86px;
}

.mgp-board.compact .mgp-name{

  font-size:13px;
}

.mgp-board.compact .mgp-number{

  width:42px;
  height:21px;
  font-size:13px;
}

.mgp-board.compact .mgp-info{

  height:100%;
  font-size:12px;
}

.mgp-board.compact .mgp-sector{

  height:19px;
}

.fastest-popup{

  left:30px;
  bottom:146px;
  width:430px;
  min-height:92px;
  padding:0;
  border-radius:0;
  background:rgba(0,0,0,.84);
  border:0;
  border-left:5px solid #14d75b;
  box-shadow:
    0 14px 28px rgba(0,0,0,.38);
  overflow:hidden;
}

.fastest-popup::before{

  display:none;
}

.popup-title{

  height:24px;
  display:flex;
  align-items:center;
  padding:0 15px;
  border-radius:0;
  color:#0b1a10 !important;
  background:#18c967;
  font-size:12px;
  line-height:1;
  font-weight:950;
  text-transform:uppercase;
}

.popup-main{

  min-height:68px;
  display:grid;
  grid-template-columns:66px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:10px 14px 12px 16px;
}

.popup-number{

  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  color:#fff;
  background:
    linear-gradient(
      180deg,
      #5b7cff,
      #e50b43
    );
  font-size:25px;
  font-weight:950;
  font-variant-numeric:tabular-nums;
}

.popup-info{

  min-width:0;
}

.popup-name{

  max-width:none;
  color:#fff !important;
  font-size:22px;
  line-height:1.05;
  font-weight:950;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.popup-time{

  margin-top:2px;
  color:#14d8ff;
  font-size:30px;
  line-height:1;
  font-weight:950;
  font-variant-numeric:tabular-nums;
}

@keyframes rpTowerRowIn{

  0%{
    opacity:0;
    transform:translateX(-18px);
  }

  100%{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes rpTowerPulse{

  0%,
  100%{
    filter:brightness(1);
  }

  50%{
    filter:brightness(1.22);
  }
}

@media (prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{

    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* =========================================
   RACEPASS GRAND PRIX BROADCAST PACKAGE
========================================= */

:root{

  --rp-ink:#05070b;
  --rp-panel:rgba(8,12,18,.94);
  --rp-panel-soft:rgba(18,24,32,.88);
  --rp-line:rgba(255,255,255,.15);
  --rp-line-strong:rgba(255,255,255,.28);
  --rp-text:#f7f9fc;
  --rp-muted:#9ea7b4;
  --rp-red:#f2263a;
  --rp-cyan:#20d0ff;
  --rp-gold:#f4c542;
  --rp-green:#29e078;
  --rp-shadow:0 22px 56px rgba(0,0,0,.46);
}

body,
body *{

  letter-spacing:0 !important;
}

.event-logo{

  width:190px;
  height:auto;
  padding:10px 12px;
  border-radius:8px;
  background:
    linear-gradient(
      135deg,
      rgba(0,0,0,.68),
      rgba(18,24,32,.36)
    );
  border:1px solid rgba(255,255,255,.14);
  filter:
    drop-shadow(0 18px 28px rgba(0,0,0,.55));
}

.sponsor-rotator{

  width:210px;
  height:78px;
  padding:8px 12px;
  border-radius:8px;
  background:
    linear-gradient(
      135deg,
      rgba(0,0,0,.60),
      rgba(18,24,32,.38)
    );
  border:1px solid rgba(255,255,255,.13);
}

.sponsor-slide{

  width:100%;
  height:100%;
  object-fit:contain;
}

.mgp-topbar{

  top:116px;
  left:24px;
  min-width:438px;
  height:48px;
  border-radius:8px;
  background:
    linear-gradient(
      90deg,
      rgba(6,9,13,.98),
      rgba(20,29,38,.92) 64%,
      rgba(242,38,58,.88)
    );
  border:1px solid rgba(255,255,255,.16);
  box-shadow:var(--rp-shadow);
  overflow:hidden;
}

.mgp-topbar::before{

  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:var(--rp-red);
}

.mgp-topbar::after{

  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,255,255,.14) 34%,
      transparent 58%
    );
  transform:translateX(-120%);
  animation:rpSweep 4.8s ease-in-out infinite;
  pointer-events:none;
}

.mgp-topbar-content{

  height:100%;
  padding:0 12px 0 18px;
  align-items:center;
  gap:12px;
}

.mgp-rnname{

  max-width:270px;
  color:var(--rp-text);
  font-size:19px;
  font-weight:900;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mgp-status{

  min-width:132px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border-radius:6px;
  color:#05070b;
  background:var(--rp-green);
  font-size:14px;
  font-weight:900;
  text-transform:uppercase;
}

.mgp-status.flag-red,
.mgp-status.urgent-state{

  color:white;
  background:var(--rp-red);
}

.mgp-status.flag-yellow,
.mgp-status.flag-safety,
.mgp-status.flag-warmup{

  color:#05070b;
  background:var(--rp-gold);
}

.mgp-status.flag-checkered,
.mgp-status.flag-complete{

  color:#05070b;
  background:
    repeating-conic-gradient(
      from 45deg,
      #fff 0 25%,
      #050505 0 50%
    ) 50% / 14px 14px;
  text-shadow:0 1px 0 rgba(255,255,255,.34);
}

.mgp-board{

  top:178px;
  left:24px;
  width:334px;
  padding:40px 7px 8px;
  border-radius:8px;
  background:
    linear-gradient(
      180deg,
      rgba(5,8,12,.96),
      rgba(10,16,22,.90)
    );
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--rp-shadow);
  overflow:visible;
}

.mgp-board::before{

  content:"TIMING";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:32px;
  display:flex;
  align-items:center;
  padding:0 12px;
  border-radius:8px 8px 0 0;
  color:white;
  background:
    linear-gradient(
      90deg,
      var(--rp-red),
      #9b111e 72%,
      rgba(255,255,255,.08)
    );
  font-size:15px;
  font-weight:900;
  text-transform:uppercase;
}

.mgp-board::after{

  content:"";
  position:absolute;
  top:32px;
  left:0;
  right:0;
  height:1px;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.46),
      transparent
    );
}

.mgp-row{

  height:35px;
  min-height:35px;
  margin:0 0 4px;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 54px 72px;
  align-items:center;
  column-gap:6px;
  border-radius:6px;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.11),
      rgba(255,255,255,.045)
    );
  border:1px solid rgba(255,255,255,.10);
  border-left:4px solid rgba(255,255,255,.22);
  box-shadow:0 6px 14px rgba(0,0,0,.24);
  overflow:hidden;
}

.mgp-row::before{

  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.14),
      transparent 38%
    );
  opacity:.55;
  pointer-events:none;
}

.mgp-row:first-child{

  min-height:39px;
  background:
    linear-gradient(
      90deg,
      rgba(244,197,66,.26),
      rgba(255,255,255,.07)
    );
  border-left-color:var(--rp-gold);
}

.mgp-row:nth-child(2),
.mgp-row:nth-child(3),
.mgp-row:nth-child(4){

  border-left-color:var(--rp-cyan);
}

.mgp-pos{

  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--rp-text);
  font-size:17px;
  font-weight:950;
}

.mgp-name{

  min-width:0;
  color:var(--rp-text);
  font-size:15px;
  font-weight:950;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mgp-number-wrap{

  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-width:0;
}

.mgp-number{

  width:42px;
  height:23px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  color:white;
  box-shadow:
    inset 0 -10px 18px rgba(0,0,0,.24),
    0 5px 12px rgba(0,0,0,.28);
  font-size:14px;
  font-weight:950;
}

.mgp-info{

  width:100%;
  min-width:0;
  height:23px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 5px;
  border-radius:4px;
  color:var(--rp-text);
  background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.10);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mgp-info.fastest,
.mgp-row.position-up .mgp-info{

  color:#05070b;
  background:var(--rp-green);
}

.mgp-row.position-down .mgp-info{

  color:white;
  background:var(--rp-red);
}

.mgp-row.battle-row{

  border-left-color:var(--rp-gold);
  animation:rpBattlePulse 1.4s ease-in-out infinite;
}

.mgp-lastlap{

  position:absolute;
  right:78px;
  min-width:74px;
  height:23px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  color:#05070b;
  background:var(--rp-cyan);
  font-size:11px;
  font-weight:900;
}

.rider-finished{

  opacity:.88;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.09),
      rgba(255,255,255,.025)
    );
}

.winner-finished{

  opacity:1;
  border-left-color:var(--rp-gold);
  box-shadow:
    0 0 24px rgba(244,197,66,.24),
    0 6px 18px rgba(0,0,0,.30);
}

.mgp-finish{

  position:absolute;
  right:78px;
  top:50%;
  width:38px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-50%);
  border-radius:4px;
  color:#05070b;
  background:
    repeating-conic-gradient(
      from 45deg,
      #fff 0 25%,
      #050505 0 50%
    ) 50% / 10px 10px;
  box-shadow:0 0 18px rgba(255,255,255,.18);
  font-size:0;
  font-weight:950;
  overflow:hidden;
}

.mgp-finish::after{

  content:"FIN";
  padding:1px 5px;
  border-radius:3px;
  color:#05070b;
  background:rgba(255,255,255,.86);
  font-size:10px;
  font-weight:950;
}

.mgp-board.compact{

  width:286px;
  padding-top:34px;
}

.mgp-board.compact::before{

  height:28px;
  font-size:13px;
}

.mgp-board.compact .mgp-row{

  height:28px;
  min-height:28px;
  grid-template-columns:30px minmax(0,1fr) 40px 48px;
}

.mgp-board.compact .mgp-name{

  font-size:12px;
}

.mgp-board.compact .mgp-number{

  width:32px;
  height:19px;
  font-size:12px;
}

.mgp-board.compact .mgp-info{

  height:19px;
  font-size:10px;
}

.sg-backdrop{

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(32,208,255,.16),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      rgba(0,0,0,.68),
      rgba(5,8,12,.42)
    );
}

.sg-wrapper,
.fr-wrapper,
.trackinfo-wrapper{

  border-radius:8px;
  background:
    linear-gradient(
      135deg,
      rgba(5,8,12,.97),
      rgba(18,24,33,.93)
    );
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    var(--rp-shadow),
    inset 0 1px 0 rgba(255,255,255,.10);
  overflow:hidden;
}

.sg-wrapper::before,
.fr-wrapper::before,
.trackinfo-wrapper::before{

  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(242,38,58,.22),
      transparent 26%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.035) 0,
      rgba(255,255,255,.035) 1px,
      transparent 1px,
      transparent 82px
    );
  pointer-events:none;
}

.sg-header,
.fr-header,
.trackinfo-header{

  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px 24px;
  align-items:end;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.sg-title,
.fr-title,
.trackinfo-title{

  color:var(--rp-text);
  font-size:58px;
  line-height:.96;
  font-weight:950;
  text-transform:uppercase;
  text-shadow:0 14px 28px rgba(0,0,0,.42);
}

.sg-title::after,
.fr-title::after,
.trackinfo-title::after{

  height:5px;
  width:220px;
  border-radius:4px;
  background:
    linear-gradient(
      90deg,
      var(--rp-red),
      var(--rp-cyan)
    );
}

.sg-event,
.fr-event,
.trackinfo-session{

  color:var(--rp-gold);
  font-size:19px;
  font-weight:900;
  text-transform:uppercase;
}

.sg-session,
.fr-session,
.trackinfo-trackname{

  color:var(--rp-muted);
  font-size:18px;
  font-weight:900;
  text-transform:uppercase;
}

.sg-sponsored,
.fr-sponsored,
.trackinfo-sponsored{

  justify-self:end;
  align-self:center;
  min-width:190px;
  min-height:64px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:5px;
  padding:8px 12px;
  border-radius:7px;
  color:var(--rp-muted);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}

.sg-sponsored img,
.fr-sponsored img,
.trackinfo-sponsored img{

  max-width:152px;
  max-height:36px;
  object-fit:contain;
}

.sg-grid,
.fr-list,
.trackinfo-content{

  position:relative;
  z-index:1;
}

.sg-row{

  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.sg-card-modern{

  width:auto;
  max-width:100%;
  min-height:134px;
  padding:18px;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  grid-template-rows:auto 1fr;
  gap:8px 14px;
  border-radius:8px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.13),
      rgba(255,255,255,.045)
    );
  border:1px solid rgba(255,255,255,.15);
  border-left:5px solid var(--rp-red);
  box-shadow:0 16px 30px rgba(0,0,0,.28);
}

.sg-card-modern::before{

  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      125deg,
      rgba(255,255,255,.16),
      transparent 42%
    );
  pointer-events:none;
}

.sg-pos{

  grid-column:1;
  width:64px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  color:white;
  background:var(--rp-red);
  font-size:18px;
  font-weight:950;
}

.sg-no{

  grid-column:1;
  grid-row:2;
  align-self:end;
  width:64px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  color:#05070b;
  background:var(--rp-gold);
  font-size:34px;
  font-weight:950;
}

.sg-info{

  grid-column:2;
  grid-row:1 / span 2;
  min-width:0;
  display:flex;
  align-items:center;
}

.sg-name{

  color:var(--rp-text);
  font-size:26px;
  line-height:1.05;
  font-weight:950;
  text-transform:uppercase;
  overflow-wrap:anywhere;
}

.fr-wrapper{

  width:1280px;
  padding:34px;
}

.fr-columns{

  height:34px;
  display:grid;
  grid-template-columns:70px 66px minmax(220px,1fr) 72px 118px 92px 92px 128px 118px;
  align-items:center;
  gap:8px;
  padding:0 14px;
  color:var(--rp-muted);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:6px;
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
}

.fr-list{

  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.fr-row{

  min-height:58px;
  display:grid;
  grid-template-columns:70px 66px minmax(220px,1fr) 72px 118px 92px 92px 128px 118px;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border-radius:7px;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.045)
    );
  border:1px solid rgba(255,255,255,.11);
  border-left:5px solid rgba(255,255,255,.20);
}

.fr-row > div,
.fr-columns > div{

  min-width:0;
}

.fr-pos,
.fr-no{

  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  font-weight:950;
}

.fr-pos{

  color:white;
  background:var(--rp-red);
}

.fr-no{

  color:#05070b;
  background:var(--rp-gold);
}

.fr-name{

  min-width:0;
  color:var(--rp-text);
  font-size:20px;
  font-weight:950;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.fr-laps,
.fr-lastlap,
.fr-diff,
.fr-gap,
.fr-total,
.fr-bestlap{

  min-width:0;
  color:var(--rp-text);
  font-size:15px;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.fr-winner{

  border-left-color:var(--rp-gold);
  background:
    linear-gradient(
      90deg,
      rgba(244,197,66,.24),
      rgba(255,255,255,.07)
    );
}

.fr-winner .fr-pos{

  color:#05070b;
  background:var(--rp-gold);
}

.trackinfo-wrapper{

  width:1188px;
  height:548px;
  padding:34px;
}

.trackinfo-content{

  margin-top:24px;
  display:grid;
  grid-template-columns:290px minmax(0,1fr) 250px;
  gap:22px;
  align-items:stretch;
}

.trackinfo-specs,
.trackinfo-right{

  display:flex;
  flex-direction:column;
  gap:10px;
}

.trackinfo-spec-card,
.trackinfo-weather-card{

  min-height:78px;
  padding:12px 16px;
  border-radius:7px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.11),
      rgba(255,255,255,.04)
    );
  border:1px solid rgba(255,255,255,.12);
}

.trackinfo-spec-card{

  border-left:5px solid var(--rp-red);
}

.trackinfo-weather-card{

  border-left:5px solid var(--rp-cyan);
}

.trackinfo-label,
.trackinfo-weather-card span{

  color:var(--rp-muted);
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
}

.trackinfo-value,
.trackinfo-weather-card strong{

  color:var(--rp-text);
  font-weight:950;
}

.trackinfo-value{

  font-size:40px;
}

.trackinfo-weather-card strong{

  font-size:28px;
}

.trackinfo-map-area{

  min-height:344px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(32,208,255,.12),
      transparent 54%
    ),
    rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.11);
}

.trackinfo-map{

  max-width:100%;
  max-height:330px;
  object-fit:contain;
  filter:
    drop-shadow(0 0 24px rgba(32,208,255,.26))
    drop-shadow(0 16px 34px rgba(0,0,0,.52));
}

.trackinfo-sponsored{

  position:absolute;
  right:34px;
  bottom:24px;
}

.rider-lowerthird{

  min-width:660px;
  height:92px;
  border-radius:8px;
  background:
    linear-gradient(
      90deg,
      rgba(5,8,12,.98),
      rgba(22,31,40,.94)
    );
  border:1px solid rgba(255,255,255,.15);
  border-left:6px solid var(--rp-red);
  box-shadow:var(--rp-shadow);
  overflow:hidden;
}

.lt-number{

  width:92px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#05070b;
  background:var(--rp-gold);
  font-size:44px;
  font-weight:950;
}

.lt-content{

  min-width:0;
  padding:0 18px;
}

.lt-name{

  max-width:360px;
  color:var(--rp-text);
  font-size:30px;
  font-weight:950;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lt-team{

  color:var(--rp-muted);
  font-size:14px;
  font-weight:900;
  text-transform:uppercase;
}

.lt-position,
.lt-gap{

  min-width:74px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:12px;
  border-radius:6px;
  font-weight:950;
}

.lt-position{

  color:white;
  background:var(--rp-red);
}

.lt-gap{

  color:#05070b;
  background:var(--rp-cyan);
}

.fastest-popup,
.winner-popup,
.battle-popup{

  border-radius:8px;
  background:
    linear-gradient(
      135deg,
      rgba(5,8,12,.98),
      rgba(20,28,38,.94)
    );
  border:1px solid rgba(255,255,255,.16);
  border-left:6px solid var(--rp-green);
  box-shadow:var(--rp-shadow);
}

.winner-popup{

  border-left-color:var(--rp-gold);
}

.popup-title,
.popup-header,
.battle-popup-title{

  border-radius:6px;
  color:#05070b;
  background:var(--rp-green);
  font-weight:950;
  text-transform:uppercase;
}

.winner-popup .popup-header{

  background:var(--rp-gold);
}

.popup-name,
.battle-name{

  color:var(--rp-text);
  font-weight:950;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.popup-time,
.battle-time{

  color:var(--rp-cyan);
  font-weight:900;
}

.track-status{

  min-width:470px;
  height:74px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--rp-shadow);
}

.track-status-text{

  font-size:30px;
  font-weight:950;
  text-transform:uppercase;
}

.track-status.checkered::before{

  opacity:.58;
}

.race-finished::before{

  opacity:.94;
}

.race-finished::after{

  content:"RACE FINISHED";
  position:fixed;
  left:50%;
  top:48%;
  z-index:99999;
  width:min(760px,86vw);
  height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate(-50%,-50%);
  border-radius:8px;
  color:#05070b;
  background:
    linear-gradient(
      90deg,
      var(--rp-gold),
      #fff2a8,
      var(--rp-gold)
    );
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 28px 78px rgba(0,0,0,.55),
    0 0 42px rgba(244,197,66,.25);
  font-size:44px;
  font-weight:950;
  text-transform:uppercase;
  animation:rpFinishIn .56s cubic-bezier(.2,.9,.2,1) both;
}

@keyframes rpSweep{

  0%{ transform:translateX(-120%); }
  46%{ transform:translateX(120%); }
  100%{ transform:translateX(120%); }
}

@keyframes rpBattlePulse{

  0%,
  100%{
    box-shadow:0 6px 14px rgba(0,0,0,.24);
  }

  50%{
    box-shadow:
      0 0 24px rgba(244,197,66,.24),
      0 6px 14px rgba(0,0,0,.24);
  }
}

@keyframes rpFinishIn{

  0%{
    opacity:0;
    transform:translate(-50%,-44%) scale(.96);
  }

  100%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
}

@media (max-width:960px){

  .mgp-topbar,
  .mgp-board{

    transform:scale(.78);
    transform-origin:top left;
  }

  .sg-wrapper,
  .fr-wrapper,
  .trackinfo-wrapper{

    transform:
      translate(-50%,-50%)
      scale(.68);
  }

  .rider-lowerthird{

    transform:scale(.78);
    transform-origin:bottom left;
  }
}

/* =========================================
   OPERATOR CORRECTION V3 EOF
========================================= */

.event-logo,
.sponsor-rotator{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}

.event-logo{
  width:190px !important;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.42)) !important;
}

.sponsor-rotator{
  width:190px !important;
  height:78px !important;
}

.mgp-topbar{
  top:118px !important;
  left:24px !important;
  width:438px !important;
  min-width:438px !important;
  height:56px !important;
  border-radius:6px !important;
  background:linear-gradient(90deg, rgba(4,7,11,.96) 0%, rgba(14,20,28,.92) 68%, rgba(192,23,42,.94) 100%) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 16px 28px rgba(0,0,0,.34) !important;
  overflow:hidden !important;
}

.mgp-topbar::before{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:5px !important;
  background:#ed1c2e !important;
}

.mgp-topbar::after,
.mgp-checker{
  display:none !important;
}

.mgp-topbar-content{
  height:100% !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 132px !important;
  grid-template-rows:29px 17px !important;
  gap:1px 12px !important;
  align-items:center !important;
  padding:5px 12px 5px 22px !important;
}

.mgp-series{
  min-width:0 !important;
  color:#fff !important;
  font-size:22px !important;
  line-height:1 !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.mgp-class{
  grid-column:1 !important;
  grid-row:2 !important;
  min-width:0 !important;
  color:rgba(255,255,255,.70) !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:850 !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.mgp-clock{
  grid-column:2 !important;
  grid-row:1 / span 2 !important;
  justify-self:end !important;
  min-width:122px !important;
  height:28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  border-radius:999px !important;
  color:#07120a !important;
  background:#2be678 !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:950 !important;
  font-variant-numeric:tabular-nums !important;
  text-transform:uppercase !important;
}

.mgp-clock.flag-yellow,
.mgp-clock.flag-safety,
.mgp-clock.flag-warmup{
  color:#111 !important;
  background:#ffe600 !important;
}

.mgp-clock.flag-red,
.mgp-clock.urgent-state{
  color:#fff !important;
  background:#e7192f !important;
}

.mgp-board,
.mgp-board.compact{
  top:180px !important;
  left:24px !important;
  width:342px !important;
  padding:0 !important;
  border-radius:6px !important;
  background:rgba(5,8,12,.70) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 18px 30px rgba(0,0,0,.38) !important;
  overflow:hidden !important;
}

.mgp-board::before,
.mgp-board.compact::before,
.mgp-board::after{
  display:none !important;
  content:none !important;
}

.mgp-row,
.mgp-board.compact .mgp-row{
  height:29px !important;
  min-height:29px !important;
  margin:0 !important;
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) 42px 82px !important;
  align-items:center !important;
  column-gap:0 !important;
  border-radius:0 !important;
  background:linear-gradient(90deg, rgba(255,255,255,.085), rgba(255,255,255,.035)) !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

.mgp-board.compact .mgp-row{
  height:24px !important;
  min-height:24px !important;
}

.mgp-row::before,
.mgp-mover,
.mgp-sectors,
.mgp-row-logo{
  display:none !important;
}

.mgp-pos{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#fff !important;
  background:rgba(0,0,0,.34) !important;
  font-size:14px !important;
  font-weight:950 !important;
  font-variant-numeric:tabular-nums !important;
}

.mgp-board.compact .mgp-pos{
  font-size:12px !important;
}

.mgp-name{
  min-width:0 !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  padding:0 8px 0 10px !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
  overflow:hidden !important;
}

.mgp-board.compact .mgp-name{
  font-size:12px !important;
}

.mgp-name-text{
  min-width:0 !important;
  flex:1 1 auto !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.mgp-number{
  width:34px !important;
  height:21px !important;
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:4px !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:inset 0 -8px 12px rgba(0,0,0,.26) !important;
  font-size:13px !important;
  font-weight:950 !important;
  font-variant-numeric:tabular-nums !important;
}

.mgp-board.compact .mgp-number{
  width:33px !important;
  height:19px !important;
  font-size:12px !important;
}

.mgp-info{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  padding:0 7px !important;
  color:#f3f3f3 !important;
  background:rgba(0,0,0,.38) !important;
  border:0 !important;
  border-left:1px solid rgba(255,255,255,.08) !important;
  border-radius:0 !important;
  font-size:12px !important;
  font-weight:850 !important;
  font-variant-numeric:tabular-nums !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.mgp-board.compact .mgp-info{
  height:100% !important;
  font-size:11px !important;
}

.mgp-tower-footer{
  height:34px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.88) !important;
  border-top:1px solid rgba(255,255,255,.20) !important;
}

.mgp-tower-logo{
  width:128px !important;
  max-height:26px !important;
  object-fit:contain !important;
}

.sg-event,
.fr-event{
  max-width:720px !important;
  color:var(--rp-gold) !important;
  font-size:20px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

.sg-session,
.fr-session{
  color:var(--rp-muted) !important;
  font-size:18px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}