.modal__root {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050;
}

.modal__surface {
  width: 100%;
  max-width: 500px;
  margin: auto;
}

.login__container {
  background-color: #fff;
}

.login__form {
  width: 80vw;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.login__message {
  width: 100%;
  font-style: italic;
  font-size: 0.75rem;
  margin-bottom: 1rem;
  color: #000;
}

.login__extra {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.login__extra a {
  color: #000;
  padding: 0.25rem;
  font-weight: 500;
  text-decoration: underline;
}

.login__error {
  display: block;
  color: #ff4d4d;
  margin: 0.5rem 0;
  font-size: 0.875rem;
  text-transform: capitalize;
}

.bank-select {
  margin-bottom: 1rem;
}
.bank-select--disabled {
  pointer-events: none;
  color: hsla(0, 0%, 100%, 0.38);
}
.bank-select__label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}
.bank-select__body {
  display: grid;
  overflow: hidden;
  grid-gap: 0.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bank-select__item {
  position: relative;
  overflow: hidden;
  height: 60px;
  background-color: #4a5059;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.2s ease;
}
.bank-select__item--active .bank-select__icon {
  color: #139c44;
}
@media (hover: hover) and (min-width: 1024px) {
  .bank-select__item:hover {
    background-color: #3e434b;
  }
}
.bank-select__icon {
  position: absolute;
  left: 0.625rem;
  pointer-events: none;
}
.bank-select label {
  display: flex;
  height: 100%;
  cursor: pointer;
  padding: 0.5rem 0.5rem 0.5rem 2rem;
}
.bank-select label img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
.bank-select__input {
  position: absolute;
  visibility: hidden;
}
.bank-select--d .bank-select__body {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.preset-amounts {
  margin-bottom: 1rem;
}
.preset-amounts .app-button {
  width: 100%;
  margin-bottom: 1rem;
}
.preset-amounts__label {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}
.preset-amounts__label button {
  font-size: 1rem;
  color: #fff;
}
.preset-amounts__body {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 400px) {
  .preset-amounts__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.bonus-panel {
  margin-bottom: 1rem;
}
.bonus-panel__select {
  overflow: hidden;
  margin-bottom: 0.5rem;
  border-radius: 5px;
  border: 1px solid hsla(0, 0%, 100%, 0.6);
}
.bonus-panel__current {
  display: grid;
  padding: 0.5rem;
  grid-gap: 0.25rem;
  align-items: center;
  border-radius: 5px;
  border: 1px solid #139c44;
  grid-template-columns: 1fr auto;
}
.bonus-panel__current > div,
.bonus-panel__current > i,
.bonus-panel__current h3,
.bonus-panel__current h5 {
  grid-column: 1/2;
}
.bonus-panel__current a {
  grid-row: 1/4;
}
.bonus-panel__current--disabled {
  border-color: #fdd835;
}
.bonus-panel__details {
  grid-row: 3/4;
  font-size: 0.75rem;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: auto 1fr;
}
.bonus-panel__details i {
  color: #fdd835;
}
.bonus-panel__details p {
  display: flex;
  flex-direction: column;
}
.bonus-panel__details p span,
.bonus-panel__details p strong {
  margin: 0.125rem 0;
}
.bonus-panel header {
  display: flex;
  align-items: center;
  position: relative;
}
.bonus-panel header i {
  position: absolute;
  left: 0.5rem;
  pointer-events: none;
}
.bonus-panel header i[class*="arrow-"] {
  left: unset;
  right: 0.5rem;
}
.bonus-panel header button {
  width: 100%;
  font-size: 0.875rem;
  color: #fff;
  padding: 0.375rem 1.5rem;
}
.bonus-panel header button:disabled,
.bonus-panel header button:hover:disabled {
  cursor: not-allowed;
  color: hsla(0, 0%, 100%, 0.38);
  background-color: #4a5059;
}
.bonus-panel header.bonus-panel--disabled i {
  color: hsla(0, 0%, 100%, 0.38);
}
.bonus-panel input {
  position: absolute;
  visibility: hidden;
}
.bonus-panel__options {
  display: grid;
  grid-gap: 1px;
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.bonus-panel__item {
  display: grid;
  padding: 0.5rem;
  grid-gap: 0.5rem;
  align-items: center;
  background-color: #1d2b43;
  grid-template-columns: auto 1fr auto;
}
.bank-select {
  margin-bottom: 1rem;
}
.bank-select--disabled {
  pointer-events: none;
  color: hsla(0, 0%, 100%, 0.38);
}
.bank-select__label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}
.bank-select__body {
  display: grid;
  overflow: hidden;
  grid-gap: 0.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bank-select__item {
  position: relative;
  overflow: hidden;
  height: 60px;
  background-color: #4a5059;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.2s ease;
}
.bank-select__item--active .bank-select__icon {
  color: #139c44;
}
@media (hover: hover) and (min-width: 1024px) {
  .bank-select__item:hover {
    background-color: #3e434b;
  }
}
.bank-select__icon {
  position: absolute;
  left: 0.625rem;
  pointer-events: none;
}
.bank-select label {
  display: flex;
  height: 100%;
  cursor: pointer;
  padding: 0.5rem 0.5rem 0.5rem 2rem;
}
.bank-select label img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
.bank-select__input {
  position: absolute;
  visibility: hidden;
}
.bank-select--d .bank-select__body {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wallet-detail {
  margin-bottom: 1rem;
}
.wallet-detail__label {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}
.wallet-detail__body {
  position: relative;
  display: grid;
  grid-gap: 0.25rem;
  overflow: hidden;
  padding: 0.25rem 0;
  font-size: 0.75rem;
  justify-content: start;
  grid-template-columns: auto 1fr auto;
  border-radius: 5px;
  background-color: #4a5059;
}
.wallet-detail__body.wallet-detail__body--muted label,
.wallet-detail__body.wallet-detail__body--muted span {
  color: hsla(0, 0%, 100%, 0.6);
}
.wallet-detail__btn-copy {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wallet-detail__btn-copy.has-qr {
  position: relative;
  left: 0.5rem;
  right: unset;
  bottom: unset;
  grid-row: 2/3;
  grid-column: 1/3;
  justify-self: start;
  align-self: center;
}
.wallet-detail__btn-copy.wallet-detail--copied {
  border: 1px solid #139c44;
}
.wallet-detail__btn-copy i {
  color: #139c44;
  margin-left: 0.25rem;
}
.wallet-detail__labels,
.wallet-detail__values {
  display: flex;
  flex-direction: column;
}
.wallet-detail__labels label,
.wallet-detail__labels span,
.wallet-detail__values label,
.wallet-detail__values span {
  display: flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
  height: 24px;
  padding: 0.25rem 0.5rem;
}
.wallet-detail__labels label:after,
.wallet-detail__values label:after {
  position: absolute;
  right: 0;
  content: ":";
}
.wallet-detail__values {
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
}
.wallet-detail__qr {
  width: 100%;
  max-width: 8rem;
  grid-row: 1/3;
  grid-column: 3/4;
  align-self: center;
  justify-self: center;
  padding: 0.25rem 0.5rem;
}
.wallet-detail__qr img {
  display: block;
  width: 100%;
}
.no-scroll {
  overflow: hidden;
  height: 100%;
}

.account .form-heading {
  color: #dfbb06;
  margin: 0.5rem 0;
  text-transform: uppercase;
}

.account form {
  margin-bottom: 1rem;
}

.account .user-form {
  padding-bottom: 1rem;
}

.account .account__bank,
.account .user-form {
  border-bottom: 1px solid rgba(213, 214, 213, 0.1);
}

.account .alert {
  margin-bottom: 1rem;
}

.account .btn--change-address {
  display: block;
  margin: 0 auto 1rem;
}

.account--d {
  margin-top: 0.5rem;
  padding: 2rem 3rem;
  background-color: #1d2b43;
  display: grid;
  align-items: start;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.account--d .page-header {
  grid-column: 1/-1;
}

.account--d .form-heading {
  margin-top: 0;
}

.account--d .account__bank,
.account--d form {
  padding: 1rem;
  margin-bottom: 0;
  background-color: #060d18;
  border-radius: 5px;
}

.account--d .account__bank .btn,
.account--d form .btn {
  max-width: 20rem;
  margin: 0 auto;
}

.account--d .account__bank,
.account--d .user-form {
  grid-column: 1/7;
  border-bottom: none;
}

.account--d .reset-password-form {
  grid-row: 2/3;
  grid-column: 7/10;
}

.account--d .account--editable,
.account--d .account--locked,
.account--d .account__bank {
  display: grid;
  grid-column-gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account--d .account__bank .form-heading {
  grid-column: 1/-1;
}

.account--d .input-confirm {
  width: unset;
  grid-column: 1/-1;
  justify-self: start;
}

.account--d .btn--change-address {
  grid-column: 1/-1;
}

.date-select .date-select__wrapper {
  width: 100%;
}

.date-select .date-select__calendar {
  border: none;
  margin-top: 0.5rem;
  border-radius: 5px;
  background-color: #4a5059;
}

.date-select .date-select__calendar .prev:after {
  border-right-color: #fff;
}

.date-select .date-select__calendar .next:after {
  border-left-color: #fff;
}

.date-select .date-select__calendar .next:not(.disabled):hover,
.date-select .date-select__calendar .prev:not(.disabled):hover,
.date-select .date-select__calendar .up:not(.disabled):hover {
  background: unset;
}

.date-select .date-select__calendar .cell {
  border: none;
  font-size: 0.875rem;
  height: 34px;
  line-height: 34px;
}

.date-select .date-select__calendar .cell.selected {
  background: unset;
  color: #dfbb06;
}

.date-select .date-select__calendar .cell.disabled {
  color: hsla(0, 0%, 100%, 0.38);
}

.date-select .date-select__calendar .cell:not(.blank):not(.disabled).day:hover,
.date-select
  .date-select__calendar
  .cell:not(.blank):not(.disabled).month:hover,
.date-select
  .date-select__calendar
  .cell:not(.blank):not(.disabled).year:hover {
  border: none;
  color: #dfbb06;
}

.input__placeholder {
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
}

.input__placeholder label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.input__placeholder .input__root {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.input__placeholder .input__root .input {
  color: hsla(0, 0%, 100%, 0.38);
  border-color: hsla(0, 0%, 100%, 0.38);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.input__placeholder .input__root .input--inverse {
  color: #000;
  background-color: #f0f0f0;
  border-color: transparent;
}

.input__placeholder .input__root .input__icon {
  position: absolute;
  left: 0.5rem;
}

.input__placeholder .input__root button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding: 0.375rem 0.5rem;
}

.input__placeholder .input__root button.copied i {
  color: #139c44;
}

.history__content {
  margin: 0.5rem 0;
}

.history__group {
  margin-bottom: 2rem;
}

.history__group li {
  margin: 0.75rem 0;
}

.history__group:last-child {
  margin-bottom: 0;
}

.history .alert {
  margin: 1rem 0;
}

.history--d {
  margin-top: 0.5rem;
  padding: 2rem 3rem;
  background-color: #1d2b43;
}

.bonuses {
  min-height: calc(100vh - 150px);
}

.bonuses .pagination {
  margin: 0.5rem 0;
}

.bonuses__nav {
  margin-top: 0.5rem;
}

.bonuses__nav ul {
  display: flex;
  overflow: hidden;
  border-radius: 5px;
}

.bonuses__nav ul li {
  flex: 1 1 33.33333%;
  margin-right: 1px;
}

.bonuses__nav ul li:last-child {
  margin-right: 0;
}

.bonuses__nav ul li .btn {
  width: 100%;
  border-radius: 0;
}

.bonuses__nav ul li.bonuses__nav--active .btn {
  color: #dfbb06;
  background-color: #060d18;
}

@media (min-width: 1024px) {
  .bonuses__nav ul {
    display: inline-flex;
  }
}

.bonuses__content {
  overflow: hidden;
  margin-top: 0.5rem;
}

.bonuses--d {
  min-height: unset;
  margin-top: 0.5rem;
  padding: 2rem 3rem;
  background-color: #1d2b43;
}

.bonuses--d .bonuses__content {
  overflow: hidden;
  border-radius: 5px;
}

.bonuses--d .bonuses__content header {
  padding: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  background-color: #c98b07;
  display: grid;
  grid-gap: 0.25rem;
  justify-items: center;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.bonuses--d .bonuses__content header .bonus-item__name {
  grid-column: span 2;
}

.promotions {
  margin: 0.5rem 0;
}

@media (min-width: 1024px) {
  .promotions {
    margin-bottom: 1rem;
  }
}

.promotions .promotions-nav {
  margin-bottom: 1rem;
}

.promotions .promotions-nav ul {
  display: flex;
  overflow: auto;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
}

.promotions .promotions-nav ul::-webkit-scrollbar {
  display: none;
}

.promotions .promotions-nav li {
  flex: 1 1 20%;
  padding: 0 0.25rem;
  scroll-snap-align: center;
}

.promotions .promotions-nav li:first-child {
  padding-left: 0;
}

.promotions .promotions-nav li:last-child {
  padding-right: 0;
}

.promotions .promotions-nav li .app-link--exact-active {
  background-color: #dfbb06;
}

.promotion {
  font-size: 0.75rem;
  overflow: hidden;
  border-radius: 5px;
  background-color: #1d2b43;
}

.promotion img {
  width: 100%;
}

.promotion h2 {
  padding: 0.25rem;
  text-align: center;
  text-transform: uppercase;
}

.promotion p {
  margin: 0.25rem 0;
}

.promotion p:first-child {
  margin-top: 0;
}

.promotion__end {
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
  color: hsla(0, 0%, 100%, 0.6);
  background-color: #1d2b43;
  border-bottom: 1px solid #060d18;
}

.promotion__content {
  padding: 0.5rem;
}

.promotion__content table {
  width: 100%;
  border: none;
  margin: 0 auto;
  text-align: center;
  border-collapse: collapse;
}

.promotion__content table td,
.promotion__content table th {
  border: 1px solid #fff;
  padding: 0.5rem 0.25rem;
}

.promotion__content ol,
.promotion__content ul {
  list-style-position: inside;
}

.promotion--d {
  font-size: 0.875rem;
}

.promotion--d .promotion__content {
  padding: 1rem 5rem;
  margin: 0 auto;
}

.promotion--d .promotion__content td,
.promotion--d .promotion__content th {
  padding: 0.5rem 1rem;
}
.withdraw .withdraw-content {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.withdraw--d {
  display: grid;
  align-items: start;
  padding: 2rem 3rem;
  margin-top: 0.5rem;
  grid-column-gap: 2rem;
  background-color: #1d2b43;
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.withdraw--d .page-header {
  grid-column: 1/-1;
}

.withdraw--d .side-nav {
  grid-column: 1/3;
}

.withdraw--d .withdraw-content {
  grid-column: 3/-1;
}
.activity {
  margin: 0.5rem 0;
}
.activity__nav {
  width: calc(100% + 1rem);
  transform: translateX(-0.5rem);
}
@media (min-width: 1024px) {
  .activity__nav {
    width: auto;
    transform: unset;
  }
}
.activity__nav ul {
  display: flex;
  overflow-x: scroll;
  overflow-x: overlay;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
}
.activity__nav ul::-webkit-scrollbar {
  display: none;
}
.activity__nav ul li {
  scroll-snap-align: start;
}
.activity__nav ul li:last-child {
  margin-right: 0;
}
.activity__nav ul li .btn {
  width: 100%;
  border-radius: 0;
}
.activity__nav ul li.activity__nav--active .btn {
  color: #dfbb06;
  background-color: #060d18;
}
@media (min-width: 1024px) {
  .activity__nav ul {
    display: inline-flex;
  }
}
.activity aside {
  padding: 0.5rem;
  background-color: #060d18;
}
.activity__content {
  overflow: hidden;
  margin-top: 0.5rem;
  border-radius: 5px;
  background-color: #060d18;
}
@media (min-width: 1024px) {
  .activity__content {
    margin-top: 1rem;
  }
}
.activity__content__header {
  padding: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: #fff;
  background-color: #c98b07;
  display: grid;
  grid-gap: 0.5rem;
  justify-items: center;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.activity__content__header--coupon {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.activity__item {
  display: grid;
  padding: 0.5rem;
  font-size: 0.875rem;
  grid-row-gap: 0.5rem;
  align-items: center;
  justify-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.activity__item:nth-child(2n) {
  background-color: #1d2b43;
}
.activity__item--coupon .activity__item__type {
  justify-self: end;
}
.activity__item__created,
.activity__item__date,
.activity__item__updated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: Avenir, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
}
.activity__item__amount,
.activity__item__date,
.activity__item__gain,
.activity__item__provider,
.activity__item__service,
.activity__item__updated {
  justify-self: end;
}
@media (min-width: 1024px) {
  .activity__item {
    grid-gap: 0.5rem;
    justify-items: center;
  }
  .activity__item--casino,
  .activity__item--payment {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .activity__item--coupon {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .activity__item--coupon .activity__item__type,
  .activity__item__amount,
  .activity__item__date,
  .activity__item__gain,
  .activity__item__provider,
  .activity__item__service,
  .activity__item__updated {
    justify-self: center;
  }
}
.activity__load {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
}
@media (min-width: 1024px) {
  .activity__load {
    margin-top: 1rem;
  }
}