:root{--clr-base: rgba(255,255,255,.96);--clr-dark: #0C1128;--clr-primary: #F400EE;--clr-secondary: #6600D1;--clr-tertiary: #ffb000;--clr-grad: linear-gradient(135deg, #ffb000 0%, #f400ee 50%, #6600d1 105%)}body{background:#faf9f7;background:linear-gradient(150deg,#faf9f7 0%,#bdb5a4 100%);background-attachment:fixed;color:var(--clr-dark);margin:0}#app{display:flex;flex-direction:column;min-height:100vh}h2{span {font-weight: 700; color: var(--clr-secondary);}}.topBar{position:fixed;width:100%;height:8px;background:var(--clr-grad);z-index:999}.header{padding:1.5rem 0 1.25rem;background-image:linear-gradient(165deg,rgba(12,17,40,.05) 25%,rgba(101,0,209,.2) 100%);box-shadow:inset 0 -12px 12px #2f00610d;margin-bottom:1.5rem}.header .logo{max-width:240px;filter:drop-shadow(2px 2px 4px rgb(0 0 0 / .15))}.header .subtitle{display:inline-block;color:var(--clr-secondary);letter-spacing:.75px;font-weight:400;border-radius:0 8px 8px 0;padding:3px 15px 4px 0;margin-top:.5rem;margin-bottom:0;position:relative;background:rgba(255,255,255,.75);box-shadow:0 3px #2f00610d;transform:skew(-16deg);border-bottom:1px solid rgba(102,0,209,.5);border-right:1px solid rgba(102,0,209,.5)}.header .subtitle:after{content:"";position:absolute;background:rgba(255,255,255,.75);height:100%;top:0;left:-50vw;width:50vw;box-shadow:0 3px #2f00610d;border-bottom:1px solid rgba(102,0,209,.5)}.headerGrid{justify-content:space-between;flex-wrap:wrap}.buttonBar{display:flex;justify-content:flex-end;flex-grow:1;margin-left:.5rem;margin-top:1.25rem;button {border: none; color: var(--clr-secondary); background: rgba(101,0,209,.075); transition: .15s; &.Mui-selected {background: var(--clr-secondary); color: #c0a9c6; &:hover {background: var(--clr-secondary);}} &:hover {background: rgba(101,0,209,.15);} svg {transition: .2s;}}}.buttonBar>div{display:flex;align-items:flex-end}.buttonBar .yearSelect{margin-right:.5rem}.buttonBar .yearSelect>div{fieldset {border: 1px solid var(--clr-secondary);} &:hover {fieldset {border: 2px solid var(--clr-secondary);}}}.MuiPopover-paper{background-color:#faf9f7!important}main{display:flex;flex:1}.mainGrid{margin-bottom:1.5rem;display:flex;align-items:flex-start;flex-wrap:wrap;gap:1rem}.dateChip{background:rgba(101,0,209,.1)!important;color:var(--clr-secondary)!important;border:1px solid var(--clr-secondary)!important;svg {color: var(--clr-secondary) !important}}.selectedDriverChip{color:var(--clr-base)!important;svg {color: rgba(255,255,255,.65) !important; &:hover,&:focus {transform: scale(1.2);}} &.first {background: var(--clr-primary);} &.second {background: var(--clr-secondary);} &.third {background: var(--clr-tertiary); color: var(--clr-dark) !important; svg {color: rgba(0,0,0,.5) !important;;}} &.fourth {background: #ef5a08; color: var(--clr-dark) !important; svg {color: rgba(0,0,0,.5) !important;}} &.fifth {background: #0060cd;}}.infoTable{flex-grow:1;max-width:32rem;overflow:hidden;border:3px solid transparent;box-shadow:0 8px 8px #6600d11a,0 12px 16px #4e00a126,0 2px 14px #2f006140,inset 2px 2px 6px #fff3,inset -2px 2px 6px #0003!important;h3 {color: var(--clr-tertiary);} .closeToggle {margin-top: .5rem; margin-right: .65rem;} thead {tr {th {font-weight: 300; color: var(--clr-tertiary); border-bottom: 1px solid rgba(255,176,0,.4);}}} tbody {tr {transition: .2s; &.race_id,&.driver_id {cursor: pointer;} &:nth-of-type(odd) {background: rgba(0,0,0,.25);} &.Mui-selected {&.first {background: var(--clr-primary); &:hover {background: var(--clr-primary);}} &.second {background: var(--clr-secondary); &:hover {background: var(--clr-secondary);}} &.third {background: var(--clr-tertiary); td {color: var(--clr-dark);} &:hover {background: var(--clr-tertiary);}} &.fourth {background: #ef5a08; td {color: var(--clr-dark);} &:hover {background: #ef5a08;}} &.fifth {background: #0060cd; &:hover {background: #0060cd;}}} td {border-color: transparent; transition: .2s;}}} &.prediction {border: 3px solid var(--clr-primary);} &.race_id {border: none; background-image: linear-gradient(165deg,rgba(127,67,190,.1) 25%,rgba(101,0,209,.15) 100%); box-shadow: inset 0px 4px 16px 0px rgba(47,0,97,.15) !important; padding-top: .25rem; max-width: 100%; h3 {color: var(--clr-secondary);} thead {tr {th {color: var(--clr-secondary); border-bottom: 1px solid #6500d136;}}} tbody {tr {&.Mui-selected {background-color: unset; box-shadow: 0 0 2px 1px var(--clr-secondary) inset; td {color: var(--clr-secondary);}} &:hover {background-color: unset; td {color: var(--clr-secondary);}} &:nth-of-type(odd) {background: rgba(0,0,0,.1);}}}}}@media (min-width: 900px){.infoTable.race_id{height:100%;border-radius:12px 12px 0 0}}