:root {
    --f1-warm-red: #ff1e00;
    --f1-carbon-black: #15151e;
    --f1-off-white: #f7f4f1;
    --f1-background: #1b1b1b;
    --f1-background-alt: #7f7f7f;
    --f1-hivis-white: #ffffff;
    --f1-timing-rbr: #0000EB;
    --f1-timing-amg: #1ac1b1;
    --f1-timing-mcl: #fd8609;
    --f1-timing-fri: #d10009;
    --f1-timing-ast: #0b5e4f;
    --f1-timing-trs: #1c32c3;
    --f1-timing-alf: #69e444;
    --f1-timing-alp: #0e79ff;
    --f1-timing-has: #ffffff;
    --f1-timing-wil: #0000A0;
    --f1-timing-yellow: #ffff1b;
    --f1-timing-green: #22ff08;
    --f1-timing-purple: #f700fa;
    --f1-timing-orange: #ed7609;
    --f1-timing-cyan: #21ffff;
    --f1-timing-red: #fb0006;
    --f1-timing-row: #343444;
    --f1-timing-alt: #212130;

    --rbr-blue: #001a30;
    --rbr-red: #ea1d2d;
    --rbr-yellow: #fcd700;
    --rbr-grey: #a8a9ac;

    --orbr-neutral20: #F5F4F2;
    --orbr-neutral50: #D4CFCA;
    --orbr-ocean180: #13212c;
    --orbr-ocean190: #0b171f;
    --orbr-oracle: #c74634;

    --ut-header-background-colour: var(--rbr-grey);

    --bg-grad: linear-gradient(0deg, rgba(19, 33, 44, 0.5) 15%, rgba(19, 33, 44, 0.8) 40%);
}

body {
    color: var(--f1-hivis-white);
    font-family: "formula1display-regular", Roboto, Arial, Helvetica, sans-serif;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    overflow: auto;
    min-height: 100vh;
    flex-direction: column;
    background-color: var(--rbr-blue);
}

.f_f1 {
    font-family: "titillium_webregular", Roboto, Arial, Helvetica, sans-serif;
}

.f1_timing {
    font-family: "formula1display-regular", Roboto, Arial, Helvetica, sans-serif;
}

.f_venera {
    font-family: "venera-100", Roboto, Arial, Helvetica, sans-serif;
    font-size: 2em;
    font-weight: 100;
}

.f_venera3 {
    font-family: "venera-300", Roboto, Arial, Helvetica, sans-serif;
    font-size: 2em;
    font-weight: 300;
}

.f_venera5 {
    font-family: "venera-500", Roboto, Arial, Helvetica, sans-serif;
    font-size: 3em;
    font-weight: 500;
}

.f_venera7 {
    font-family: "venera-700", Roboto, Arial, Helvetica, sans-serif;
    font-size: 3.5em;
    font-weight: 700;
}

.f_venera9 {
    font-family: "venera-900", Roboto, Arial, Helvetica, sans-serif;
    font-size: 5em;
    font-weight: 900;
}

.f_techmono {
    font-family: "techmono", Roboto, Arial, Helvetica, sans-serif;
    font-size: 2em;
}

.f_digital7 {
    font-family: "digital7", Roboto, Arial, Helvetica, sans-serif;
}

.disclaim {
    color: var(--f1-hivis-white);
    font-family: "titillium_webregular", Roboto, Arial, Helvetica, sans-serif;
}

.formf {
    color: var(--f1-warm-red);
}

.formm {
    color: var(--f1-warm-red);
}

.formm input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.txt-rbr {
    color: var(--f1-timing-rbr);
}

.txt-amg {
    color: var(--f1-timing-amg);
}

.txt-mcl {
    color: var(--f1-timing-mcl);
}

.txt-fri {
    color: var(--f1-timing-fri);
}

.txt-ast {
    color: var(--f1-timing-ast);
}

.txt-trs {
    color: var(--f1-timing-trs);
}

.txt-alf {
    color: var(--f1-timing-alf);
}

.txt-alp {
    color: var(--f1-timing-alp);
}
.txt-has {
    color: var(--f1-timing-has);
}

.txt-wil {
    color: var(--f1-timing-wil);
}

.txt-yel {
    color: var(--f1-timing-yellow);
}

.txt-pur {
    color: var(--f1-timing-purple);
}

.txt-cyn {
    color: var(--f1-timing-cyan);
}

.txt-org {
    color: var(--f1-timing-orange);
}

.txt-red {
    color: var(--f1-timing-red);
}

.txt-grn {
    color: var(--f1-timing-green);
}

.txt-wht {
    color: var(--f1-off-white);
}

.txt-hvw {
    color: var(--f1-hivis-white);
}

.txt-gry {
    color: var(--f1-background-alt);
}

.txt-rbr-yel {
    color: var(--rbr-yellow);
}

.txt-rbr-red {
    color: var(--rbr-red);
}

.txt-rbr-gry {
    color: var(--rbr-grey);
}

.max {
    color: var(--f1-timing-orange);
}

.laptime {
    min-width: 80px;
    font-family: "titillium_webregular", Roboto, Arial, Helvetica, sans-serif;
    font-size: 0.85em;
}

.time-white {
    color: var(--f1-hivis-white);
}

.time-yellow {
    color: var(--f1-timing-yellow);
}

.time-orange {
    color: var(--f1-timing-orange);
}

.time-purple {
    color: var(--f1-timing-purple);
}

.time-green {
    color: var(--f1-timing-green);
}

.l_vert {
    border-left: 6px solid;
    height: 4px;
    margin-right: 8px;
}

.t-Region-body {
    color: #FFFFFF;
    background-color: transparent; 
}

.t-ButtonRegion-col {
    color: #FFFFFF;
    background-color: var(--rbr-blue); 
}
.t-ButtonRegion-wrap {
    color: #FFFFFF;
    background-color: var(--rbr-blue); 
}
.t-Header-branding {
    background-color: transparent; 
    border: 0px;
}

.t-Region-header {
    background-color: var(--rbr-blue);
}

.t-Region-title {
    font-family: "techmono";
    font-size: large;
    font-weight: 300;
}

.t-Report-colHead {
    font-family: "titillium_webregular", Roboto, Arial, Helvetica, sans-serif;
    font-size: 1.0em;
    background-color: var(--f1-carbon-black);
    color: var(--f1-background-alt);
}

.t-Report-cell {
    font-family: "titillium_webregular", Roboto, Arial, Helvetica, sans-serif;
    font-size: 1.1em;
}

.drivern {
    font-family: "formula1display-bold", Roboto, Arial, Helvetica, sans-serif;
    font-size: 0.95em;
}

.l_vert {
    border-left: 6px solid;
    height: 4px;
    margin-right: 8px;
}

.turn-label {
    font-family: "formula1display-bold", Roboto, Arial, Helvetica, sans-serif;
    color: var(--rbr-grey);
    font-size: 1em;
    vertical-align: middle;
}

.turn-number {
    font-family: "formula1display-bold", Roboto, Arial, Helvetica, sans-serif;
    color: var(--rbr-grey);
    font-size: 1.4em;
    vertical-align: middle;
}

.info {
    width: 140px; 
    min-height: 80px; 
    background-color: var(--f1-background-alt); 
    text-align: center;
    margin: 50 50 50 50;
}

.esports {
  height: 100vh;  /*Not necessary, but we do want it this way*/
  padding: 0; /* No padding */
  margin: 0; /* No margins */
  z-index: 0;
  overflow: hidden;
  object-fit: cover;
  position: absolute;
  background-size: cover;   /* Cover all available space*/
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(RBR24/paintSplash_small.png);
}

.background-container {
  position: absolute;
  z-index: 0;
  width: 100vw;
  height:100vh;
  overflow:hidden;
}

/* Sticker top right */ 
.sticker-top-right {
    z-index: 1;
    position: fixed; 
    top: 2.5vh;
    right: 0px; 
    min-width: 15vw;
    height: 8vh;
    overflow: hidden;
    visibility: visible;
    content: url(RBR24/stickerTopRight.svg);
}

.graphics-tape1-right {
    z-index: 0;
    position: fixed;
    top: 1vh;
    right: 2vw;
    min-width: 5vw;
    height: 125vh;
    overflow: hidden;
    visibility: visible;
    content: url(RBR24/tapeRight_1.svg);
}

.graphics-tape2-right {
    z-index: 0;
    position: fixed;
    top:-12.5vh;
    right: 3vw;
    min-width: 5vw;
    height: 125vh;
    overflow:hidden;
    visibility: visible;
    content: url(RBR24/tapeRight_2.svg);
}

.graphics-checkerboard-left {
    z-index: -1;
    position: absolute;
    top:0;
    left:0;
    min-width: 2vw;
    height: 175vh;
    content: url(RBR24/checkerboardLeft.svg);
    overflow:hidden;
}

.graphics-checkerboard-right {
    z-index: -1;
    position: absolute;
    top:0;
    right:0;
    min-width: 2vw;
    height: 175vh;
    content: url(RBR24/checkerboardLeft.svg);
    overflow:hidden;
    visibility: hidden;
}

.esports .t-Region-header {
    background-color: transparent;
}

.esports .t-ButtonRegion-wrap {
    background-color: transparent;
}
.esports .t-ButtonRegion-col--content {
    background-color: transparent;
}

.esports .t-ButtonRegion-col--left {
    background-color: transparent;
}

.esports .t-ButtonRegion-buttons {
    background-color: transparent;
}

.esports .leader {
    min-height: 455px;
    background: var(--bg-grad);
    z-index: 0;
    position: absolute;
    width: 55vw;
}

.leaderboard-selector {
    position: fixed;
    z-index: 3;
    overflow: hidden;
    bottom: 18vh;
}

.profile img {
    position: fixed;
    z-index: 1;
    height: 200px;
    right: 18vw;
    top: 3vh;
}

.content-bg {
    background: var(--bg-grad);
    position: relative;
    width: 90vw;
    z-index: 0;
}

.content-nw {
    background: var(--bg-grad);
    position: relative;
    z-index: 0;
}

.circuit {
    position: relative;
    color: var(--f1-hivis-white);
    font-family: "titillium_webregular", Roboto, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
}

.circuit img {
    max-height: 40px;
    position: absolute;
    top: -45px;
    left: 0;
}

.rank {
     cursor: zoom-in;
}

.t-Report--altRowsDefault .t-Report-report tr:nth-child(even) {
    background-color: var(--f1-timing-row);
}
.t-Report--altRowsDefault .t-Report-report tr:nth-child(odd) {
    background-color: var(--f1-timing-alt);
}

.t-Report-report {
    position: relative;
    z-index: 1;
}

.stat-label {
    font-family: "techmono";
    font-weight: 300;
    color: var(--rbr-grey);
    font-size: 1.2em;
    vertical-align: middle;
}

.stat-number {
    font-family: "formula1display-bold", Roboto, Arial, Helvetica, sans-serif;
    color: var(--rbr-red);
    font-size: 3.9em;
    vertical-align: middle;
}

.fbutton {
    color: var(--rbr-yellow);
    background-color: var(--rbr-grey);
    font-family: "formula1display-regular";
    font-size: 36px;
    border-radius: 14px;
    padding: 15px 50px;
    cursor: pointer
}

.fbutton:hover {
    color: var(var(--rbr-blue));
}

.t-Form-error {
    color: var(--rbr-yellow);
    background-color: var(--orbr-ocean190);
}