@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quantico&display=swap');
.bottom-menu,.cookie-bar.show,.prize,footer {
  bottom:0}

.btn.primary-btn,.btn.secondary-btn {
  height:40px;
  transition:background-color .3s,color .3s}

.account-info .btn.primary-btn,nav.top-nav .avatar-dt,nav.top-nav .balance,nav.top-nav .balance span,nav.top-nav .balance>.icon-balance,nav.top-nav a.btn {
  font-weight:var(--semi-medium-font);
  font-size:.875rem}

.content,footer {
  margin-left:200px}

a,footer .footer-logo {
  text-decoration:none}

.cover.leaderboard>.classment>p,.dark-name span,.modal-header>.modal-title,.profile-card .profile-details h2,.sec-title h2,.side-nav,footer .footer-logo,nav.top-nav .navbar-brand,section.device-detection h1 {
  font-family:var(--secondary-font)}

.affiliate-table,.leaderboard-table,.transaction-table {
  border-collapse:collapse}

:root {
  --primary-color:#0a4d60E6;
  --header-bg-color:#1c1e23;
  --body-bg-color:#0f1117;
  --sidebar-bg-color:#272a30;
  --yellow-highlight:#ffb800;
  --footer-bg-color:#181a20;
  --dark-color:#2a3439;
  --text-light-color:#cccccc;
  --white-color:#fff;
  --primary-font:"Roboto",sans-serif;
  --secondary-font:"Roboto",sans-serif;
  --light-font:300;
  --regular-font:400;
  --medium-font:500;
  --semi-medium-font:600;
  --bold-font:700;
  --extra-bold-font:800}

:focus,:focus-visible {
  outline:0!important;
  box-shadow:none!important}

::-webkit-scrollbar {
  width:8px}

::-webkit-scrollbar-thumb {
  background-color:var(--primary-color)}

::-webkit-scrollbar-track {
  background-color:var(--text-light-color)}

.btn.primary-btn:hover,.btn.secondary-btn:hover,.google-btn {
    background: linear-gradient(135deg, #a2f0d4, #c0f7e4);}

body.modal-open {
  padding-right:0!important;
  overflow:auto!important}

.fs-13 {
  font-size:.8125rem}

.fs-12 {
  font-size:.75rem}

.alert-box {
  color:var(--white-color);
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  border-top:2px solid var(--white-color);
  font-size:.875rem;
  font-weight:var(--medium-font);
  padding:15px;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  min-height:4.0625rem}

.google-btn,section.api-offers .api-offers-card .cpi {
  font-weight:var(--bold-font)}

.alert-box.alert-error {
  background-color:#2a3439}

.alert-box.alert-success {
  background-color:#19af66}

.alert-box.alert-warning {
  background-color:#dba800}

.alert-box svg,.separator::before {
  margin-right:10px}

.logo {
  width:9.6875rem;
  max-width:9.6875rem}

@media (max-width:48rem) {
  .logo {
  width:7.5rem;
  max-width:7.5rem}

}

.account-info select>option:hover,.btn.primary-btn,.cookie-bar .accept,.slid-button .next:hover,.slid-button .prev:hover {
  background-color:#0a4d60E6;
  color:#B3E7D0}

.btn.secondary-btn,body {
  background-color:var(--body-bg-color);
  color:var(--white-color)}

.btn.primary-btn:hover,.modal-header>.modal-title,footer .footer-links a:hover {
  color:#0a4d60E6}

.btn.secondary-btn:hover {
  color:var(--body-bg-color)}

.google-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--dark-color);
  border:none}

.top-nav {
  background-color: rgba(0, 0, 0, 0.2)!important; 
backdrop-filter: blur(5px) !important;
  top: 0;
}

.offerwall-preloader, .preloader {
  background-color: rgba(0, 0, 0, 0.99); 
  backdrop-filter: blur(8px); 
}
.side-nav,
nav.top-nav .dropdown ul.dropdown-menu {
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  background-image:
    linear-gradient(to bottom, rgba(0, 217, 255, 0.3), rgba(0, 122, 143, 0.2)),
    linear-gradient(120deg, rgba(0, 217, 255, 0.2), rgba(0, 122, 143, 0.2)),
    linear-gradient(to bottom, rgba(0, 217, 255, 0.25), rgba(0, 0, 0, 0.1)),
    linear-gradient(100deg, rgba(0, 217, 255, 0.2), rgba(30, 43, 56, 0.1)),
    linear-gradient(to bottom, rgba(0, 217, 255, 0.15), rgba(0, 0, 0, 0.1));
  background-size: 2px 100%, 1px 100%, 3px 100%, 2px 100%, 1px 100%;
  background-repeat: no-repeat;
  background-position: 10% 0, 25% 0, 47% 0, 70% 0, 85% 0;
}


body {
  font-weight:var(--regular-font);
  font-family:var(--primary-font)}

.offerwall-preloader,.preloader {
  position:fixed;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999}

.bottom-menu,.side-nav {
  position:fixed;
  display:none;
  left:0}

.spinner {
  border:8px solid rgb(0 0 0 / .1);
  border-left-color:var(--primary-color);
  border-radius:50%;
  width:50px;
  height:50px;
  animation:1s linear infinite spin}

@keyframes spin {
  0% {
  transform:rotate(0)}

100% {
  transform:rotate(360deg)}

}

nav.top-nav .navbar-brand {
  font-size:1.6rem;
  text-transform:uppercase}

nav.top-nav .profile-avatar {
  width:38px;
  height:38px;
  border-radius:50%;
background: linear-gradient(to right, #85d4f8, #4aaed1, #2e7ca3, #1c5778);
  border:1px solid var(--white-color)}

nav.top-nav .avatar-dt,nav.top-nav .balance {
  height:40px;
  background-color:var(--body-bg-color);
  border-radius:8px;
  padding:15px;
  display:flex;
  align-items:center}

nav.top-nav .balance>.icon-balance {
background: #B3E7D0;
  width:20px;
  height:20px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  color:var(--body-bg-color)}

.affiliate-table tbody tr:hover,.bottom-menu .nav-item.active::before,.side-nav li.nav-item.active,.transaction-table tbody tr:hover  {
background: linear-gradient(135deg, rgba(0, 48, 64, 0.9) 0%, rgba(15, 106, 128, 0.9) 100%);
  border-radius: 9px;
  color: black !important;
}

.nav-item.active .nav-link span {
  color: #000000 !important;
}

nav.top-nav .dropdown .dropdown-toggle:hover {
  color:var(--white-color);
  background-color:var(--body-bg-color);
  border-color:none}

nav.top-nav .dropdown ul.dropdown-menu a {
  color:var(--text-light-color);
  background-color:#fff0}

nav.top-nav .dropdown ul.dropdown-menu a:hover {
  background-color:var(--text-light-color);
  color:var(--body-bg-color)}

.top-nav {
  position:fixed;
  left:0;
  width:100%;
  height:66px;
  opacity:.96;
  z-index:1000}

.account-info .btn.primary-btn,nav.top-nav a.btn {
  display:flex;
  justify-content:center;
  align-items:center;
  text-transform:capitalize}

.side-nav {
  top:66px;
  height:calc(100% - 66px);
  width:200px;
  color:#fff;
  overflow-y:auto;
  text-transform:uppercase}

.modal .redeem-title,.redeem-card-name,section.offerwalls .partners-card .partners-footer>p,section.tos .tos-title {
  text-transform:capitalize}

.account-info select,.account-info select>option,.bottom-menu,.form-control,.form-control:disabled,.form-control:focus,section.device-detection {
  background-color:var(--body-bg-color)}

.side-nav li.nav-item {
  height:60px}

.modal.auth .modal-body .nav-link.active,.side-nav li.nav-item.active .nav-link span {
  opacity:1}

.side-nav .nav-link {
  font-size:13px;
  display:flex;
  align-items:center;
  padding:0 22px;
  color:#FFFFFF;
  height:100%}

.side-nav .nav-link span {
  opacity:.7}

.side-nav .nav-link img.nav-icon {
  width:1.25rem;
  margin-right:14px}

.side-nav .nav-link:hover {
    background: #077780;
  box-shadow: 0 0 10px rgba(74, 74, 74, 0.4);
  color: #000000;
  transform: translateY(-2px);
  border-radius: 10px;
  transition: all 0.25s ease-in-out;
}


.bottom-menu {
  width:100%;
  z-index:5;
  height:87px;
  box-shadow:0 0 15px 12px #00000040}

.bottom-menu .nav-link svg {
  max-width:30px;
  height:30px}

.bottom-menu .navbar-nav {
  flex-direction:row}

.bottom-menu .nav-item {
  flex-grow:1;
  text-align:center;
  position:relative}

.bottom-menu .nav-item.active::before {
  content:"";
  width:78.6px;
  height:8px;
  border-radius:0 0 10px 10px;
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  transition:opacity .3s}

.bottom-menu .nav-item.active svg path {
  fill:#0a4d60E6}

.wrapper {
  display:flex;
  flex-direction:column;
  min-height:100vh}

.content {
  flex: 1;
  margin-top: 66px;
  padding-bottom: 80px; 
}


section.device-detection {
  position:relative;
  height:80px;
  display:flex;
  align-items:center}

section.device-detection::after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:1px;
  background:linear-gradient(to right,#fff 0,#fff0 95%,#fff0 100%)}

section.device-detection h1 {
  font-size:1.25rem;
  margin-right:.5rem}

section.device-detection .device {
  box-shadow:1px 1px 7.6px 0 #00000080;
  width:120px;
  height:46px;
  border-radius:18px;
  background-color:var(--sidebar-bg-color);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:clamp(.8rem,1vw + .8rem,1rem)}

section.device-detection .device>img {
  width:1.25rem}

section.device-detection span {
  margin:0 .5rem}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
background: linear-gradient(135deg, #003040 0%, #0f6a80 100%);
  opacity: 0.22;
  z-index: -1;
}


.sec-title h2 {
  font-size:clamp(1rem,2vw + 1rem,1.25rem)}

section.api-offers .api-offers-card {
  width:14.6875rem;
  height:5.625rem;
  max-width:14.6875rem;
  max-height:5.625rem;
  box-shadow:0 0 17.6px 1px #00000040;
  background-color:var(--sidebar-bg-color);
  border:1.5px solid #fff0;
  border-radius:1.75rem;
  color:var(--white-color);
  display:flex;
  justify-content:start;
  align-items:center;
  margin-left:7px;
  margin-right:7px;
  padding:0 12px;
  transition:transform .3s,background-color .3s,box-shadow .3s,border .3s}

section.api-offers .api-offers-row {
  min-height:10vh;
  padding:0 7px}

section.api-offers .api-offers-card:hover {
  background-color:var(--primary-color);
  border:1.5px solid #0a4d60E6;
  box-shadow:0 0 14px 2px #0a4d60E6;
  transform:translateY(-5px);
  transition:transform .4s ease-in-out,background-color .4s ease-in-out,box-shadow .4s ease-in-out,border .4s ease-in-out}

section.api-offers .api-offers-card img {
  border-radius:16px;
  width:66px;
  height:66px}

section.api-offers .api-offers-card p {
  font-size:.875rem;
  text-align:start}

section.api-offers .api-offers-card .cpi>span {
  font-size:.5625rem}

section.api-offers .api-offers-card .system {
  background-color:var(--white-color);
  width:38px;
  height:21px;
  border-radius:13.5px}

section.api-offers .api-offers-card .system img {
  filter:invert(1) brightness(0);
  width:100%;
  height:10px}

@media (max-width:992px) {
  section.api-offers .api-offers-card {
  width:8.375rem;
  height:14.0625rem;
  max-width:8.375rem;
  max-height:14.0625rem}

section.api-offers .api-offers-card img {
  width:110px;
  height:110px}

}

section.offerwalls>.site-name {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:43.75rem;
  color:var(--body-bg-color);
  -webkit-text-stroke:2px var(--primary-color);
  z-index:1;
  white-space:nowrap;
  pointer-events:none;
  opacity:.2;
  font-weight:var(--extra-bold-font);
  background: radial-gradient(
  24.55% 51% at 43.95% 24.52%,
  rgb(42 52 57 / 0.2) 0%,
  rgb(42 52 57 / 0.06) 100%
);

  background-clip:text;
  -webkit-background-clip:text}

section.offerwalls {
  border-left:4px solid #0a4d60E6;
  background-color: transparent;
}

section.offerwalls .partners-card {
  position:relative;
  width:170px;
  height:210px;
  background-color:#2a3439;
  transition:transform .3s ease-in-out,background-color .3s ease-in-out,box-shadow .3s ease-in-out;
  cursor:pointer;
  margin-right:7.5px;
  margin-left:7.5px;
  margin-bottom:16px;
  padding-right:.25rem;
  border-radius:20px 3px;
  padding-left:12px}

@media screen and (min-width:768px) {
  section.offerwalls .partners-card {
  margin-left:16px}

}

section.offerwalls .partners-card::before {
  content: "";
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 55px;
  height: 55px;
  background-image: url(../images/icons/arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: transform .3s ease-in-out;
filter: invert(35%) sepia(0%) saturate(0%) hue-rotate(174deg) brightness(95%) contrast(90%);
}

section.offerwalls .partners-card.active::before,section.offerwalls .partners-card:focus::before,section.offerwalls .partners-card:hover::before {
  transform:translateX(-50%) scale(1)}

section.offerwalls .partners-card:hover {
  transform:translateY(-10px);
  box-shadow:0 0 19.4px 0 #077780,0 0 5.7px 0 #077780 inset}

section.offerwalls .partners-card svg {
  transition:background-color .3s ease-in-out;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  border-radius:17px 3px 20px}

section.offerwalls .partners-card svg:hover {
  background-color:#077780}

section.offerwalls .partners-card svg path {
  transition:fill .3s ease-in-out}

section.offerwalls .partners-card:hover svg path {
  fill:#077780}

section.offerwalls .partners-card .partners-content {
  position:relative;
  left:-4px;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
  padding:12px 12px 20px}

section.offerwalls .partners-card .bonus {
  box-shadow:0 0 5.7px 0 #2a3439 inset;
  border:.8px solid var(--primary-color);
  background:#2a3439;
  border-radius:4px;
  max-width:90px;
  height:20px;
  font-size:12px;
  font-weight:var(--medium-font);
  padding:0 5px}

section.offerwalls .partners-card .partners-body {
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center}

section.offerwalls .partners-card .partners-footer .starts {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:5px}

.slid-button .next,.slid-button .prev {
  width:30px;
  height:30px;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:var(--body-bg-color);
  border:1.5px solid #0a4d60E6;
  box-shadow:0 0 6px 0 #0a4d60E6;
  color:#0a4d60E6;
  border-radius:8px;
  cursor:pointer}

.form-control,.form-control:focus,.leaderboard-table-header .earn-info span,.redeem-card-name,.separator,.transaction .nav-link,footer,footer .footer-links a,footer .footer-logo {
  color:var(--white-color)}

footer {
  background-color: rgba(0, 0, 0, 0.5);
  position:relative;
  width:calc(100% - 200px);
  padding-top:2rem;
  padding-bottom:1.5rem}

.footer-sticky {
  margin-top:auto}

.footer-sticky>.container-fluid {
  padding:0 38px}

.footer-sticky .row {
  padding:0 37px}

footer .footer-logo {
  font-size:2.5rem;
  text-transform:uppercase}

footer .footer-links a {
  font-size:.75rem;
  text-decoration:none;
  text-transform:uppercase;
  transition:color .3s}

footer .footer-social a {
  display:inline-block;
  margin-right:15px}

footer .footer-social img {
  width:44px;
  height:44px;
  transition:opacity .3s}

footer .footer-social img:hover {
  opacity:.8}

.modal-content {
background: linear-gradient(135deg, rgba(0, 48, 64, 0.9) 0%, rgba(15, 106, 128, 0.8) 100%);
  border-radius:0 0 20px 20px;
  border-top:4px solid #0a4d60E6;
  box-shadow:0 0 28.3px rgb(0 0 0 / .5);
  padding-bottom:5rem}

.dark-name {
  position:absolute;
  top:50%;
  left:0;
  transform:translateX(60px) translateY(120px) rotate(270deg);
  transform-origin:left center}

.dark-name span {
  text-transform:uppercase;
  color:var(--body-bg-color);
  white-space:nowrap;
  font-size:3.125rem;
  text-shadow:0 .5px 1px #00000080,-1px -1px 1px #000000e0}

.account-info h3,.modal.api .modal-header .offer-title>h4 {
  font-size:1.3rem}

.modal-header {
  border-bottom:none}

.modal-header>.modal-title {
  margin-left:auto;
  font-size:clamp(1rem,4vw,2rem);
  text-transform:uppercase}

.form-control,.modal.auth .btn {
  font-size:.875rem}

.form-control {
  border:none;
  border-bottom:2px solid #0a4d60E6;
  border-radius:2px;
  padding-left:40px}

.form-control::placeholder {
  color:var(--white-color);
  opacity:.5;
  font-size:.875rem}

.form-control,.google-btn,.modal-body .btn.primary-btn {
  height:2.8125rem}

.form-control:focus {
  outline:0;
  box-shadow:none;
  border-bottom-color:var(--primary-color)}

.modal-body .btn.primary-btn,.modal-footer .btn.primary-btn {
  border-radius:0}

.modal.auth>.modal-dialog,.modal.cashout>.modal-dialog {
  width:600px;
  max-width:600px}

.modal.auth .modal-content {
  min-height:535px;
  max-height:auto}

.modal.auth .modal-body {
  margin:0 120px}

.modal.auth .modal-body .forgot .secondary-btn {
  height:45px;
  border-radius:0}

.modal.auth .modal-body .nav-item {
  text-align:center;
  font-size:clamp(.75rem,1.5vw,.875rem);
  text-transform:capitalize}

.modal.auth .modal-body .nav-item>a {
  color:var(--white-color);
  background:0 0;
  border:0;
  border-bottom:2px solid var(--white-color);
  opacity:.3}

.modal.auth .modal-body .nav-item>a:focus,.modal.auth .modal-body .nav-item>a:hover {
  border-color:var(--white-color)!important}

.modal.auth .modal-body .forget:hover {
  text-decoration:underline}

.btn-close {
  background-image:url(data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.64948%2022.5019C0.783506%2018.2229%200.783506%2013.8138%201.64948%209.53486C3.54845%200.0346146%2015.442%200.267954%2022.9546%201.80133C31.9164%203.91805%2031.6166%2015.2517%2030.3339%2022.5185C28.4516%2031.9521%2016.6747%2031.7188%209.21204%2030.2187C7.33141%2029.822%205.61001%2028.8777%204.26438%2027.5047C2.91874%2026.1316%202.00897%2024.391%201.64948%2022.5019Z%22%20fill%3D%22%231C1E39%22%20fill-opacity%3D%220.227451%22%20stroke%3D%22%23CCCCCC%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M11.3066%2019.6931L19.4429%2011.5569%22%20stroke%3D%22%23CCCCCC%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M19.4429%2019.6931L11.3066%2011.5569%22%20stroke%3D%22%23CCCCCC%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
  background-size:contain;
  background-position:center;
  border:none;
  opacity:1}

.separator {
  display:flex;
  align-items:center}

.separator::after,.separator::before {
  content:"";
  display:block;
  background-color:#fff3;
  width:50%;
  height:1px}

.separator::after {
  margin-left:10px}

.icon {
  position:absolute;
  top:50%;
  left:11px;
  transform:translateY(-50%);
  width:15px;
  height:15px}

.form-control:focus + .icon circle,.form-control:focus + .icon path {
  stroke:var(--primary-color)}

section.affiliate,section.cashout {
  border-left:4px solid var(--primary-color);
  padding-top:1.25rem}

section.vpn-detect .vpn {
  width:100%;
  max-width:634px;
  margin:0 auto}

section.vpn-detect .vpn h2 {
  font-size:clamp(1.5rem,5vw,2.5rem);
  font-weight:var(--bold-font)}

section.vpn-detect .vpn p {
  font-size:clamp(1rem,3vw,1.25rem)}

.my-balance {
  background-color:#0009;
  border-bottom:2px solid var(--text-light-color);
  padding:20px;
  height:6.25rem}

.my-balance h6 {
  font-weight:var(--bold-font);
  margin-bottom:1rem}

section.cashout .progress-bar {
  background-color:var(--text-light-color);
  height:22px}

.profile-card .avatar img,.profile-img {
background: linear-gradient(to right, #85d4f8, #4aaed1, #2e7ca3, #1c5778);
}

section.cashout .progress-bar .progress-fill {
  background-color:var(--primary-color);
  height:100%}

.progress-bar .label-end,.progress-bar .label-start {
  position:absolute;
  font-size:.875rem;
  font-weight:var(--bold-font);
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap}

.progress-bar .label-start {
  left:0;
  padding-left:.5rem}

.progress-bar .label-end {
  right:0;
  padding-right:.5rem;
  color:var(--dark-color)}

.redeem-container {
  display:flex;
  justify-content:start;
  flex-wrap:wrap;
  gap:.6rem}

.redeem-card {
  height:9.375rem;
  border-radius:1.25rem;
  box-shadow:0 .25rem .5rem rgb(0 0 0 / .2);
  transition:transform .3s,box-shadow .3s,border .3s;
  flex:1 1 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  cursor:pointer}

.leaderboard-card .container-place,.redeem-card-name {
  position:absolute;
  left:50%;
  transform:translate(-50%,-50%)}

.redeem-card:hover {
  border:2px solid var(--white-color)}

.redeem-card-name {
  top:50%;
  font-size:1rem;
  font-weight:var(--medium-font);
  opacity:0;
  transition:opacity .3s ease-in-out,transform .3s ease-in-out;
  text-align:center;
  width:100%}

.redeem-card-img {
  width:4.8125rem;
  height:4.6875rem;
  object-fit:contain;
  transition:transform .3s ease-in-out}

.redeem-card:hover .redeem-card-img {
  transform:scale(.8);
  transform-origin:top center;
  transition:transform .3s ease-in-out}

.redeem-card:hover .redeem-card-name {
  opacity:1;
  transform:translate(-50%,1.5rem);
  animation:.3s ease-out bounce}

@keyframes bounce {
  0% {
  transform:translate(-50%,-50%)}

20% {
  transform:translate(-50%,-25%)}

50% {
  transform:translate(-50%,0)}

80% {
  transform:translate(-50%,.5rem)}

100% {
  transform:translate(-50%,1.5rem)}

}

@media (max-width:575.98px) {
  .redeem-card {
  flex:1 1 calc(50% - .6rem);
  max-width:calc(50% - .6rem);
  height:122px;
  margin-bottom:.6rem}

}

@media (min-width:576px) {
  .redeem-card {
  flex:1 1 calc(50% - .6rem);
  max-width:calc(50% - .6rem)}

}

@media (min-width:768px) {
  nav.top-nav .profile-avatar {
  width:28px;
  height:28px}

nav.top-nav a.btn {
  width:138px}

.side-nav {
  display:block}

.bottom-menu {
  display:none}

.redeem-card {
  flex:1 1 calc(33.33% - .6rem);
  max-width:calc(33.33% - .6rem)}

}

@media (min-width:992px) {
  .redeem-card {
  flex:1 1 calc(25% - .6rem);
  max-width:calc(25% - .6rem)}

}

@media (min-width:1200px) {
  .redeem-card {
  flex:1 1 calc(20% - .6rem);
  max-width:calc(20% - .6rem)}

}

@media (min-width:1400px) {
  .redeem-card {
  flex:1 1 calc(16.66% - .6rem);
  max-width:calc(16.66% - .6rem)}

}

.modal .redeem-container {
  border-bottom:1px dashed #cccccc4d;
  padding-bottom:1.25rem}

.modal .redeem-title {
  font-size:32px;
  font-weight:var(--bold-font)}

.first-place .username,.prize>p,.second-place .username {
  font-weight:var(--light-font)}

.modal .payment-card {
  width:100%;
  height:auto;
  max-width:100%;
  flex:1 1 calc(33.33% - .6rem);
  min-height:112.5px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:border .3s;
  border:0 solid #fff0}

@media (max-width:576px) {
  nav.top-nav .navbar-brand {
  font-size:1.2rem}

.modal .payment-card {
  flex:1 1 calc(50% - .6rem);
  max-width:100%;
  min-height:90px}

}

@media (max-width:992px) {
  .modal .payment-card {
  flex:1 1 calc(50% - .6rem);
  max-width:100%}

}

.modal .payment-card.selected {
  border:1px solid var(--white-color)}

.modal .payment-card>.payment-card-img {
  width:33.65px;
  height:44.25px;
  object-fit:contain}

.modal p.redeem-note {
  color:var(--text-light-color);
  font-size:14px}

.cover.leaderboard>.classment>h2 {
  font-size:clamp(1rem,2vw + 1rem,1.875rem);
  font-weight:var(--bold-font);
  color:var(--text-light-color)}

.cover.leaderboard>.classment>p {
  color:var(--primary-color);
  font-size:clamp(1rem,2vw + 1rem,2.5rem);
  text-shadow:0 0 38.5px #0a4d60E6;
  margin:32px 0 60px}

.leaderboard-card {
  border-radius:20px 20px 0 0;
  position:relative;
  margin:10px 0}

.leaderboard-card .container-place {
  top:45%;
  width:100%}

.first-place::before,.second-place::before,.third-place::before {
  top:1px;
  border-radius:20px 20px 0 0;
  background-color:var(--footer-bg-color);
  content:""}

.first-place::before,.prize,.second-place::before,.third-place::before {
  left:0;
  position:absolute}

.profile-img {
  border-radius:50%;
  border-width:2px;
  border-style:solid;
  margin:10px 0}

.prize {
  width:100%;
  background-color:var(--sidebar-bg-color);
  display:inline-flex;
  justify-content:center;
  align-items:center}

.first-place .prize {
  height:53px}

.second-place .prize {
  height:46px}

.third-place .prize {
  height:37px}

.prize-border {
  border-bottom:1.5px solid}

.first-place {
  max-height:18rem;
  height:18rem;
  width:206px;
  border-left:1px solid #fff0;
  border-right:1px solid #fff0;
  background:linear-gradient(180deg,#ffc700 0,#fff0 68.84%)}

.first-place::before {
  width:100%;
  height:100%;
  border-bottom:1px solid #ffc700}

.first-place .profile-img {
  width:66px;
  height:66px;
  border-color:#ffc700;
  box-shadow:0 0 25.9px 5px #ffc70057}

.first-place .username {
  color:#ffc700;
  font-size:.875rem}

.first-place .earned {
  color:var(--white-color);
  font-size:.875rem;
  font-weight:var(--medium-font)}

.first-place .prize {
  color:#fac401}

.second-place .prize>p,.second-place .username {
  color:#a6a6a6;
  font-size:.8125rem}

.second-place {
  max-height:15.5rem;
  height:15.5rem;
  width:180px;
  border-left:1px solid #fff0;
  border-right:1px solid #fff0;
  background:linear-gradient(180deg,#a6a6a6 0,#fff0 60.65%)}

.second-place::before {
  width:100%;
  height:100%;
  border-bottom:1px solid #a6a6a6}

.second-place .profile-img {
  width:54px;
  height:54px;
  border-color:#fff;
  box-shadow:0 0 25.9px 5px #a6a6a657}

.second-place .earned {
  color:var(--white-color);
  font-size:.8125rem;
  font-weight:var(--medium-font)}

.third-place {
  max-height:13rem;
  height:13rem;
  width:148px;
  border-left:1px solid #fff0;
  border-right:1px solid #fff0;
  background:linear-gradient(180deg,#2a3439 0,#fff0 63.13%)}

.third-place::before {
  width:100%;
  height:100%;
  border-bottom:1px solid #2a3439}

.third-place .profile-img {
  width:46px;
  height:46px;
  border-color:#2a3439;
  box-shadow:0 0 25.9px 5px #2a3439}

.third-place .username {
  color:#2a3439;
  font-size:.75rem;
  font-weight:var(--light-font)}

.third-place .prize>p {
  font-size:.75rem;
  color:#2a3439}

.third-place .earned {
  color:var(--white-color);
  font-size:.75rem;
  font-weight:var(--medium-font)}

.position-tag {
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%,-50%);
  background:#2d2825;
  border-radius:3px;
  font-weight:var(--medium-font);
  font-size:.75rem;
  z-index:2;
  display:flex;
  justify-content:center;
  align-items:center}

.first-place .position-tag {
  width:54px;
  height:45px;
  border:1.5px solid #ffc700;
  color:#ffc700}

.second-place .position-tag {
  width:47px;
  height:39px;
  border:1.5px solid #a6a6a6;
  color:#a6a6a6}

.third-place .position-tag {
  width:39px;
  height:32px;
  border:1.5px solid #2a3439;
  color:#2a3439}

.leaderboard-container {
  background:rgb(0 0 0 / .6);
  max-width:1200px;
  margin:0 auto;
  border-radius:20px 20px 0 0;
  padding:0;
  box-shadow:0 0 24.6px 0 #000000b5}

.leaderboard-table-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:87px;
  border-bottom:1px solid var(--white-color);
  padding:0 36px}

.leaderboard-table-header .earn-info h2 {
  font-size:clamp(.875rem,2vw + .5rem,1.125rem);
  color:var(--primary-color);
  font-weight:var(--medium-font)}

.leaderboard-table {
  border-radius:8px}

.affiliate-table tr,.leaderboard-table tr {
  height:40px}

.leaderboard-table tbody>tr:hover {
  background:var(--primary-color)}

.leaderboard-table td,.leaderboard-table th {
  color:#fff;
  vertical-align:middle}

.leaderboard-table td:first-child,.leaderboard-table th:first-child {
  width:150px}

.leaderboard-table td:nth-child(2),.leaderboard-table th:nth-child(2) {
  width:450px}

.leaderboard-table td:nth-child(3),.leaderboard-table td:nth-child(4),.leaderboard-table th:nth-child(3),.leaderboard-table th:nth-child(4) {
  width:300px}

.leaderboard-table td {
  border-right:.8px solid var(--white-color)}

.affiliate-table tbody td:last-child,.affiliate-table tbody th:last-child,.leaderboard-table td:last-child,.leaderboard-table th,.leaderboard-table th:last-child,.transaction-table td:last-child,.transaction-table th:last-child {
  border-right:none}

.profile-card {
  background-color:#0009;
  border-radius:20px;
  padding:25px}

.profile-card .avatar img {
  width:90px;
  height:90px;
  border-radius:50%;
  border:2px solid #fff}

.profile-card .profile-details h2 {
  font-size:clamp(1rem,2vw + 1rem,1.75rem)}

.profile-card .country {
  font-size:1rem}

.statistics .stat-item svg {
  width:1.5rem;
  height:1.5rem;
  color:var(--primary-color)}

.statistics .stat-title {
  font-size:clamp(.875rem,2vw,1rem)}

.statistics .stat-value {
  font-size:clamp(1rem,2vw,1.5rem);
  font-weight:700}

.account-info h3 {
  margin-bottom:15px;
  font-weight:700}

.account-info p {
  margin-bottom:10px;
  color:#bbb}

.account-info .form-group input {
  background-color:#222;
  color:#fff;
  border:1px solid #444;
  padding:10px;
  border-radius:8px}

.account-info select {
  appearance:none;
  cursor:pointer;
  padding-right:30px}

.account-info .icon {
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none}

.account-info select>option {
  color:var(--primary-color);
  border-radius:0;
  -webkit-border-radius:0}

.transaction .table td,.transaction .table th {
  background-color:#fff0;
  color:var(--white-color)}

.modal.api>.modal-dialog {
  width:550px;
  max-width:550px;
  align-items:center;
  justify-content:center;
  max-height:80vh}

.modal.api .modal-header {
  box-shadow:0 0 16px 0 #00000080;
  padding:30px 25px 13px}

.modal.api .modal-header .offer-title {
  max-width:250px}

.modal.api .header-offer-img>img {
  width:90px;
  height:90px;
  object-fit:cover;
  border:2px solid var(--white-color);
  border-radius:16px}

.modal.api .header-offer-img .os {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  background-color:var(--white-color);
  width:fit-content;
  height:21px;
  padding:10px 14px;
  border-radius:13.5px}

.modal.api .modal-body {
  padding:0 0 0 38px}

@media (max-width:767px) {
  .content,footer {
  margin-left:0}

.bottom-menu {
  display:flex}

footer {
  width:100%;
  min-height:50vh}

.leaderboard-table td:first-child,.leaderboard-table td:nth-child(2),.leaderboard-table td:nth-child(3),.leaderboard-table td:nth-child(4),.leaderboard-table th:first-child,.leaderboard-table th:nth-child(2),.leaderboard-table th:nth-child(3),.leaderboard-table th:nth-child(4) {
  font-size:.875rem}

.modal.api .modal-body {
  padding:0 0 0 26px}

}

.modal.api .modal-body .task {
  padding:18px 0}

.modal.api .modal-footer {
  padding:0 27px}

.modal.api .header-offer-img .os>img {
  height:11px;
  filter:invert(1) grayscale(1)}

.modal.api .modal-body .description {
  background-color:var(--sidebar-bg-color);
  border-radius:16px;
  box-shadow:0 0 17.6px 1px #00000040}

.modal.api .modal-body .btn.primary-btn,.modal.api .modal-body .event-info {
  margin-right:38px}

.modal.api .modal-body .event {
  max-height:60vh}

.modal.api .modal-body .event::-webkit-scrollbar {
  width:8px}

.modal.api .modal-body .event::-webkit-scrollbar-track {
  background:0 0;
  box-shadow:0 0 4.2px 0 #00000040}

.modal.api .modal-body .event::-webkit-scrollbar-thumb {
  background-color:var(--text-light-color)}

.modal.api .modal-body .event span.badge {
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:var(--primary-color);
  width:32px;
  height:32px;
  min-width:32px;
  min-height:32px;
  border-radius:4px;
  font-weight:var(--bold-font)}

.modal.api .modal-body .description p,.modal.api .modal-body .requirement p {
  font-size:12px;
  word-wrap:break-word}

.modal.api .modal-footer .primary-btn {
  height:45px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  font-weight:var(--bold-font);
  position:relative;
  padding-left:30px}

.modal.api .modal-footer .primary-btn span {
  position:relative}

.modal.api .modal-footer .primary-btn span::before {
  content:"";
  display:block;
  width:0;
  height:0;
  border-left:10px solid var(--white-color);
  border-top:6px solid #fff0;
  border-bottom:6px solid #fff0;
  margin-right:8px;
  position:absolute;
  left:-20px;
  top:50%;
  transform:translateY(-50%)}

.transaction-table td,.transaction-table th {
  border-left:1px solid #dee2e6;
  border-right:1px solid #dee2e6;
  height:40px;
  border-top:none;
  border-bottom:none}

.transaction-table td:first-child,.transaction-table th:first-child {
  border-left:none}

.transaction-table thead th {
  border-left:none;
  border-right:none}

.profile-transaction-card {
  border-radius:33px;
  background-color:var(--footer-bg-color);
  color:#fff;
  width:500px}

.transaction-icon {
  width:72px;
  height:72px;
  border-radius:16px;
  background:linear-gradient(137.47deg,#0a4d60E6 3.98%,maroon 92.69%);
  object-fit:cover;
  padding:12px;
  display:flex;
  justify-content:center;
  align-items:center}

.transaction-icon>p {
  font-size:3rem;
  font-weight:var(--semi-medium-font);
  text-transform:uppercase}

.card-body {
  background-color:#242424}

.btn-icon {
  background:0 0;
  border:none;
  color:#fff}

.chevron-down {
  width:16px;
  height:15px;
  background-color:#ccc;
  clip-path:polygon(39.356% 90.237%,39.356% 90.237%,41.007% 92.572%,42.976% 94.388%,45.185% 95.685%,47.552% 96.463%,50% 96.723%,52.448% 96.463%,54.815% 95.685%,57.024% 94.388%,58.993% 92.572%,60.644% 90.237%,96% 27.605%,96% 27.605%,97.212% 24.815%,97.802% 21.955%,97.812% 19.109%,97.286% 16.363%,96.27% 13.805%,94.806% 11.519%,92.938% 9.591%,90.712% 8.108%,88.17% 7.155%,85.357% 6.818%,14.643% 6.818%,14.643% 6.818%,11.83% 7.155%,9.288% 8.108%,7.061% 9.591%,5.194% 11.519%,3.73% 13.805%,2.714% 16.363%,2.188% 19.109%,2.198% 21.955%,2.787% 24.815%,4% 27.605%,39.356% 90.237%);
  transition:transform .3s}

button[aria-expanded="true"] .chevron-down {
  transform:rotate(-90deg)}

.offers-details .all-info {
  border-bottom:1px solid var(--white-color);
  padding-bottom:16px}

.offers-details .all-info h5,.offers-details .all-info p {
  font-size:14px;
  font-weight:var(--semi-medium-font)}

.profile-card.transaction .nav-tabs .nav-link {
  border:0}

.profile-card.transaction .nav-tabs .nav-link.active {
  border:0!important;
  border-bottom:4px solid var(--primary-color)!important;
  isolation:unset!important}

.profile-card.transaction .nav-tabs .nav-link:focus,.profile-card.transaction .nav-tabs .nav-link:hover {
  border-color:#fff0}

.affiliate-table {
  background-color:#0009;
  max-width:900px;
  border-top:1px solid var(--white-color)}

.affiliate-table tbody td,.affiliate-table tbody th {
  text-align:center;
  border-right:1px solid var(--white-color)}

.affiliate-table tbody th:first-child,.affiliate-table th:nth-child(3) {
  width:350px}

.affiliate-table tbody th:nth-child(2) {
  width:200px}

section.tos .tos-title h1 {
  font-weight:var(--bold-font);
  font-size:1.875}

section.tos .tos-content {
  background:#000000b2;
  border-top:2px solid var(--white-color);
  padding:26px 31px;
  margin:0 38px;
  border-bottom-right-radius:20px;
  border-bottom-left-radius:20px}

section.tos .tos-content div {
  white-space:normal!important}

section.tos .tos-content h1,section.tos .tos-content h2,section.tos .tos-content h3,section.tos .tos-content h4,section.tos .tos-content h5,section.tos .tos-content h6 {
  font-family:'Roboto', sans-serif !important}

.cookie-bar {
  background-color:#2a3439;
  position:fixed;
  bottom:-100%;
  right:0;
  z-index:9999;
  max-width:385px;
  width:100%;
  border-top:2px solid #0a4d60E6;
  border-bottom-right-radius:12px;
  border-bottom-left-radius:12px;
  margin:20px;
  transition:bottom .5s}

.cookie-bar .cookie-container {
  padding:22px 25px;
  box-sizing:border-box}

.cookie-bar img {
  width:30px;
  height:auto}

.cookie-bar .cookie-btn {
  border-radius:4px;
  padding:10px;
  border:none;
  width:100%;
  min-height:52px}

.cookie-bar .reject {
  background-color:#000000;
  color:#0a4d60E6}

@media (max-width:768px) {
  nav.top-nav .avatar-dt {
  background-color:#fff0}

.modal-content {
  position:absolute;
  top:0;
  left:0;
  border-radius:0;
  height:100%}

.modal.auth>.modal-dialog,.modal.cashout>.modal-dialog {
  width:100%;
  max-width:100%;
  min-height:100%;
  max-height:100%}

.modal.auth .modal-body {
  margin:0 20px}

section.vpn-detect .vpn {
  padding:0 20px}

.leaderboard-table-header {
  padding:0 10px}

.modal-dialog,.modal.api>.modal-dialog {
  width:100%;
  max-width:100%;
  height:100%;
  max-height:100%;
  margin:0}

.modal.api .modal-header .offer-title>h4 {
  font-size:1rem;
  max-width:180px}

.modal.api .modal-body .btn.primary-btn,.modal.api .modal-body .event-info {
  margin-right:20px}

section.tos .tos-content {
  margin:0}

.cookie-bar {
  margin:0;
  left:0;
  max-width:100%;
  border-bottom-right-radius:0;
  border-bottom-left-radius:0}

.cookie-bar .cookie-btn {
  padding:12px}

}

section.live-stats {
  position:relative;
  height:5rem;
  display:flex;
  align-items:center;
  background-color: rgba(0, 0, 0, 0.5); 
backdrop-filter: blur(5px); }

section.live-stats::after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:.0625rem;
  background:linear-gradient(to right,#fff 0,#fff0 95%,#fff0 100%)}

section.live-stats .stats-card {
  display:flex;
  justify-content:start;
  align-items:center;
  background-color:#272a30;
  margin-right:12px;
  box-shadow:.0625rem .0625rem .3625rem rgba(0,0,0,.8);
  height:2.5rem;
  min-width:10rem;
  max-width:10.5rem;
  flex:0 0 auto;
  border-radius:.6875rem}

.icon-stats {
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 .375rem;
  width:1.75rem;
  height:1.75rem;
  border-radius:.3125rem}

.stats-content>.title {
  color:var(--white-color);
  font-weight:var(--medium-font);
  font-size:.72rem;
  text-transform:lowercase}

.stats-content>.desc {
  font-weight:var(--medium-font);
  font-size:.625rem;
  color:var(--text-light-color);
  text-transform:capitalize}

.stats-payout {
  background-color:#2a3439;
  height:1.125rem;
  color:var(--white-color);
  font-size:.625rem;
  font-weight:var(--semi-medium-font);
  border-radius:.3125rem;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:.3125rem;
  margin:0 auto}