* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-y: scroll;
}

section[id] {
  scroll-margin-top: 100px;
}

@font-face {
  font-family: "monr";
  src: url(https://cdnstatic.detik.com/live/_assets/adsdev/motogp2026/fonts/monr.otf);
}
@font-face {
  font-family: "font-bold";
  src: url(https://cdnstatic.detik.com/live/_assets/adsdev/motogp2026/fonts/Tomorrow-Bold.ttf);
}
@font-face {
  font-family: "font-bold-italic";
  src: url(https://cdnstatic.detik.com/live/_assets/adsdev/motogp2026/fonts/Tomorrow-BoldItalic.ttf);
}
@font-face {
  font-family: "font-semi-bold";
  src: url(https://cdnstatic.detik.com/live/_assets/adsdev/motogp2026/fonts/Tomorrow-SemiBold.ttf);
}
@font-face {
  font-family: "font-medium-italic";
  src: url(https://cdnstatic.detik.com/live/_assets/adsdev/motogp2026/fonts/Tomorrow-MediumItalic.ttf);
}
@font-face {
  font-family: "font-regular";
  src: url(https://cdnstatic.detik.com/live/_assets/adsdev/motogp2026/fonts/Tomorrow-Regular.ttf);
}
@font-face {
  font-family: "font-light";
  src: url(https://cdnstatic.detik.com/live/_assets/adsdev/motogp2026/fonts/Tomorrow-Light.ttf);
}
@font-face {
  font-family: "font-euro";
  src: url(https://cdnstatic.detik.com/live/_assets/adsdev/motogp2026/fonts/fonnts.com-Eurostile_Extd_Black.otf);
}
@font-face {
  font-family: "font-euro-uni";
  src: url(https://cdnstatic.detik.com/live/_assets/adsdev/motogp2026/fonts/EurostileLTProUnicode-Bold.otf);
}
.font-monr {
  font-family: "monr";
}

.font-bold {
  font-family: "font-bold";
}

.font-bold-italic {
  font-family: "font-bold-italic";
}

.font-semi-bold {
  font-family: "font-semi-bold";
}

.font-medium-italic {
  font-family: "font-medium-italic";
}

.font-regular {
  font-family: "font-regular";
}

.font-light {
  font-family: "font-light";
}

.font-euro {
  font-family: "font-euro";
}

.font-euro-uni {
  font-family: "font-euro-uni";
}

.bg-podium-gradient-silver {
  background: linear-gradient(0deg, rgba(230, 230, 230, 0.2) 0%, rgba(230, 230, 230, 0) 85%);
}

.bg-podium-gradient-gold {
  background: linear-gradient(0deg, rgba(225, 181, 61, 0.2) 0%, rgba(225, 181, 61, 0) 85%);
}

.bg-podium-gradient-bronze {
  background: linear-gradient(0deg, rgba(252, 142, 51, 0.2) 0%, rgba(252, 142, 51, 0) 85%);
}

.white-color {
  color: #ffffff;
}

.bg-black-primmary {
  background: #000000;
}

.white-color-2 {
  color: #D1D5DB;
}

.grey-color {
  color: #323232;
}

.blue-color {
  color: #42BEFD;
}

.red-color {
  color: #FF141C;
}

.red-color-2 {
  color: #DA121A;
}

.bg-red-gradient-1 {
  background: linear-gradient(0deg, rgba(255, 22, 31, 0.5) 0%, rgba(255, 22, 31, 0) 85%);
}

.border-red-1 {
  border: 1px solid #FD3A37;
}

.bg-black-1 {
  background: #0E131E;
}

.bg-red-2 {
  background: #DA121A;
}

.bg-red-3 {
  background: #EA4335;
}

body {
  background-color: #020202;
}

.border-blue-1 {
  border: 1px solid #42BEFD;
}

a {
  text-decoration: none;
}

.header-image img {
  height: 344px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top left;
     object-position: top left;
}

.bottom-image img {
  height: 645px;
  -o-object-fit: cover;
     object-fit: cover;
}

.navbar {
  background-color: transparent;
  transition: background-color 0.3s ease;
}
.navbar.navbar-scrolled {
  background-color: #000000;
}
.navbar .navbar-wrapper {
  max-width: 1168px;
  padding-block: 32px;
}
@media (max-width: 991px) {
  .navbar .navbar-wrapper {
    gap: 40px;
  }
}
.navbar .navbar-wrapper .navbar-toggler .toggler-icon-close {
  display: none;
}
.navbar .navbar-wrapper .navbar-toggler .toggler-icon-open {
  display: block;
}
.navbar .navbar-wrapper .navbar-toggler[aria-expanded=true] .toggler-icon-open {
  display: none;
}
.navbar .navbar-wrapper .navbar-toggler[aria-expanded=true] .toggler-icon-close {
  display: block;
}
.navbar .navbar-wrapper .navbar-logo img {
  width: 100%;
  max-width: 201.35px;
}
@media (max-width: 320px) {
  .navbar .navbar-wrapper .navbar-logo img {
    width: 160px;
  }
}
@media (max-width: 991px) {
  .navbar .navbar-wrapper .navbar-collapse {
    padding-bottom: 50px;
  }
}
.navbar .navbar-wrapper .nav-item {
  font-size: 14px;
  line-height: 16px;
}
@media (max-width: 991px) {
  .navbar .navbar-wrapper .nav-item .nav-link {
    font-family: "font-regular";
  }
}
.navbar .navbar-wrapper .nav-item .nav-link:hover {
  color: #FF141C;
}
.navbar .navbar-wrapper .nav-item .nav-link:focus, .navbar .navbar-wrapper .nav-item .nav-link:focus-visible {
  color: #ffffff;
  box-shadow: none;
}
.navbar .navbar-wrapper .nav-item .nav-link.active {
  color: #FF141C;
}
.navbar .navbar-wrapper .login-button {
  gap: 4px;
  background-image: url("./../images/cta-button.png");
  background-size: contain;
  background-repeat: no-repeat;
  padding: 10px;
  background-position: center;
}
.navbar .navbar-wrapper .login-button img {
  width: 100%;
  max-width: 32px;
}
.navbar .navbar-wrapper .user-login {
  gap: 16px;
}
.navbar .navbar-wrapper .user-login .user-info-wrapper {
  gap: 8px;
}
.navbar .navbar-wrapper .user-login .user-info-wrapper .user-info .user-name {
  width: 100%;
  max-width: 155px;
  font-size: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 991px) {
  .navbar .navbar-wrapper .user-login .user-info-wrapper .user-info .user-name {
    max-width: -moz-fit-content;
    max-width: fit-content;
  }
}
.navbar .navbar-wrapper .user-login .user-info-wrapper .user-info .user-poin {
  gap: 6px;
}
.navbar .navbar-wrapper .user-login .user-info-wrapper .user-info .user-poin img {
  width: 100%;
  max-width: 24px;
}
.navbar .navbar-wrapper .user-login .user-info-wrapper .user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 100px;
  overflow: hidden;
}
.navbar .navbar-wrapper .user-login .user-info-wrapper .user-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.navbar .navbar-wrapper .login-icon-mobile.logged-in img {
  width: 100%;
  max-width: 32px;
  height: 32px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 60px;
}

#hero .mycontainer {
  padding-top: 180px;
  padding-bottom: 40px;
}
@media (max-width: 576px) {
  #hero .mycontainer {
    padding-top: 110px;
  }
}
#hero .mycontainer .hero-wrapper {
  width: 100%;
  max-width: 1080px;
  margin: auto;
  padding: 60px;
  position: relative;
  background: url(https://cdnstatic.detik.com/live/_assets/adsdev/motogp2026/image/hero-image-desktop.webp) no-repeat;
  background-size: cover;
  border-radius: 40px;
  padding-bottom: 109px;
  background-position: top center;
}
@media (max-width: 991px) {
  #hero .mycontainer .hero-wrapper {
    background: url(https://cdnstatic.detik.com/live/_assets/adsdev/motogp2026/image/hero-image-mobile.webp) no-repeat;
    background-size: cover;
    padding-top: 600px;
  }
}
@media (max-width: 576px) {
  #hero .mycontainer .hero-wrapper {
    background-size: cover;
    height: auto;
    padding: 16px;
    padding-top: 350px;
  }
}
#hero .mycontainer .hero-wrapper .hero-image {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}
#hero .mycontainer .hero-wrapper .hero-copy {
  max-width: 520px;
  gap: 10px;
}
@media (max-width: 991px) {
  #hero .mycontainer .hero-wrapper .hero-copy {
    max-width: 100%;
    gap: 16px;
  }
}
#hero .mycontainer .hero-wrapper .hero-copy h1 {
  font-size: 64px;
  max-width: 370px;
}
#hero .mycontainer .hero-wrapper .hero-copy img {
  width: 100%;
  max-width: 367px;
}
#hero .mycontainer .hero-wrapper .hero-copy h2 {
  font-size: 36px;
}
#hero .mycontainer .hero-wrapper .hero-copy p {
  font-size: 16px;
  line-height: 24px;
  max-width: 412px;
}
@media (max-width: 991px) {
  #hero .mycontainer .hero-wrapper .hero-copy p {
    max-width: 100%;
  }
}
#hero .mycontainer .hero-wrapper .hero-copy .hero-cta {
  gap: 20px;
}
#hero .mycontainer .hero-wrapper .hero-copy .hero-cta .hero-cta-button {
  width: 150px;
  height: 40px;
  background-image: url("./../images/hero-cta-button.webp");
  background-size: contain;
  background-repeat: no-repeat;
}
#hero .mycontainer .hero-wrapper .hero-copy .hero-cta .hero-cta-button a {
  font-size: 14px;
  line-height: 20px;
  margin-top: -2px;
}
#hero .mycontainer .hero-wrapper .hero-copy .hero-cta .cta-ikut {
  width: 184px;
  height: 46px;
}
#hero .mycontainer .hero-wrapper .hero-copy .hero-cta .cta-ikut a {
  font-size: 18px;
}
#hero .mycontainer .hero-wrapper .hero-copy .hero-cta .cta-mekanisme {
  filter: grayscale(1);
}

#ads-banner .mycontainer .ads-banner-wrapper {
  max-width: 1080px;
  padding-bottom: 100px;
}
#ads-banner .mycontainer .ads-banner-wrapper .ads-desktop img {
  width: 100%;
  max-width: 1080px;
  height: 278.35px;
  margin: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
#ads-banner .mycontainer .ads-banner-wrapper .ads-mobile img {
  width: 100%;
  max-width: 320px;
  height: 100px;
  margin: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
#ads-banner .mycontainer .ads-banner-wrapper .swiper-button-next,
#ads-banner .mycontainer .ads-banner-wrapper .swiper-button-prev {
  --swiper-navigation-size: 24px;
}
#ads-banner .mycontainer .ads-banner-wrapper .swiper-button-next::after,
#ads-banner .mycontainer .ads-banner-wrapper .swiper-button-prev::after {
  display: none !important;
}
#ads-banner .mycontainer .ads-banner-wrapper .swiper-button-next svg.swiper-navigation-icon,
#ads-banner .mycontainer .ads-banner-wrapper .swiper-button-prev svg.swiper-navigation-icon {
  display: none !important;
}
#ads-banner .mycontainer .ads-banner-wrapper .swiper-button-next {
  right: 0;
  background-image: url("./../images/chevron-right.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#ads-banner .mycontainer .ads-banner-wrapper .swiper-button-prev {
  left: 0;
  background-image: url("./../images/chevron-left.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#mekanisme .mycontainer {
  padding-block: 100px;
}
@media (max-width: 576px) {
  #mekanisme .mycontainer {
    padding-top: 0;
  }
}
#mekanisme .mycontainer .mekanisme-wrapper {
  gap: 4px;
}
#mekanisme .mycontainer .mekanisme-wrapper .mekanisme-header {
  max-width: 1050px;
}
#mekanisme .mycontainer .mekanisme-wrapper .mekanisme-header .mekanisme-title {
  gap: 20px;
}
@media (max-width: 480px) {
  #mekanisme .mycontainer .mekanisme-wrapper .mekanisme-header .mekanisme-title {
    gap: 16px;
  }
}
#mekanisme .mycontainer .mekanisme-wrapper .mekanisme-header .mekanisme-title h1 {
  font-size: 32px;
  text-align: center;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  #mekanisme .mycontainer .mekanisme-wrapper .mekanisme-header .mekanisme-title h1 {
    font-size: 24px;
  }
}
#mekanisme .mycontainer .mekanisme-wrapper .mekanisme-header .mekanisme-title img {
  margin-top: 2px;
}
@media (max-width: 480px) {
  #mekanisme .mycontainer .mekanisme-wrapper .mekanisme-header .mekanisme-title img {
    width: 27px;
    margin-top: 0;
  }
}
#mekanisme .mycontainer .mekanisme-wrapper .how-to-wrapper {
  width: 100%;
  max-width: 1100px;
  margin: auto;
  padding-block: 40px;
  gap: 20px;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#mekanisme .mycontainer .mekanisme-wrapper .how-to-wrapper::-webkit-scrollbar {
  display: none;
}
#mekanisme .mycontainer .mekanisme-wrapper .how-to-wrapper .how-to-items {
  width: 194px;
  height: 200px;
  border-radius: 32px;
  padding: 14px;
  gap: 4px;
  transition: ease-in-out 0.25s;
  flex-shrink: 0;
}
#mekanisme .mycontainer .mekanisme-wrapper .how-to-wrapper .how-to-items:hover {
  box-shadow: 0px 4px 30px #FF032D;
}
#mekanisme .mycontainer .mekanisme-wrapper .how-to-wrapper .how-to-items:hover .font-bold.grey-color {
  color: #DA121A;
}
#mekanisme .mycontainer .mekanisme-wrapper .how-to-wrapper .how-to-icons {
  width: 100%;
  max-width: 80px;
  filter: grayscale(1);
  transition: ease-in-out 0.25s;
}
#mekanisme .mycontainer .mekanisme-wrapper .how-to-wrapper .font-bold.grey-color {
  font-size: 40px;
  transition: ease-in-out 0.25s;
}
#mekanisme .mycontainer .mekanisme-wrapper .how-to-wrapper .font-bold-italic {
  font-size: 16px;
  line-height: 20px;
}
#mekanisme .mycontainer .mekanisme-wrapper .how-to-wrapper .font-regular {
  font-size: 12px;
}
#mekanisme .mycontainer .mekanisme-wrapper .sistem-poin-wrapper {
  gap: 30px;
  width: 100%;
  max-width: 1050px;
  margin: auto;
  background: linear-gradient(180deg, rgb(107, 13, 13) 0%, rgba(63, 75, 146, 0) 100%);
  padding-inline: 25px;
  padding-block: 24px;
  border: 1px solid #FD3A37;
  border-radius: 40px;
}
#mekanisme .mycontainer .mekanisme-wrapper .sistem-poin-wrapper .sistem-poin-title {
  gap: 4px;
}
#mekanisme .mycontainer .mekanisme-wrapper .sistem-poin-wrapper .sistem-poin-title h2 {
  font-size: 24px;
}
#mekanisme .mycontainer .mekanisme-wrapper .sistem-poin-wrapper .sistem-poin-counter {
  gap: 120px;
}
@media (max-width: 480px) {
  #mekanisme .mycontainer .mekanisme-wrapper .sistem-poin-wrapper .sistem-poin-counter {
    gap: 12px;
  }
}
#mekanisme .mycontainer .mekanisme-wrapper .sistem-poin-wrapper .sistem-poin-counter .sistem-poin-items {
  gap: 4px;
}
#mekanisme .mycontainer .mekanisme-wrapper .sistem-poin-wrapper .sistem-poin-counter .sistem-poin-items .sistem-poin-count {
  font-size: 40px;
  line-height: 60px;
}
#mekanisme .mycontainer .mekanisme-wrapper .sistem-poin-wrapper .sistem-poin-counter .sistem-poin-items .sistem-poin-desc {
  font-size: 16px;
  line-height: 24px;
}
#mekanisme .mycontainer .mekanisme-wrapper .sistem-poin-wrapper .divider {
  border: 1px solid #ffffff;
}
#mekanisme .mycontainer .mekanisme-wrapper .sistem-poin-wrapper .bold-bonus-wrapper {
  gap: 4px;
  background: #000000;
  padding: 16px;
  border-radius: 64px;
  border: 1px solid #FD3A37;
}
@media (max-width: 480px) {
  #mekanisme .mycontainer .mekanisme-wrapper .sistem-poin-wrapper .bold-bonus-wrapper {
    padding: 32px;
  }
}
#mekanisme .mycontainer .mekanisme-wrapper .sistem-poin-wrapper .bold-bonus-wrapper .bold-bonus-title {
  gap: 4px;
}
#mekanisme .mycontainer .mekanisme-wrapper .sistem-poin-wrapper .bold-bonus-wrapper .bold-bonus-title h2 {
  font-size: 24px;
}

#snk .mycontainer {
  padding-bottom: 100px;
}
#snk .mycontainer .snk-wrapper {
  max-width: 1080px;
}
#snk .mycontainer .snk-wrapper .accordion .accordion-item {
  background: none;
}
#snk .mycontainer .snk-wrapper .accordion .accordion-item .accordion-header button {
  border-radius: 24px;
  font-size: 24px;
  padding: 24px;
}
#snk .mycontainer .snk-wrapper .accordion .accordion-item .accordion-header button:focus {
  box-shadow: none;
}
#snk .mycontainer .snk-wrapper .accordion .accordion-item .accordion-header button:focus-visible {
  outline: none;
}
#snk .mycontainer .snk-wrapper .accordion .accordion-item .accordion-header button:not(.collapsed) {
  background: #DA121A;
  color: #ffffff;
  box-shadow: none;
}
#snk .mycontainer .snk-wrapper .accordion .accordion-item .accordion-header button::after {
  background-image: url("../images/accordion-arrow.svg") !important;
}
#snk .mycontainer .snk-wrapper .accordion .accordion-item .accordion-body {
  background: #0E131E;
  border: 1px solid #FD3A37;
  margin-top: 16px;
  border-radius: 24px;
}
#snk .mycontainer .snk-wrapper .accordion .accordion-item .accordion-body .snk-body-wrapper {
  gap: 12px;
}
#snk .mycontainer .snk-wrapper .accordion .accordion-item .accordion-body .snk-body-wrapper .font-medium-italic.blue-color {
  font-size: 24px;
  color: #DA121A;
}
#snk .mycontainer .snk-wrapper .accordion .accordion-item .accordion-body .snk-body-wrapper .font-regular.white-color {
  font-size: 16px;
  line-height: 24px;
}
#snk .mycontainer .snk-wrapper .accordion .accordion-item .accordion-body .snk-body-wrapper .divider {
  border: 1px solid #ffffff;
}
#snk .mycontainer .snk-wrapper .accordion .accordion-item .accordion-body .snk-body-wrapper .last-update {
  font-size: 12.8px !important;
}

#news-update .mycontainer {
  padding-top: 100px;
  padding-bottom: 100px;
}
@media (max-width: 576px) {
  #news-update .mycontainer {
    padding-top: 0;
  }
}
#news-update .mycontainer .news-update-wrapper {
  max-width: 1080px;
  margin: auto;
  gap: 40px;
}
#news-update .mycontainer .news-update-wrapper .news-update-header {
  max-width: 1260px;
}
#news-update .mycontainer .news-update-wrapper .news-update-header .news-update-title {
  gap: 20px;
}
@media (max-width: 480px) {
  #news-update .mycontainer .news-update-wrapper .news-update-header .news-update-title {
    gap: 16px;
  }
}
#news-update .mycontainer .news-update-wrapper .news-update-header .news-update-title h1 {
  font-size: 32px;
  text-align: center;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  #news-update .mycontainer .news-update-wrapper .news-update-header .news-update-title h1 {
    font-size: 24px;
  }
}
#news-update .mycontainer .news-update-wrapper .news-update-header .news-update-title img {
  margin-top: 2px;
}
@media (max-width: 480px) {
  #news-update .mycontainer .news-update-wrapper .news-update-header .news-update-title img {
    width: 27px;
    margin-top: 0;
  }
}
#news-update .mycontainer .news-update-wrapper .news-update-card {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 24px 20px;
}
@media (max-width: 991px) {
  #news-update .mycontainer .news-update-wrapper .news-update-card {
    grid-template-columns: auto auto;
  }
}
@media (max-width: 576px) {
  #news-update .mycontainer .news-update-wrapper .news-update-card {
    grid-template-columns: auto;
  }
}
#news-update .mycontainer .news-update-wrapper .news-update-card a {
  height: 100%;
  display: flex;
}
@media (max-width: 576px) {
  #news-update .mycontainer .news-update-wrapper .news-update-card a {
    max-width: 100%;
  }
}
#news-update .mycontainer .news-update-wrapper .news-update-card .news-update-card-item {
  width: 100%;
  max-width: 255.5px;
  min-height: 300px;
  gap: 17px;
  height: 100%;
}
@media (max-width: 991px) {
  #news-update .mycontainer .news-update-wrapper .news-update-card .news-update-card-item {
    max-width: 100%;
  }
}
#news-update .mycontainer .news-update-wrapper .news-update-card .news-update-card-item .ratio {
  border-radius: 12px;
  overflow: hidden;
}
#news-update .mycontainer .news-update-wrapper .news-update-card .news-update-card-item .ratio img {
  transition: ease-in-out 0.25s;
  overflow: hidden;
}
#news-update .mycontainer .news-update-wrapper .news-update-card .news-update-card-item .news-update-title h1 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: ease-in-out 0.25s;
  font-size: 20px;
}
#news-update .mycontainer .news-update-wrapper .news-update-card .news-update-card-item .news-update-date span {
  font-size: 14px;
}
#news-update .mycontainer .news-update-wrapper .news-update-card .news-update-card-item:hover .ratio img {
  transform: scale(1.1);
}
#news-update .mycontainer .news-update-wrapper .news-update-card .news-update-card-item:hover .news-update-title h1 {
  color: #FF141C;
}

#podium-picks {
  background: url(../images/bg-podium-picks-desktop.webp) no-repeat;
  background-size: contain;
  width: 100%;
  max-width: 1440px;
  margin: auto;
  background-position: center;
  background-position-y: 4%;
}
@media (max-width: 1024px) {
  #podium-picks {
    background: url(../images/bg-podium-picks-mobile.webp) no-repeat;
    background-size: contain;
    background-position-y: 18%;
  }
}
#podium-picks .mycontainer {
  padding-top: 180px;
}
@media (max-width: 576px) {
  #podium-picks .mycontainer {
    padding-top: 114px;
  }
}
#podium-picks .mycontainer .podium-picks-wrapper {
  gap: 20px;
}
@media (max-width: 576px) {
  #podium-picks .mycontainer .podium-picks-wrapper {
    gap: 0;
  }
}
#podium-picks .mycontainer .podium-picks-wrapper .race-info {
  padding-block: 4px;
}
#podium-picks .mycontainer .podium-picks-wrapper .race-info .race-date {
  gap: 8px;
}
#podium-picks .mycontainer .podium-picks-wrapper .race-info .race-date span {
  opacity: 0.6;
  font-size: 16px;
  line-height: 24px;
}
#podium-picks .mycontainer .podium-picks-wrapper .race-info .race-date img {
  width: 36px;
  height: 24px;
  -o-object-fit: contain;
     object-fit: contain;
}
#podium-picks .mycontainer .podium-picks-wrapper .race-info .race-country h1 {
  font-size: 40px;
  line-height: 60px;
}
#podium-picks .mycontainer .podium-picks-wrapper .race-info .race-circuit span {
  font-size: 16px;
  line-height: 24px;
}
#podium-picks .mycontainer .race-countdown-wrapper {
  padding-block: 20px;
}
#podium-picks .mycontainer .race-countdown-wrapper h1 {
  font-size: 24px;
}
#podium-picks .mycontainer .race-countdown-wrapper .countdown-box .countdown-item span.font-euro {
  font-size: 32px;
  padding: 4px 16px;
}
@media (max-width: 576px) {
  #podium-picks .mycontainer .race-countdown-wrapper .countdown-box .countdown-item span.font-euro {
    font-size: 24px;
  }
}
#podium-picks .mycontainer .race-countdown-wrapper .countdown-box .countdown-item span.font-regular {
  font-size: 16px;
  line-height: 24px;
  margin-top: -12px;
}
#podium-picks .mycontainer .form-wrapper {
  width: 100%;
  max-width: 1048px;
  margin: auto;
}
#podium-picks .mycontainer .form-wrapper form {
  width: 100%;
  gap: 16px;
}
#podium-picks .mycontainer .form-wrapper form .dropdown-wrapper {
  gap: 64px;
  margin-top: 64px;
}
@media (max-width: 991px) {
  #podium-picks .mycontainer .form-wrapper form .dropdown-wrapper {
    gap: 32px;
  }
}
@media (max-width: 576px) {
  #podium-picks .mycontainer .form-wrapper form .dropdown-wrapper {
    gap: 16px;
    margin-top: 32px;
  }
}
#podium-picks .mycontainer .form-wrapper form .bg-podium-gradient-gold {
  position: relative;
  top: -64px;
}
@media (max-width: 576px) {
  #podium-picks .mycontainer .form-wrapper form .bg-podium-gradient-gold {
    top: unset;
  }
}
#podium-picks .mycontainer .form-wrapper form .dropdown-container {
  width: 100%;
  max-width: 339px;
  padding: 16px;
  border-radius: 32px;
  gap: 13px;
}
@media (max-width: 576px) {
  #podium-picks .mycontainer .form-wrapper form .dropdown-container {
    border-radius: 16px;
    border-left: 16px solid #DA121A;
    max-width: unset;
  }
}
#podium-picks .mycontainer .form-wrapper form .dropdown-container .dropdown-label {
  flex-shrink: 0;
}
#podium-picks .mycontainer .form-wrapper form .dropdown-container .dropdown-label h1 {
  font-size: 24px;
}
#podium-picks .mycontainer .form-wrapper form .dropdown-container .selectize-control {
  width: 100%;
  max-width: 307px;
}
@media (max-width: 576px) {
  #podium-picks .mycontainer .form-wrapper form .dropdown-container .selectize-control {
    max-width: 205px;
  }
}
#podium-picks .mycontainer .form-wrapper form .dropdown-container .selectize-dropdown-content .option {
  font-family: "font-regular";
  font-size: 12.8px;
  color: #484848;
  padding-block: 10px;
}
#podium-picks .mycontainer .form-wrapper form .dropdown-container .selectize-input {
  background: #000000;
  width: 100%;
  max-width: 307px;
  font-family: "font-regular";
  font-size: 12.8px;
  color: #ffffff;
  height: 48px;
  display: flex;
  align-items: center;
  border-radius: 16px;
}
@media (max-width: 576px) {
  #podium-picks .mycontainer .form-wrapper form .dropdown-container .selectize-input {
    max-width: 205px;
  }
}
#podium-picks .mycontainer .form-wrapper form .dropdown-container .selectize-input .item {
  width: 100%;
  max-width: 230px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#podium-picks .mycontainer .form-wrapper form .dropdown-container .selectize-input input[type=text] {
  color: #ffffff;
}
#podium-picks .mycontainer .form-wrapper form .dropdown-container .selectize-input::after {
  border-color: #DA121A transparent transparent transparent !important;
}
#podium-picks .mycontainer .form-wrapper form .btn-submit {
  width: 346px;
  height: 100px;
  border: 4px solid #E30404;
  box-shadow: 0px -4px 41.3px #FF0000;
  box-shadow: inset 0px 4px 7.5px #FFFFFF;
  border-radius: 60px;
  font-size: 40px;
  line-height: 2.5;
  margin: auto;
}
@media (max-width: 991px) {
  #podium-picks .mycontainer .form-wrapper form .btn-submit {
    width: 218px;
    height: 64px;
    font-size: 24px;
    line-height: 2.7;
  }
}
#podium-picks .mycontainer .mekanisme-wrapper {
  gap: 4px;
  padding-top: 100px;
  padding-bottom: 100px;
}
#podium-picks .mycontainer .mekanisme-wrapper .mekanisme-header {
  overflow-x: hidden;
}
#podium-picks .mycontainer .mekanisme-wrapper .mekanisme-header .mekanisme-title {
  gap: 40px;
}
@media (max-width: 576px) {
  #podium-picks .mycontainer .mekanisme-wrapper .mekanisme-header .mekanisme-title {
    gap: 16px;
  }
}
#podium-picks .mycontainer .mekanisme-wrapper .mekanisme-header .mekanisme-title h1 {
  font-size: 32px;
  text-align: center;
  flex-shrink: 0;
}
#podium-picks .mycontainer .mekanisme-wrapper .mekanisme-header .mekanisme-subtitle p {
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}
#podium-picks .mycontainer .mekanisme-wrapper .how-to-wrapper {
  width: 100%;
  max-width: 1100px;
  margin: auto;
  padding-block: 40px;
  gap: 20px;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#podium-picks .mycontainer .mekanisme-wrapper .how-to-wrapper::-webkit-scrollbar {
  display: none;
}
#podium-picks .mycontainer .mekanisme-wrapper .how-to-wrapper .how-to-items {
  width: 194px;
  height: 200px;
  border-radius: 32px;
  padding: 14px;
  gap: 4px;
  transition: ease-in-out 0.25s;
  flex-shrink: 0;
}
#podium-picks .mycontainer .mekanisme-wrapper .how-to-wrapper .how-to-items:hover {
  box-shadow: 0px 4px 30px #FF032D;
}
#podium-picks .mycontainer .mekanisme-wrapper .how-to-wrapper .how-to-items:hover .font-bold.grey-color {
  color: #DA121A;
}
#podium-picks .mycontainer .mekanisme-wrapper .how-to-wrapper .how-to-icons {
  width: 100%;
  max-width: 80px;
  filter: grayscale(1);
  transition: ease-in-out 0.25s;
}
#podium-picks .mycontainer .mekanisme-wrapper .how-to-wrapper .font-bold.grey-color {
  font-size: 40px;
  transition: ease-in-out 0.25s;
}
#podium-picks .mycontainer .mekanisme-wrapper .how-to-wrapper .font-bold-italic {
  font-size: 16px;
  line-height: 20px;
}
#podium-picks .mycontainer .mekanisme-wrapper .how-to-wrapper .font-regular {
  font-size: 12px;
}
#podium-picks .mycontainer .available-riders-wrapper {
  max-width: 1050px;
  gap: 40px;
  padding-bottom: 100px;
}
#podium-picks .mycontainer .available-riders-wrapper .available-riders-header h1 {
  font-size: 24px;
  line-height: 32px;
}
#podium-picks .mycontainer .available-riders-wrapper .riders-container {
  grid-template-columns: auto auto auto;
  gap: 14px;
}
@media (max-width: 991px) {
  #podium-picks .mycontainer .available-riders-wrapper .riders-container {
    grid-template-columns: auto auto;
  }
}
@media (max-width: 576px) {
  #podium-picks .mycontainer .available-riders-wrapper .riders-container {
    grid-template-columns: auto;
  }
}
#podium-picks .mycontainer .available-riders-wrapper .riders-container .riders-card {
  padding: 12px;
  border-radius: 16px;
  width: 100%;
  min-width: 340px;
  border: 1px solid #686868;
}
@media (max-width: 1024px) {
  #podium-picks .mycontainer .available-riders-wrapper .riders-container .riders-card {
    min-width: unset;
  }
}
#podium-picks .mycontainer .available-riders-wrapper .riders-container .riders-card .riders-info {
  width: 100%;
  min-width: 264px;
  padding-right: 16px;
}
@media (max-width: 1024px) {
  #podium-picks .mycontainer .available-riders-wrapper .riders-container .riders-card .riders-info {
    min-width: unset;
  }
}
#podium-picks .mycontainer .available-riders-wrapper .riders-container .riders-card .riders-info .riders-name {
  gap: 8px;
}
#podium-picks .mycontainer .available-riders-wrapper .riders-container .riders-card .riders-info .riders-name .riders-number {
  font-size: 16px;
  line-height: 24px;
  opacity: 0.6;
}
#podium-picks .mycontainer .available-riders-wrapper .riders-container .riders-card .riders-info .riders-name h1 {
  font-size: 16px;
  line-height: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#podium-picks .mycontainer .available-riders-wrapper .riders-container .riders-card .riders-info .riders-name img {
  width: 21px;
  height: 14px;
  -o-object-fit: contain;
     object-fit: contain;
}
#podium-picks .mycontainer .available-riders-wrapper .riders-container .riders-card .riders-team {
  font-size: 16px;
  line-height: 24px;
  opacity: 0.6;
}
#podium-picks .mycontainer .available-riders-wrapper .riders-container .blue-riders {
  background: #1C2531;
  border: 1px solid #42BEFD;
}
#podium-picks .mycontainer .available-riders-wrapper .riders-container .blue-riders .riders-info .riders-number {
  opacity: 1 !important;
}
#podium-picks .mycontainer .available-riders-wrapper .riders-container .blue-riders .riders-team {
  font-size: 16px;
  line-height: 24px;
  opacity: 1;
}

#dashboard {
  min-height: 900px;
}
#dashboard .mycontainer {
  padding-top: 180px;
  padding-bottom: 100px;
}
@media (max-width: 576px) {
  #dashboard .mycontainer {
    padding-top: 120px;
  }
}
#dashboard .mycontainer .dashboard-wrapper {
  width: 100%;
  max-width: 1048px;
  margin: auto;
  gap: 40px;
}
#dashboard .mycontainer .dashboard-wrapper .dashboard-profile {
  gap: 40px;
}
@media (max-width: 576px) {
  #dashboard .mycontainer .dashboard-wrapper .dashboard-profile {
    gap: 16px;
  }
}
#dashboard .mycontainer .dashboard-wrapper .dashboard-profile .dashboard-avatar img {
  width: 86px;
  height: 86px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 50px;
}
#dashboard .mycontainer .dashboard-wrapper .dashboard-profile .dashboard-name .font-monr {
  font-size: 24px;
}
#dashboard .mycontainer .dashboard-wrapper .dashboard-profile .dashboard-name .font-regular {
  font-size: 16px;
  line-height: 24px;
}
#dashboard .mycontainer .dashboard-wrapper .dashboard-profile .dashboard-points {
  gap: 8px;
}
#dashboard .mycontainer .dashboard-wrapper .dashboard-profile .dashboard-points .font-regular {
  font-size: 16px;
  line-height: 24px;
}
#dashboard .mycontainer .dashboard-wrapper .dashboard-profile .dashboard-points .font-bold-italic {
  font-size: 48px;
  line-height: 48px;
}
#dashboard .mycontainer .dashboard-wrapper .bold-bonus-wrapper {
  gap: 4px;
  background: #000000;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid #FD3A37;
}
@media (max-width: 480px) {
  #dashboard .mycontainer .dashboard-wrapper .bold-bonus-wrapper {
    padding: 32px;
  }
}
#dashboard .mycontainer .dashboard-wrapper .bold-bonus-wrapper .bold-bonus-title {
  gap: 4px;
}
#dashboard .mycontainer .dashboard-wrapper .bold-bonus-wrapper .bold-bonus-title h2 {
  font-size: 24px;
}
#dashboard .mycontainer .dashboard-wrapper .riwayat-prediksi-header h1 {
  font-size: 24px;
  line-height: 32px;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper {
  gap: 20px;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .race-data-label {
  gap: 8px;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .race-data-label span {
  font-size: 16px;
  line-height: 24px;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .race-data-picks {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid #505050;
  gap: 19px;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .race-data-picks .race-info {
  padding: 16px 20px;
  border-radius: 16px;
  background: #121213;
  position: relative;
  overflow: hidden;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .race-data-picks .race-info .aksen {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .race-data-picks .race-info .race-date {
  gap: 8px;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .race-data-picks .race-info .race-date img {
  width: 36px;
  height: 24px;
  -o-object-fit: contain;
     object-fit: contain;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .race-data-picks .race-info .race-date span {
  font-size: 16px;
  line-height: 24px;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .race-data-picks .race-info .race-country {
  z-index: 1;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .race-data-picks .race-info .race-country .race-country-name {
  font-size: 40px;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .race-data-picks .race-info .race-country .race-circuit {
  font-size: 16px;
  line-height: 24px;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .race-data-picks .race-info .race-point {
  gap: 12px;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .race-data-picks .race-info .race-point .race-point-amount {
  gap: 8px;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .race-data-picks .race-info .race-point .race-point-amount .font-bold {
  font-size: 22px;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .race-data-picks .race-info .race-point .race-point-amount .font-regular {
  font-size: 16px;
  line-height: 24px;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .race-data-picks .race-info .race-point .race-point-breakdown {
  gap: 4px;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .race-data-picks .race-info .race-point .race-point-breakdown .font-regular {
  font-size: 16px;
  line-height: 24px;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .riders-picks-wrapper {
  border-radius: 16px;
  gap: 24px;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .riders-picks-wrapper .picks-wrapper {
  gap: 8px;
  width: 100%;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .riders-picks-wrapper .picks-wrapper .pick-number {
  padding: 12px;
  border-radius: 16px;
  width: 73px;
  height: 73px;
  font-size: 22px;
  flex-shrink: 0;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
@media (max-width: 991px) {
  #dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .riders-picks-wrapper .picks-wrapper .pick-number {
    width: auto;
    height: 100%;
    min-height: 73px;
  }
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .riders-picks-wrapper .picks-wrapper .first-pick {
  background: linear-gradient(180deg, rgb(225, 181, 61) 0%, rgb(123, 99, 33) 100%);
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .riders-picks-wrapper .picks-wrapper .second-pick {
  background: linear-gradient(0deg, rgb(135, 135, 135) 0%, rgb(237, 237, 237) 100%);
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .riders-picks-wrapper .picks-wrapper .third-pick {
  background: linear-gradient(0deg, rgb(150, 85, 30) 0%, rgb(252, 142, 51) 100%);
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .riders-card {
  padding: 12px;
  border-radius: 16px;
  width: 100%;
  border: 1px solid #686868;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .riders-card.riders-card-red {
  background: rgba(255, 20, 28, 0.2);
  border: 1px solid rgb(255, 20, 28);
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .riders-card.riders-card-green {
  background: rgba(0, 128, 0, 0.2);
  border: 1px solid rgb(0, 128, 0);
}
@media (max-width: 1024px) {
  #dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .riders-card {
    min-width: unset;
  }
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .riders-card .riders-info {
  width: 100%;
  padding-right: 8px;
}
@media (max-width: 1024px) {
  #dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .riders-card .riders-info {
    min-width: unset;
  }
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .riders-card .riders-info .riders-name {
  gap: 8px;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .riders-card .riders-info .riders-name .riders-number {
  font-size: 16px;
  line-height: 24px;
  opacity: 0.6;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .riders-card .riders-info .riders-name h1 {
  font-size: 16px;
  line-height: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .riders-card .riders-info .riders-name img {
  width: 21px;
  height: 14px;
  -o-object-fit: contain;
     object-fit: contain;
}
#dashboard .mycontainer .dashboard-wrapper .race-data-wrapper .riders-card .riders-team {
  font-size: 16px;
  line-height: 24px;
  opacity: 0.6;
}

#leaderboard {
  min-height: 900px;
}
#leaderboard .mycontainer {
  padding-top: 180px;
  padding-bottom: 100px;
}
@media (max-width: 991px) {
  #leaderboard .mycontainer {
    padding-top: 120px;
  }
}
#leaderboard .mycontainer .leaderboard-wrapper {
  gap: 40px;
}
#leaderboard .mycontainer .leaderboard-header {
  overflow-x: hidden;
}
#leaderboard .mycontainer .leaderboard-header .leaderboard-title {
  gap: 40px;
}
@media (max-width: 576px) {
  #leaderboard .mycontainer .leaderboard-header .leaderboard-title {
    gap: 16px;
  }
}
#leaderboard .mycontainer .leaderboard-header .leaderboard-title h1 {
  font-size: 32px;
  text-align: center;
  flex-shrink: 0;
}
#leaderboard .mycontainer #tabPemenang {
  width: 100%;
  max-width: 1030px;
  margin: auto;
  border-bottom: 0;
}
#leaderboard .mycontainer #tabPemenang .nav-item {
  width: 50%;
}
#leaderboard .mycontainer #tabPemenang .nav-item button {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 6px solid #686868;
  color: #686868;
  font-size: 16px;
  line-height: 24px;
  padding-bottom: 12px;
}
@media (max-width: 576px) {
  #leaderboard .mycontainer #tabPemenang .nav-item button {
    min-height: 74px;
  }
}
#leaderboard .mycontainer #tabPemenang .nav-item button.active {
  color: #ffffff;
  border-bottom: 6px solid #DA121A;
}
#leaderboard .mycontainer #tabPemenangContent {
  width: 100%;
  max-width: 1030px;
  margin: auto;
}
#leaderboard .mycontainer .race-data-picks {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid #505050;
  gap: 19px;
}
#leaderboard .mycontainer .race-data-picks .race-info {
  padding: 16px 20px;
  border-radius: 16px;
  background: #121213;
  position: relative;
  overflow: hidden;
}
#leaderboard .mycontainer .race-data-picks .race-info .aksen {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
}
#leaderboard .mycontainer .top-3-wrapper {
  width: 100%;
  max-width: 1020px;
  margin: auto;
  gap: 30px;
}
#leaderboard .mycontainer .top-3-wrapper .order-1.order-lg-2 {
  margin-top: 0;
}
@media (max-width: 991px) {
  #leaderboard .mycontainer .top-3-wrapper .order-1.order-lg-2 {
    margin-top: unset;
  }
}
#leaderboard .mycontainer .top-3-wrapper .top-3-item {
  gap: 16px;
  width: 100%;
  max-width: 320px;
  max-height: 461px;
  position: relative;
  margin-top: 64px;
}
@media (max-width: 991px) {
  #leaderboard .mycontainer .top-3-wrapper .top-3-item {
    margin-top: unset;
  }
}
#leaderboard .mycontainer .top-3-wrapper .top-3-item .first-place {
  background: url(../images/leaderboard-gold.webp) no-repeat;
}
#leaderboard .mycontainer .top-3-wrapper .top-3-item .second-place {
  background: url(../images/leaderboard-silver.webp) no-repeat;
}
#leaderboard .mycontainer .top-3-wrapper .top-3-item .third-place {
  background: url(../images/leaderboard-bronze.webp) no-repeat;
}
#leaderboard .mycontainer .top-3-wrapper .top-3-item .top-3-initial {
  width: 120px;
  height: 120px;
  background-size: contain;
}
#leaderboard .mycontainer .top-3-wrapper .top-3-item .top-3-initial span {
  font-size: 48px;
  margin-top: 12px;
}
#leaderboard .mycontainer .top-3-wrapper .top-3-item .top-3-name {
  width: 100%;
  font-size: 22px;
  line-height: 33px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#leaderboard .mycontainer .top-3-wrapper .top-3-item .top-3-points {
  gap: 8px;
}
#leaderboard .mycontainer .top-3-wrapper .top-3-item .top-3-points .font-regular {
  font-size: 16px;
  line-height: 24px;
}
#leaderboard .mycontainer .top-3-wrapper .top-3-item .top-3-points .font-bold {
  font-size: 22px;
  line-height: 33px;
}
#leaderboard .mycontainer .top-3-wrapper .top-3-item .top-3-podium img {
  width: 100%;
}
#leaderboard .mycontainer .top-3-wrapper .top-3-item .top-3-prize {
  position: absolute;
  bottom: 0;
  padding: 32px 20px 20px 20px;
  left: 0;
  right: 0;
  margin: auto;
}
#leaderboard .mycontainer .top-3-wrapper .top-3-item .top-3-prize:has(.prize-name.d-none) {
  bottom: 50px;
}
#leaderboard .mycontainer .top-3-wrapper .top-3-item .top-3-prize .prize-name {
  padding: 20px 0px;
  gap: 8px;
}
#leaderboard .mycontainer .top-3-wrapper .top-3-item .top-3-prize .prize-name img {
  width: 100%;
  max-width: 19px;
}
#leaderboard .mycontainer .top-3-wrapper .top-3-item .top-3-prize .prize-name span {
  font-size: 22px;
  line-height: 33px;
}
@media (min-width: 992px) and (max-width: 1024px) {
  #leaderboard .mycontainer .top-3-wrapper .top-3-item .top-3-prize .prize-name span {
    font-size: 21px;
    line-height: unset;
  }
}
#leaderboard .mycontainer .top-20-wrapper {
  width: 100%;
  max-width: 1046px;
}
#leaderboard .mycontainer .top-20-wrapper .top-20-header {
  border: 1px solid #505050;
  border-bottom: none;
}
#leaderboard .mycontainer .top-20-wrapper .top-20-header .rank {
  min-width: 60px;
}
#leaderboard .mycontainer .top-20-wrapper .top-20-header .points {
  min-width: 200px;
  text-align: center;
}
@media (max-width: 576px) {
  #leaderboard .mycontainer .top-20-wrapper .top-20-header .points {
    min-width: 100px;
  }
}
#leaderboard .mycontainer .top-20-wrapper .top-20-header span {
  font-size: 12px;
  line-height: 18px;
  padding: 8px 5px;
}
#leaderboard .mycontainer .top-20-wrapper .top-20-list {
  background: #2B2B2B;
  border: 1px solid #505050;
  min-height: 57px;
}
#leaderboard .mycontainer .top-20-wrapper .top-20-list .rank {
  min-width: 60px;
}
#leaderboard .mycontainer .top-20-wrapper .top-20-list .points {
  min-width: 200px;
  text-align: center;
}
@media (max-width: 576px) {
  #leaderboard .mycontainer .top-20-wrapper .top-20-list .points {
    min-width: 100px;
  }
}
#leaderboard .mycontainer .top-20-wrapper .top-20-list span {
  font-size: 16px;
  line-height: 24px;
  padding: 12px;
}
#leaderboard .mycontainer .prize-amount-wrapper {
  width: 100%;
  max-width: 1032px;
  margin: auto;
  gap: 16px;
  margin-bottom: 30px;
}
#leaderboard .mycontainer .prize-amount-wrapper .prize-name {
  gap: 8px;
}
#leaderboard .mycontainer .prize-amount-wrapper .prize-name img {
  width: 100%;
  max-width: 19px;
}
#leaderboard .mycontainer .prize-amount-wrapper .prize-name span {
  font-size: 32px;
}
#leaderboard .mycontainer .prize-amount-wrapper span {
  font-size: 16px;
  line-height: 24px;
}
#leaderboard .mycontainer .winner-list-wrapper {
  width: 100%;
  max-width: 1032px;
  margin: auto;
  gap: 30px;
}
#leaderboard .mycontainer .winner-list-wrapper .winner-list {
  background: #2B2B2B;
  border-radius: 16px;
  border-left: 6px solid #DA121A;
  padding: 16px;
  gap: 16px;
}
@media (max-width: 576px) {
  #leaderboard .mycontainer .winner-list-wrapper .winner-list {
    border-top: 6px solid #DA121A;
    border-left: none;
  }
}
#leaderboard .mycontainer .winner-list-wrapper .winner-list .race-info .race-date {
  gap: 8px;
}
#leaderboard .mycontainer .winner-list-wrapper .winner-list .race-info .race-date img {
  width: 36px;
  height: 24px;
  -o-object-fit: contain;
     object-fit: contain;
}
#leaderboard .mycontainer .winner-list-wrapper .winner-list .race-info .race-date span {
  font-size: 16px;
  line-height: 24px;
}
#leaderboard .mycontainer .winner-list-wrapper .winner-list .race-info .race-country {
  z-index: 1;
}
#leaderboard .mycontainer .winner-list-wrapper .winner-list .race-info .race-country .race-country-name {
  font-size: 40px;
}
#leaderboard .mycontainer .winner-list-wrapper .winner-list .race-info .race-country .race-circuit {
  font-size: 16px;
  line-height: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#leaderboard .mycontainer .winner-list-wrapper .winner-list .race-winner {
  gap: 12px;
}
#leaderboard .mycontainer .winner-list-wrapper .winner-list .race-winner .race-winner-data {
  width: 100%;
  border-radius: 32px;
  overflow: hidden;
}
#leaderboard .mycontainer .winner-list-wrapper .winner-list .race-winner .race-winner-data .first-place {
  background: url(../images/bg-gold.webp) no-repeat;
}
#leaderboard .mycontainer .winner-list-wrapper .winner-list .race-winner .race-winner-data .second-place {
  background: url(../images/bg-silver.webp) no-repeat;
}
#leaderboard .mycontainer .winner-list-wrapper .winner-list .race-winner .race-winner-data .winner-name {
  background: #000000;
  padding: 12px 16px;
  width: 100%;
  max-width: 177px;
  min-width: 177px;
  height: 72px;
}
@media (max-width: 576px) {
  #leaderboard .mycontainer .winner-list-wrapper .winner-list .race-winner .race-winner-data .winner-name {
    min-width: unset;
  }
}
#leaderboard .mycontainer .winner-list-wrapper .winner-list .race-winner .race-winner-data .winner-name span {
  width: 100%;
  font-size: 15spx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
#leaderboard .mycontainer .winner-list-wrapper .winner-list .race-winner .race-winner-data .winner-position {
  background-size: cover;
  height: 55px;
}
#leaderboard .mycontainer .winner-list-wrapper .winner-list .race-winner .race-winner-data .winner-position span {
  font-size: 48px;
}

#footer .mycontainer {
  padding-bottom: 88px;
}
#footer .mycontainer .footer-wrapper {
  max-width: 1168px;
}
#footer .mycontainer .footer-wrapper .horizontal-divider {
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 22, 31, 0) 0%, #FF141C 50%, rgba(255, 22, 31, 0) 100%);
}
#footer .mycontainer .footer-wrapper .logo-footer {
  max-width: 330px;
}
#footer .mycontainer .footer-wrapper .footer-desc {
  max-width: 630px;
}
#footer .mycontainer .footer-wrapper .footer-desc p {
  font-size: 14px;
  line-height: 24px;
}

.sticky-banner {
  max-width: 1080px;
  margin: auto;
  left: 0;
  right: 0;
  z-index: 5;
  bottom: 0;
  max-height: 135px;
}
.sticky-banner .close-button-sticky {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  opacity: 0.5;
  transition: ease-in-out 0.25s;
}
.sticky-banner .close-button-sticky:hover {
  opacity: 1;
}
.sticky-banner .sticky-banner-image img {
  width: 100%;
}

.floating-banner {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100px;
  right: 24px;
  z-index: 5;
  top: 180px;
}
.floating-banner .close-button-floating {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  opacity: 0.5;
  transition: ease-in-out 0.25s;
}
.floating-banner .close-button-floating:hover {
  opacity: 1;
}
.floating-banner .floating-banner-image img {
  width: 100%;
  max-width: 100px;
}

body.modal-open {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

body.modal-open .navbar.fixed-top {
  padding-right: 0px !important;
}

body.modal-open .modal.show {
  padding-right: 0px !important;
}

.modal.show {
  display: flex !important;
  align-items: center;
}
.modal .modal-dialog {
  max-width: 560px;
  width: calc(100% - 32px);
  margin: auto;
}
.modal .modal-content {
  width: 100%;
}
.modal .modal-content .modal-body {
  width: 100%;
  border-radius: 24px;
  padding: 24px;
  border: 1px solid #FF141C;
  gap: 12px;
}
.modal .modal-content .modal-body .modal-illustration {
  width: 100%;
  max-width: 300px;
  margin: auto;
}
.modal .modal-content .modal-body .modal-headline {
  font-size: 24px;
}
.modal .modal-content .modal-body .modal-desc {
  font-size: 16px;
  line-height: 24px;
}
.modal .modal-content .modal-body .modal-disclaimer {
  font-size: 12.8px;
  line-height: 19.2px;
}
.modal .modal-content .modal-body .modal-button-wrapper {
  gap: 12px;
}
.modal .modal-content .modal-body .modal-button-wrapper .modal-button {
  width: 160px;
  height: 40px;
  background-image: url("./../images/cta-button.png");
  background-size: contain;
  background-repeat: no-repeat;
  padding: 10px 41.5px;
  background-position: center;
}
.modal .modal-content .modal-body .modal-button-wrapper .modal-button span {
  font-size: 16px;
  line-height: 24px;
  margin-top: -2px;
  cursor: pointer;
}
.modal .modal-content .modal-body .modal-button-wrapper .solid-button {
  background-image: url("./../images/hero-cta-button.webp") !important;
}
.modal .modal-content .modal-body .riders-picks-wrapper {
  padding: 16px;
  border-radius: 16px;
  gap: 19px;
  background: #131925;
}
.modal .modal-content .modal-body .riders-picks-wrapper .picks-wrapper {
  gap: 14px;
}
.modal .modal-content .modal-body .riders-picks-wrapper .picks-wrapper .pick-number {
  padding: 12px;
  border-radius: 16px;
  width: 73px;
  height: 73px;
  font-size: 22px;
  flex-shrink: 0;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.modal .modal-content .modal-body .riders-picks-wrapper .picks-wrapper .first-pick {
  background: linear-gradient(180deg, rgb(225, 181, 61) 0%, rgb(123, 99, 33) 100%);
}
.modal .modal-content .modal-body .riders-picks-wrapper .picks-wrapper .second-pick {
  background: linear-gradient(0deg, rgb(135, 135, 135) 0%, rgb(237, 237, 237) 100%);
}
.modal .modal-content .modal-body .riders-picks-wrapper .picks-wrapper .third-pick {
  background: linear-gradient(0deg, rgb(150, 85, 30) 0%, rgb(252, 142, 51) 100%);
}
.modal .modal-content .modal-body .riders-card {
  padding: 12px;
  border-radius: 16px;
  width: 100%;
  min-width: 340px;
  border: 1px solid #686868;
}
@media (max-width: 1024px) {
  .modal .modal-content .modal-body .riders-card {
    min-width: unset;
  }
}
.modal .modal-content .modal-body .riders-card .riders-info {
  width: 100%;
  min-width: 264px;
  padding-right: 8px;
}
@media (max-width: 1024px) {
  .modal .modal-content .modal-body .riders-card .riders-info {
    min-width: unset;
  }
}
.modal .modal-content .modal-body .riders-card .riders-info .riders-name {
  gap: 8px;
}
.modal .modal-content .modal-body .riders-card .riders-info .riders-name .riders-number {
  font-size: 16px;
  line-height: 24px;
  opacity: 0.6;
}
.modal .modal-content .modal-body .riders-card .riders-info .riders-name h1 {
  font-size: 16px;
  line-height: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.modal .modal-content .modal-body .riders-card .riders-info .riders-name img {
  width: 21px;
  height: 14px;
  -o-object-fit: contain;
     object-fit: contain;
}
.modal .modal-content .modal-body .riders-card .riders-team {
  font-size: 16px;
  line-height: 24px;
  opacity: 0.6;
}

#modalConfirm .modal-body {
  gap: 8px;
}
@media (max-width: 375px) {
  #modalConfirm .modal-body {
    padding: 8px;
  }
}
#modalConfirm .modal-body .modal-illustration {
  max-width: 200px;
}
@media (max-width: 390px) {
  #modalConfirm .modal-button {
    width: 150px;
  }
  #modalConfirm .modal-button span {
    font-size: 14px;
  }
}
@media (max-width: 576px) {
  #modalConfirm .pick-number {
    width: unset;
  }
}/*# sourceMappingURL=style.css.map */