body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
figure,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

fieldset,
img {
  border: 0
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: 400
}

li {
  list-style: none
}

caption,
th {
  text-align: left
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: 400
}

q:before,
q:after {
  content: ''
}

abbr,
acronym {
  border: 0;
  font-variant: normal
}

sup {
  vertical-align: text-top
}

sub {
  vertical-align: text-bottom
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit
}

legend {
  color: #000
}

table {
  font-size: inherit;
  font: 100%
}

pre,
code,
kbd,
samp,
tt {
  font-family: monospace;
  line-height: 100%
}

* {
  box-sizing: border-box
}



.container-product {
  display: table;
  width: 100%;
  height: 100vh;
  bottom: 0px;
  position: relative
}

.logo-product {
  margin: 10px auto;
  text-align: center;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.47) 58%, rgba(0, 0, 0, 0.1) 100%)
}

.logo-product img {
  max-width: 180px;
  width: auto
}

.foot-product {
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  margin: auto;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.47) 58%, rgba(0, 0, 0, 0.1) 100%)
}

.store-product img {
  width: 135px;
  margin: 10px
}

@media only screen and (min-width:1024px) {
  .store-product img {
    width: 200px
  }
}

h2 {
  margin-bottom: 5px
}

.flex-product {
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  margin: auto;
  text-align: left;
  justify-content: center;
  align-items: center;
  padding: 10px
}

.flex-product p {
  text-align: center;
  font-size: 18px
}

.acquisition p {
  text-align: left;
  color: #fff
}

@media screen and (min-width:600px) {
  .flex-product {
    justify-content: space-between
  }
}

.txt-product {
  margin: 10px
}

.store-product {
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center
}

.txt-product h2,
.flex-product h2,
.txt-product>p,
.flex-product>p {
  color: #fff
}

.i-block {
  display: inline-block;
  vertical-align: top
}

.upper {
  text-transform: uppercase
}

.thin {
  font-weight: 300 !important
}

.hcenter {
  margin: 0px auto
}

.wrap-medium {
  min-width: 280px;
  max-width: 480px;
  padding: 0px 15px;
  overflow: hidden;
  margin-bottom: 20px;
  margin-top: 20px
}

.g3 {
  float: left;
  width: 33.3333%;
  padding: 2px;
  position: relative
}

.badge-sm:after {
  content: attr(data-gametype);
  right: 2px;
  position: absolute;
  font-size: 11px;
  padding: 2px;
  width: 30px;
  height: 16px;
  bottom: 10px
}

.badge-sm.free:after {
  background-color: #006399
}

.badge-sm.guest:after {
  background-color: #01ad3d
}

.img-fluid {
  width: 100%
}

.img-fluid img {
  width: 100%
}

.error-page {
  overflow-x: hidden;
  min-height: 55%
}

.error-container h1 {
  font-size: 30px
}

.error-container h2 {
  color: #0172fe;
  text-overflow: initial;
  white-space: normal;
  padding: 0px 15px
}

.error-container .btn {
  min-width: 240px;
  line-height: 38px;
  color: #fff
}

.error-container .btn.btn-red {
  background-color: #f84975
}

.line-s {
  display: block;
  height: 2px;
  width: 200px;
  margin: 20px auto;
  border-top: 1px solid #0172fe
}

.block-150 {
  width: 150px
}

.error-msg a:visited,
.error-msg a:link,
.error-msg a:focus,
.error-msg a {
  font-weight: bold
}

body.error .error-store-link .error-store-link-wrapper p span {
  border: none;
  transform: none
}

.error-container,
#forgot {
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: #232f43
}

.error-container button,
#forgot button {
  margin-top: 30px;
  background-color: #0172fe;
  border: none;
  font-weight: bold;
  text-transform: uppercase
}

.error-container .btn,
#forgot .btn {
  background-color: #0172fe;
  border: none;
  font-weight: bold
}

.error-container h3,
#forgot h3,
.error-container h4,
#forgot h4 {
  width: 80%;
  margin: 0 auto;
  max-width: 500px
}

.error-container h3,
#forgot h3 {
  clear: both
}

.error-container input,
#forgot input {
  text-align: center;
  max-width: 240px;
  margin: 0 auto;
  margin-top: 30px
}

.error-container .reset,
#forgot .reset {
  display: none
}

#forgot h1 {
  margin-bottom: 30px
}

#forgot button {
  font-weight: normal
}

.error-msg {
  margin-bottom: 14px
}

.about-page,
.terms-page {
  text-align: left
}

.about-page h1,
.terms-page h1 {
  margin-top: 30px;
  margin-bottom: 25px
}

.LoginPageCtr hr {
  width: 100%
}

.LoginPageCtr .connect {
  background: transparent
}

.LoginPageCtr section {
  overflow-x: inherit
}

.LoginPageCtr .link-bottom {
  width: 260px;
  margin: 0 auto;
  text-align: left;
  margin-bottom: 45px
}

.LoginPageCtr #login h3 {
  width: 100px;
  margin: 0 auto;
  margin-top: -16px;
  margin-bottom: 40px;
  background-color: #0172fe
}

.LoginPageCtr ::-webkit-input-placeholder {
  color: #aaa
}

.LoginPageCtr ::-moz-placeholder {
  color: #aaa
}

.LoginPageCtr :-ms-input-placeholder {
  color: #aaa
}

.LoginPageCtr input:-moz-placeholder {
  color: #aaa
}

.LoginPageCtr .btn-container {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #232f43
}

.LoginPageCtr .btn-container button {
  color: #fff;
  min-width: 220px
}

@media (min-width:768px) {
  .LoginPageCtr footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
  }
}

.settings-page .settings-box h1 {
  display: none
}

.panel-body.loadingDocs {
  background: linear-gradient(270deg, rgba(35, 47, 67, 0), rgba(1, 114, 254, 0.3), rgba(35, 47, 67, 0));
  background-size: 600% 600%;
  -webkit-animation: waitForTerms 2s ease infinite;
  -moz-animation: waitForTerms 2s ease infinite;
  animation: waitForTerms 2s ease infinite
}

@-webkit-keyframes waitForTerms {
  0% {
    background-position: 0% 51%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 51%
  }
}

@-moz-keyframes waitForTerms {
  0% {
    background-position: 0% 51%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 51%
  }
}

@keyframes waitForTerms {
  0% {
    background-position: 0% 51%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 51%
  }
}

.static-page {
  overflow-x: auto;
  padding: 8px
}

body[class="settings-page"] footer {
  display: block;
  margin-top: 30px;
  background: transparent;
  border: none
}

body[class="settings-page"] footer .footer {
  background-image: none;
  text-align: center;
  padding: 0;
  padding-bottom: 30px
}

body[class="settings-page"] footer .footer .link-foot {
  display: block;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 16px;
  line-height: 34px
}

body[class="settings-page"] header {
  background: #0172fe
}

body[class="settings-page"] header .link-head {
  padding: 0
}

body[class="settings-page"] header .logo-header {
  display: block;
  height: 60px;
  width: 160px;
  background-position: center 20px;
  background-size: contain;
  margin-left: 8px
}

body[class="settings-page"] #useris-smartpsw {
  min-height: 50vh
}

body[class="settings-page"] #useris-smartpsw .form__control {
  text-align: center
}

body[class="settings-page"] #useris-smartpsw .btn-success {
  color: #fff
}

body[class="settings-page"] #useris-smartpsw h2 {
  white-space: normal;
  overflow: visible;
  margin: 0
}

body[class="settings-page"] #useris-smartpsw .account30 p.center-block {
  text-align: left
}

body[class="settings-page"] #useris-smartpsw .account30 .container--wrap {
  margin: 10px auto
}

body[class="settings-page"] #useris-smartpsw .form__line {
  margin: 10px auto
}

body[class="settings-page"] #useris-smartpsw .form__line label {
  position: static;
  display: block
}

body[class="settings-page"] #useris-smartpsw input {
  border-radius: 0
}

body[class="settings-page"] #useris-smartpsw input:focus {
  border-color: #0172fe
}

.login-page .uo30 .otp-login #user-feedback.form__message .message,
.wrapperlogin-page .uo30 .otp-login #user-feedback.form__message .message {
  color: rgba(33, 33, 33, 0.8) !important
}

.login-page .uo30 .otp-login #blackboard input[type='text'],
.wrapperlogin-page .uo30 .otp-login #blackboard input[type='text'],
.login-page .uo30 .otp-login #blackboard input[type='password'],
.wrapperlogin-page .uo30 .otp-login #blackboard input[type='password'] {
  margin-top: 4px
}

.login-page .uo30 .otp-login #blackboard #phone_number,
.wrapperlogin-page .uo30 .otp-login #blackboard #phone_number {
  font-size: 17px
}

.login-page .uo30 .otp-login #blackboard .login-input-otp,
.wrapperlogin-page .uo30 .otp-login #blackboard .login-input-otp {
  width: 2em;
  padding: 0 .3em;
  text-align: center;
  margin: 0 3px;
  display: inline-block;
  clear: none;
  font-size: 22px;
  font-weight: bold
}

@media screen and (max-width:350px) {

  .login-page .uo30 .otp-login #blackboard .login-input-otp,
  .wrapperlogin-page .uo30 .otp-login #blackboard .login-input-otp {
    font-size: 20px
  }
}

.login-page .uo30 .otp-login #blackboard .link-button,
.wrapperlogin-page .uo30 .otp-login #blackboard .link-button {
  background: transparent !important;
  border: none;
  line-height: normal !important;
  height: auto !important;
  padding: 0 !important;
  text-decoration: underline !important;
  font-size: 14px !important;
  text-transform: none !important;
  font-style: italic;
  box-shadow: none !important
}

.login-page .uo30 .otp-login #blackboard #forgotbutton:disabled,
.wrapperlogin-page .uo30 .otp-login #blackboard #forgotbutton:disabled,
.login-page .uo30 .otp-login #blackboard #frmbutton:disabled,
.wrapperlogin-page .uo30 .otp-login #blackboard #frmbutton:disabled {
  background: #aaa !important
}

.login-page .uo30 .otp-login #blackboard #otpBox,
.wrapperlogin-page .uo30 .otp-login #blackboard #otpBox {
  text-align: center
}

.login-page .uo30 .otp-login #blackboard h2,
.wrapperlogin-page .uo30 .otp-login #blackboard h2 {
  margin-bottom: 30px;
  white-space: normal;
  text-align: center
}

.login-page .uo30 .otp-login #blackboard .more-actions button,
.wrapperlogin-page .uo30 .otp-login #blackboard .more-actions button,
.login-page .uo30 .otp-login #blackboard .more-actions a,
.wrapperlogin-page .uo30 .otp-login #blackboard .more-actions a,
.login-page .uo30 .otp-login #blackboard .more-actions a:link,
.wrapperlogin-page .uo30 .otp-login #blackboard .more-actions a:link,
.login-page .uo30 .otp-login #blackboard .more-actions a:visited,
.wrapperlogin-page .uo30 .otp-login #blackboard .more-actions a:visited,
.login-page .uo30 .otp-login #blackboard .more-actions a:active,
.wrapperlogin-page .uo30 .otp-login #blackboard .more-actions a:active {
  text-decoration: none
}

.login-page .uo30 .otp-login #blackboard .more-actions button span,
.wrapperlogin-page .uo30 .otp-login #blackboard .more-actions button span,
.login-page .uo30 .otp-login #blackboard .more-actions a span,
.wrapperlogin-page .uo30 .otp-login #blackboard .more-actions a span,
.login-page .uo30 .otp-login #blackboard .more-actions a:link span,
.wrapperlogin-page .uo30 .otp-login #blackboard .more-actions a:link span,
.login-page .uo30 .otp-login #blackboard .more-actions a:visited span,
.wrapperlogin-page .uo30 .otp-login #blackboard .more-actions a:visited span,
.login-page .uo30 .otp-login #blackboard .more-actions a:active span,
.wrapperlogin-page .uo30 .otp-login #blackboard .more-actions a:active span {
  color: #0172fe;
  text-decoration: underline
}

.login-page .uo30 .otp-login #blackboard input,
.wrapperlogin-page .uo30 .otp-login #blackboard input {
  padding-top: 0;
  box-shadow: none
}

.login-page .uo30 .otp-login #blackboard .more-actions,
.wrapperlogin-page .uo30 .otp-login #blackboard .more-actions {
  text-align: center !important;
  font-style: italic
}

.login-page .uo30 .otp-login #blackboard .form__line label.flying_label,
.wrapperlogin-page .uo30 .otp-login #blackboard .form__line label.flying_label {
  position: relative;
  display: block;
  top: 0;
  left: 0
}

.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input,
.wrapperlogin-page .uo30 .otp-login #blackboard .form__line label.flying_label input {
  width: 100%;
  max-width: 100%
}

.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input+span,
.wrapperlogin-page .uo30 .otp-login #blackboard .form__line label.flying_label input+span {
  position: absolute;
  display: block;
  padding: 0 4px;
  transition: top .2s linear, font-size .2s linear
}

.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-pristine+span,
.wrapperlogin-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-pristine+span,
.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-untouched+span,
.wrapperlogin-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-untouched+span,
.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-empty+span,
.wrapperlogin-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-empty+span {
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  background: transparent
}

.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input:focus+span,
.wrapperlogin-page .uo30 .otp-login #blackboard .form__line label.flying_label input:focus+span,
.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-empty:focus+span,
.wrapperlogin-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-empty:focus+span,
.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-touched+span,
.wrapperlogin-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-touched+span,
.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-dirty+span,
.wrapperlogin-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-dirty+span,
.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-not-empty+span,
.wrapperlogin-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-not-empty+span {
  top: -8px;
  left: 10px;
  transform: translateY(-50%);
  font-size: 9px
}

.startU30 {
  display: none
}

#operatorradio,
#smartlogin-container.form p {
  margin: 0 auto 20px
}

.uo30 .center-block,
#useris-smartpsw .center-block {
  text-align: center
}

.uo30 .settings-box,
#useris-smartpsw .settings-box {
  padding-top: 14px;
  margin: 0 -8px
}

.uo30 .settings-box.activity,
#useris-smartpsw .settings-box.activity {
  padding-top: 0
}

.uo30 .icon-positive,
#useris-smartpsw .icon-positive {
  color: #415920;
  border-color: transparent
}

.uo30 .icon-neutral,
#useris-smartpsw .icon-neutral,
.uo30 .icon-sms,
#useris-smartpsw .icon-sms {
  color: #6fccd3;
  border-color: transparent
}

.uo30 .icon-status,
#useris-smartpsw .icon-status {
  background-color: #1d2e7c;
  padding: 4px;
  margin-right: 12px;
  margin-top: 3px
}

.uo30 .icon-fb,
#useris-smartpsw .icon-fb {
  color: #3b5897
}

.uo30 .icon-circle,
#useris-smartpsw .icon-circle {
  border-radius: 50%
}

.uo30 .icon-left,
#useris-smartpsw .icon-left {
  float: left;
  margin-right: 5px
}

.uo30 .icon-right,
#useris-smartpsw .icon-right {
  float: right;
  margin-left: 5px
}

.uo30 .icon-small,
#useris-smartpsw .icon-small {
  width: 25px;
  height: 25px;
  font-size: 22px
}

.uo30 .icon-negative,
#useris-smartpsw .icon-negative {
  color: #fff !important
}

.uo30 .SettingsPageList li>.icon,
#useris-smartpsw .SettingsPageList li>.icon,
.uo30 .simple-list--single-line li>.icon,
#useris-smartpsw .simple-list--single-line li>.icon {
  float: left;
  margin: 5px
}

.uo30 .accordionContent #title_login,
#useris-smartpsw .accordionContent #title_login,
.uo30 .account-section #title_login,
#useris-smartpsw .account-section #title_login {
  display: none
}

.uo30 .login-page .account30.container,
#useris-smartpsw .login-page .account30.container,
.uo30 .forgot-page .account30.container,
#useris-smartpsw .forgot-page .account30.container,
.uo30 .reset-password-page .account30.container,
#useris-smartpsw .reset-password-page .account30.container,
.uo30 .add-mail-page .account30.container,
#useris-smartpsw .add-mail-page .account30.container,
.uo30 .account-creation-page .account30.container,
#useris-smartpsw .account-creation-page .account30.container,
.uo30 .change-password-page .account30.container,
#useris-smartpsw .change-password-page .account30.container {
  padding: 10px
}

.uo30 #modal_unsubscribe,
#useris-smartpsw #modal_unsubscribe {
  display: none
}

.uo30 #box_status_confirm,
#useris-smartpsw #box_status_confirm {
  margin-top: 25px
}

.uo30 .account30 .form__message .errorlogin,
#useris-smartpsw .account30 .form__message .errorlogin,
.uo30 .account-status30 .form__message .errorlogin,
#useris-smartpsw .account-status30 .form__message .errorlogin,
.uo30 .account30 .errorlogin,
#useris-smartpsw .account30 .errorlogin,
.uo30 .account-status30 .errorlogin,
#useris-smartpsw .account-status30 .errorlogin {
  padding-top: 0px
}

.uo30 .account30.container,
#useris-smartpsw .account30.container,
.uo30 .account-status30.container,
#useris-smartpsw .account-status30.container {
  max-width: 100%;
  width: auto;
  margin: 10px 0;
  padding: 8px;
  background-color: transparent
}

.uo30 .account30 .container--wrap,
#useris-smartpsw .account30 .container--wrap,
.uo30 .account-status30 .container--wrap,
#useris-smartpsw .account-status30 .container--wrap {
  max-width: 400px;
  margin: 10px 0;
  padding: 8px
}

.uo30 .account30 .form,
#useris-smartpsw .account30 .form,
.uo30 .account-status30 .form,
#useris-smartpsw .account-status30 .form {
  padding: 8px 0
}

.uo30 .account30 .form p,
#useris-smartpsw .account30 .form p,
.uo30 .account-status30 .form p,
#useris-smartpsw .account-status30 .form p {
  text-align: initial;
  text-align: start
}

.uo30 .account30 h1,
#useris-smartpsw .account30 h1,
.uo30 .account-status30 h1,
#useris-smartpsw .account-status30 h1,
.uo30 .account30 h2,
#useris-smartpsw .account30 h2,
.uo30 .account-status30 h2,
#useris-smartpsw .account-status30 h2,
.uo30 .account30 h3,
#useris-smartpsw .account30 h3,
.uo30 .account-status30 h3,
#useris-smartpsw .account-status30 h3,
.uo30 .account30 h4,
#useris-smartpsw .account30 h4,
.uo30 .account-status30 h4,
#useris-smartpsw .account-status30 h4,
.uo30 .account30 h5,
#useris-smartpsw .account30 h5,
.uo30 .account-status30 h5,
#useris-smartpsw .account-status30 h5 {
  font-weight: 400
}

.uo30 .account30 h1 a,
#useris-smartpsw .account30 h1 a,
.uo30 .account-status30 h1 a,
#useris-smartpsw .account-status30 h1 a,
.uo30 .account30 h2 a,
#useris-smartpsw .account30 h2 a,
.uo30 .account-status30 h2 a,
#useris-smartpsw .account-status30 h2 a,
.uo30 .account30 h3 a,
#useris-smartpsw .account30 h3 a,
.uo30 .account-status30 h3 a,
#useris-smartpsw .account-status30 h3 a,
.uo30 .account30 h4 a,
#useris-smartpsw .account30 h4 a,
.uo30 .account-status30 h4 a,
#useris-smartpsw .account-status30 h4 a,
.uo30 .account30 h5 a,
#useris-smartpsw .account30 h5 a,
.uo30 .account-status30 h5 a,
#useris-smartpsw .account-status30 h5 a {
  text-decoration: none
}

.uo30 .account30 p,
#useris-smartpsw .account30 p,
.uo30 .account-status30 p,
#useris-smartpsw .account-status30 p {
  font-size: 14px;
  margin-top: 10px
}

.uo30 .account30 p.title,
#useris-smartpsw .account30 p.title,
.uo30 .account-status30 p.title,
#useris-smartpsw .account-status30 p.title {
  font-weight: 600
}

.uo30 .account30 p a,
#useris-smartpsw .account30 p a,
.uo30 .account-status30 p a,
#useris-smartpsw .account-status30 p a {
  text-decoration: underline !important
}

.uo30 .account30 a,
#useris-smartpsw .account30 a,
.uo30 .account-status30 a,
#useris-smartpsw .account-status30 a {
  margin-top: 8px;
  text-decoration: underline
}

.uo30 .account30 a span,
#useris-smartpsw .account30 a span,
.uo30 .account-status30 a span,
#useris-smartpsw .account-status30 a span {
  text-decoration: none
}

.uo30 .account30 button,
#useris-smartpsw .account30 button,
.uo30 .account-status30 button,
#useris-smartpsw .account-status30 button,
.uo30 .account30 .button,
#useris-smartpsw .account30 .button,
.uo30 .account-status30 .button,
#useris-smartpsw .account-status30 .button {
  box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.2);
  margin-top: 20px;
  margin-left: auto;
  margin-bottom: 20px;
  margin-right: auto;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  font-size: 22px;
  border: none;
  text-align: center;
  line-height: auto;
  text-transform: none;
  text-decoration: none;
  font-family: 'HelvNeue55_W1G', 'HelvNeue55_W1G', sans-serif
}

.uo30 .form__line,
#useris-smartpsw .form__line {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  display: block
}

.uo30 .form__line label,
#useris-smartpsw .form__line label {
  position: absolute;
  top: -4px;
  left: 10px;
  font-size: 16px;
  line-height: 20px;
  color: #94a2ab;
  margin: 0
}

.uo30 .form__line input,
#useris-smartpsw .form__line input {
  border: 1px solid #94a2ab;
  background-color: #eef4ff;
  border-radius: 10px;
  width: 100%;
  height: 60px;
  padding-top: 18px;
  font-size: 18px;
  padding-left: 10px;
  padding-right: 10px;
  outline: none;
  margin-bottom: 0 !important;
  color: #000
}

.uo30 .form__line input:focus,
#useris-smartpsw .form__line input:focus {
  border: 1px solid #2e8 sE4
}

.uo30 .form__message,
#useris-smartpsw .form__message {
  background: transparent;
  overflow: hidden;
  position: relative;
  opacity: 1
}

.uo30 .form__message .title,
#useris-smartpsw .form__message .title {
  font-weight: bold
}

.uo30 .form__message .link,
#useris-smartpsw .form__message .link {
  text-decoration: underline !important
}

.uo30 .form__message .message,
#useris-smartpsw .form__message .message {
  font-size: 14px;
  line-height: 1.2em;
  overflow: hidden;
  padding: 0 10px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif
}

.uo30 .form__message .close,
#useris-smartpsw .form__message .close {
  line-height: 26px;
  align-self: center;
  flex: 0 0 20px;
  text-align: center
}

.uo30 .form__message .close:before,
#useris-smartpsw .form__message .close:before {
  display: none
}

.uo30 .form__message .close:after,
#useris-smartpsw .form__message .close:after {
  display: block;
  content: '\00d7';
  font-family: Arial, Helvetica, sans-serif;
  font-size: 26px;
  color: inherit
}

.uo30 .formLineLayout,
#useris-smartpsw .formLineLayout {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 10px auto;
  padding: 10px;
  background-color: #f2f2f2;
  border-radius: 4px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2)
}

.uo30 .formMessageLayout,
#useris-smartpsw .formMessageLayout {
  background-color: transparent;
  border: none;
  position: fixed;
  z-index: 2000;
  text-align: center;
  width: 100%;
  margin: 10px auto
}

.uo30 .form__message[class*="useris-error-"] .form__line,
#useris-smartpsw .form__message[class*="useris-error-"] .form__line {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 10px auto;
  padding: 10px;
  background-color: #f2f2f2;
  border-radius: 4px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2)
}

.uo30 .form__message--pop-up,
#useris-smartpsw .form__message--pop-up {
  background-color: transparent;
  border: none;
  position: fixed;
  z-index: 2000;
  text-align: center;
  width: 100%;
  margin: 10px auto
}

.uo30 .form__message--pop-up .form__line,
#useris-smartpsw .form__message--pop-up .form__line {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 10px auto;
  padding: 10px;
  background-color: #f2f2f2;
  border-radius: 4px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2)
}

.uo30 .form__message--pop-up .form__message-icon,
#useris-smartpsw .form__message--pop-up .form__message-icon {
  width: auto;
  height: 100%;
  align-self: center;
  flex: 0 0 35px
}

.uo30 .form__message--pop-up .form__message-text,
#useris-smartpsw .form__message--pop-up .form__message-text {
  vertical-align: middle;
  flex: 1 1 auto;
  text-align: start;
  align-self: center
}

.uo30 .form__message--pop-up .form__message-text .message,
#useris-smartpsw .form__message--pop-up .form__message-text .message,
.uo30 .form__message--pop-up .form__message-text .link,
#useris-smartpsw .form__message--pop-up .form__message-text .link {
  margin: 0
}

.uo30 .form__message--pop-up .form__message-text .link,
#useris-smartpsw .form__message--pop-up .form__message-text .link {
  font-size: 13px;
  display: block
}

.uo30 .form__message--pop-up-positive .form__line,
#useris-smartpsw .form__message--pop-up-positive .form__line {
  background: #8bc34a
}

.uo30 .form__message--pop-up-positive .form__line .message,
#useris-smartpsw .form__message--pop-up-positive .form__line .message {
  color: #fff
}

.uo30 .form__message--pop-up-positive .form__line .close,
#useris-smartpsw .form__message--pop-up-positive .form__line .close {
  color: #fff
}

.uo30 .form__message--pop-up-positive .form__line .icon,
#useris-smartpsw .form__message--pop-up-positive .form__line .icon {
  color: #415920
}

.uo30 .form__message--pop-up-generic .form__line,
#useris-smartpsw .form__message--pop-up-generic .form__line {
  background: #cce8f4
}

.uo30 .form__message--pop-up-generic .form__line .message,
#useris-smartpsw .form__message--pop-up-generic .form__line .message {
  color: #000
}

.uo30 .form__message--pop-up-generic .form__line .close,
#useris-smartpsw .form__message--pop-up-generic .form__line .close {
  color: #000
}

.uo30 .form__message--pop-up-generic .form__line .icon,
#useris-smartpsw .form__message--pop-up-generic .form__line .icon {
  color: #6fccd3
}

.uo30 .form__message--pop-up-error .form__line,
#useris-smartpsw .form__message--pop-up-error .form__line,
.uo30 .form__message[class*="useris-error-"] .form__line,
#useris-smartpsw .form__message[class*="useris-error-"] .form__line {
  background: #ee4957
}

.uo30 .form__message--pop-up-error .form__line .message,
#useris-smartpsw .form__message--pop-up-error .form__line .message,
.uo30 .form__message[class*="useris-error-"] .form__line .message,
#useris-smartpsw .form__message[class*="useris-error-"] .form__line .message {
  color: #fff
}

.uo30 .form__message--pop-up-error .form__line .close,
#useris-smartpsw .form__message--pop-up-error .form__line .close,
.uo30 .form__message[class*="useris-error-"] .form__line .close,
#useris-smartpsw .form__message[class*="useris-error-"] .form__line .close {
  color: #fff
}

.uo30 .form__message--pop-up-error .form__line .icon,
#useris-smartpsw .form__message--pop-up-error .form__line .icon,
.uo30 .form__message[class*="useris-error-"] .form__line .icon,
#useris-smartpsw .form__message[class*="useris-error-"] .form__line .icon {
  color: #fff
}

.uo30 .form__message h2,
#useris-smartpsw .form__message h2 {
  white-space: normal
}

.uo30 .form__message .icon,
#useris-smartpsw .form__message .icon,
.uo30 .form__message .icon-generic,
#useris-smartpsw .form__message .icon-generic,
.uo30 .form__message .icon-message,
#useris-smartpsw .form__message .icon-message,
.uo30 .form__message .icon-sms,
#useris-smartpsw .form__message .icon-sms,
.uo30 .form__message .icon-success,
#useris-smartpsw .form__message .icon-success,
.uo30 .form__message .icon-check,
#useris-smartpsw .form__message .icon-check,
.uo30 .form__message .icon-warning,
#useris-smartpsw .form__message .icon-warning,
.uo30 .form__message .icon-error,
#useris-smartpsw .form__message .icon-error,
.uo30 .form__message .icon-allert,
#useris-smartpsw .form__message .icon-allert,
.uo30 .form__message .icon-email,
#useris-smartpsw .form__message .icon-email,
.uo30 .form__message .icon:before,
#useris-smartpsw .form__message .icon:before,
.uo30 .form__message .icon-generic:before,
#useris-smartpsw .form__message .icon-generic:before,
.uo30 .form__message .icon-message:before,
#useris-smartpsw .form__message .icon-message:before,
.uo30 .form__message .icon-sms:before,
#useris-smartpsw .form__message .icon-sms:before,
.uo30 .form__message .icon-success:before,
#useris-smartpsw .form__message .icon-success:before,
.uo30 .form__message .icon-check:before,
#useris-smartpsw .form__message .icon-check:before,
.uo30 .form__message .icon-warning:before,
#useris-smartpsw .form__message .icon-warning:before,
.uo30 .form__message .icon-error:before,
#useris-smartpsw .form__message .icon-error:before,
.uo30 .form__message .icon-allert:before,
#useris-smartpsw .form__message .icon-allert:before,
.uo30 .form__message .icon-email:before,
#useris-smartpsw .form__message .icon-email:before {
  font-family: 'UserFeedbackFont' !important;
  font-size: 21px;
  width: auto;
  height: auto;
  padding: 0;
  align-self: center;
  flex: 0 0 35px;
  text-align: center;
  position: static
}

.uo30 .form__message .icon-generic:before,
#useris-smartpsw .form__message .icon-generic:before,
.uo30 .form__message .icon-message:before,
#useris-smartpsw .form__message .icon-message:before,
.uo30 .form__message .icon-sms:before,
#useris-smartpsw .form__message .icon-sms:before,
.uo30 .form__message .icon-email:before,
#useris-smartpsw .form__message .icon-email:before {
  content: "\e900"
}

.uo30 .form__message .icon-success:before,
#useris-smartpsw .form__message .icon-success:before,
.uo30 .form__message .icon-check:before,
#useris-smartpsw .form__message .icon-check:before {
  content: "\e903"
}

.uo30 .form__message .icon-warning:before,
#useris-smartpsw .form__message .icon-warning:before {
  content: "\e902"
}

.uo30 .form__message .icon-error:before,
#useris-smartpsw .form__message .icon-error:before,
.uo30 .form__message .icon-allert:before,
#useris-smartpsw .form__message .icon-allert:before {
  content: "\e901"
}

.uo30 .fade,
#useris-smartpsw .fade {
  opacity: 0
}

.uo30 .form__control,
#useris-smartpsw .form__control {
  margin: 0 auto;
  max-width: 100%;
  display: block;
  text-align: center
}

.uo30 .form__control p,
#useris-smartpsw .form__control p {
  text-align: start !important;
  overflow: hidden
}

.uo30 .form__control a,
#useris-smartpsw .form__control a {
  text-align: center
}

.uo30 .check-box,
#useris-smartpsw .check-box {
  width: 25px;
  margin-right: 10px;
  position: relative;
  float: left
}

.uo30 .check-box label,
#useris-smartpsw .check-box label {
  cursor: pointer;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  left: 0;
  background: #fff;
  border: 1px solid #1d2e7c;
  border-radius: 4px
}

.uo30 .check-box label:after,
#useris-smartpsw .check-box label:after {
  opacity: .2;
  content: '';
  position: absolute;
  width: 14px;
  height: 9px;
  background: transparent;
  top: 6px;
  left: 5px;
  border: 4px solid #9bb5ca;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg)
}

.uo30 .check-box label:active::after,
#useris-smartpsw .check-box label:active::after {
  opacity: .4
}

.uo30 .check-box input[type=checkbox],
#useris-smartpsw .check-box input[type=checkbox] {
  visibility: hidden
}

.uo30 .check-box input[type=checkbox]:checked+label,
#useris-smartpsw .check-box input[type=checkbox]:checked+label {
  background-color: #1d2e7c
}

.uo30 .check-box input[type=checkbox]:checked+label:after,
#useris-smartpsw .check-box input[type=checkbox]:checked+label:after {
  opacity: 1;
  border-color: #fff
}

.uo30 .btn#unsubscribe,
#useris-smartpsw .btn#unsubscribe {
  background: #f84975;
  border-color: #f84975
}

.uo30 .btn-fb,
#useris-smartpsw .btn-fb {
  background: #3b5897;
  color: #fff
}

.uo30 .btn-neutral,
#useris-smartpsw .btn-neutral {
  background: #fff;
  color: #000
}

.uo30 .btn-cancel,
#useris-smartpsw .btn-cancel {
  background: #9bb5ca;
  color: #fff
}

.uo30 .btn-success,
#useris-smartpsw .btn-success {
  background: var(--secondary-color) !important;
  color: #fff !important
}

.uo30 .btn-small,
#useris-smartpsw .btn-small {
  height: 26px !important;
  border-radius: none !important;
  width: auto !important;
  font-size: 13px !important;
  min-width: 100px !important;
  line-height: 24px !important
}

.uo30 .btn-inline,
#useris-smartpsw .btn-inline {
  display: inline-block;
  padding: 0 20px;
  margin-top: 10px;
  margin-right: 15px
}

.uo30 .line-across,
#useris-smartpsw .line-across {
  border-bottom: 1px solid #fff;
  margin: 0;
  text-align: center;
  position: relative
}

.uo30 .line-across span,
#useris-smartpsw .line-across span {
  position: absolute;
  background: #fff;
  top: -10px;
  width: 30px;
  margin-left: -15px;
  line-height: 1em;
  font-size: 14px
}

.uo30 .cancel-link,
#useris-smartpsw .cancel-link {
  text-align: center !important;
  text-decoration: underline !important;
  display: block
}

.uo30 .link-icon,
#useris-smartpsw .link-icon {
  display: inline !important;
  margin: 0
}

.uo30 .info-label,
#useris-smartpsw .info-label {
  font-weight: bold;
  line-height: 25px;
  height: 25px
}

.uo30 input[name='password']:focus~span::before,
#useris-smartpsw input[name='password']:focus~span::before {
  color: #1d2e7c
}

.uo30 input[name='password']~span::before,
#useris-smartpsw input[name='password']~span::before {
  line-height: 36px !important;
  font-size: 30px !important;
  display: block;
  color: #1d2e7c;
  text-align: center;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 12px;
  bottom: 10px
}

.uo30 .icon-title,
#useris-smartpsw .icon-title {
  border: 1px solid #1d2e7c;
  color: #1d2e7c;
  border-radius: 50%;
  margin-right: 10px;
  font-size: 23px;
  width: 25px;
  height: 25px;
  line-height: 23px
}

.uo30 .form__control--changename button,
#useris-smartpsw .form__control--changename button,
.uo30 .container--social button,
#useris-smartpsw .container--social button,
.uo30 .container--profile button,
#useris-smartpsw .container--profile button {
  height: 26px !important;
  border-radius: none !important;
  width: auto !important;
  font-size: 13px !important;
  min-width: 100px !important;
  line-height: 24px !important;
  display: inline-block;
  padding: 0 20px;
  margin-top: 10px;
  margin-right: 15px
}

.uo30 .form__message .icon,
#useris-smartpsw .form__message .icon {
  border-radius: 50%
}

.uo30 .form__message--pop-up-positive .icon,
#useris-smartpsw .form__message--pop-up-positive .icon {
  color: #415920;
  border-color: transparent
}

.uo30 .form__message--pop-up-generic .icon,
#useris-smartpsw .form__message--pop-up-generic .icon {
  color: #6fccd3;
  border-color: transparent
}

.uo30 .container--social .icon,
#useris-smartpsw .container--social .icon {
  color: #3b5897;
  width: 25px;
  height: 25px;
  font-size: 22px;
  float: left;
  margin-right: 5px
}

.uo30 .container--profile .icon-edit,
#useris-smartpsw .container--profile .icon-edit {
  float: right;
  margin-left: 5px;
  width: 25px;
  height: 25px;
  font-size: 22px
}

.uo30 .container--profile .icon-email,
#useris-smartpsw .container--profile .icon-email {
  float: left;
  margin-right: 5px
}

.uo30 .container--profile .title .icon-allert,
#useris-smartpsw .container--profile .title .icon-allert {
  color: #6fccd3;
  border-color: transparent;
  float: left;
  margin-right: 5px;
  border: 1px solid #1d2e7c;
  color: #1d2e7c;
  border-radius: 50%;
  margin-right: 10px;
  font-size: 23px;
  width: 25px;
  height: 25px;
  line-height: 23px
}

.uo30 .container--profile button,
#useris-smartpsw .container--profile button,
.uo30 .container--profile .button,
#useris-smartpsw .container--profile .button {
  display: inline-block;
  padding: 0 20px;
  margin-top: 10px;
  margin-right: 15px
}

.uo30 .container--status button,
#useris-smartpsw .container--status button,
.uo30 .container--status .button,
#useris-smartpsw .container--status .button {
  height: 26px !important;
  border-radius: none !important;
  width: auto !important;
  font-size: 13px !important;
  min-width: 100px !important;
  line-height: 24px !important;
  display: inline-block;
  padding: 0 20px;
  margin-top: 10px;
  margin-right: 15px
}

.uo30 .simple-list,
#useris-smartpsw .simple-list {
  min-height: 30px;
  line-height: 30px
}

.uo30 .SettingsPage li>.icon,
#useris-smartpsw .SettingsPage li>.icon,
.uo30 .simple-list--single-line li>.icon,
#useris-smartpsw .simple-list--single-line li>.icon {
  float: left;
  margin: 5px
}

.uo30 .account-section,
#useris-smartpsw .account-section {
  display: none
}

.uo30 .account-section.active,
#useris-smartpsw .account-section.active {
  display: block
}

.uo30 .simple-list--single-line,
#useris-smartpsw .simple-list--single-line {
  font-size: 13px;
  color: #466986;
  border-bottom: 1px solid #466986
}

.uo30 .simple-list--single-line.active>h2,
#useris-smartpsw .simple-list--single-line.active>h2 {
  background: #0172fe
}

.uo30 .simple-list--single-line>h2,
#useris-smartpsw .simple-list--single-line>h2 {
  background: #e7e7f9;
  display: block
}

.uo30 .simple-list--single-line>h2:active,
#useris-smartpsw .simple-list--single-line>h2:active {
  background-color: #0172fe;
  color: #fff
}

.uo30 .simple-list--single-line h1,
#useris-smartpsw .simple-list--single-line h1,
.uo30 .simple-list--single-line h2,
#useris-smartpsw .simple-list--single-line h2,
.uo30 .simple-list--single-line h3,
#useris-smartpsw .simple-list--single-line h3,
.uo30 .simple-list--single-line h4,
#useris-smartpsw .simple-list--single-line h4 {
  font-size: 16px;
  margin-bottom: 0
}

.uo30 .simple-list--single-line ul li,
#useris-smartpsw .simple-list--single-line ul li {
  color: #fff;
  background: #232f43
}

.uo30 .simple-list--single-line ul li h1,
#useris-smartpsw .simple-list--single-line ul li h1,
.uo30 .simple-list--single-line ul li h2,
#useris-smartpsw .simple-list--single-line ul li h2,
.uo30 .simple-list--single-line ul li h3,
#useris-smartpsw .simple-list--single-line ul li h3,
.uo30 .simple-list--single-line ul li h4,
#useris-smartpsw .simple-list--single-line ul li h4 {
  padding-bottom: 14px
}

.endU30 {
  display: none
}

:root {
  --main-color: #7a73fc;
  --secondary-color: #7a73fc;
  --bg-body: #31314b;
  --bg-image-body: linear-gradient(90deg,#31314b, #1d1d33);
  --bg-section-contest: ;
  --bg-main-legals: #fff;
  --bg-section-legals: var(--bg-section-contest);
  --bg-header: #0000004a;
  --bg-footer: #ccc;
  --bg-image-banner: url('./assets/img/gaminghub-bg.png');
  --header-border: 3px solid var(--secondary-color);
  --text-on-dark: #fff;
  --text-on-light: #000;
  --text-link: var(--secondary-color);
  --small-padding: 10px;
  --main-padding: 20px;
  --main-border-radius: 30px;
  --custom-font-family: 'Montserrat';
  --general-font-family-regular: 'Montserrat';
  --general-font-family: 'Montserrat';
  --general-font-family-bold: 'MontserratBold';
  --font-fallback: Arial, sans-serif;
  --btn-gen-height: 40px;
  --btn-gen-bg: var(--secondary-color);
  --btn-gen-text: var(--body-text-color);
  --btn-gen-radius: 8px;
  --border-color: #F3C400;
  --max-width:1024px;
  --cell-bg: grey;
  --cell-bg-a: #FF1901;
  --cell-bg-c: #ff8800;
  --cell-bg-b: #00D3F4;
  --cell-bg-d: #047DFF;
  --cell-bg-e: #fc0;
  --cell-bg-f: var(--cell-bg-a);
  --cell-bg-g: var(--cell-bg-b);
  --cell-bg-h: var(--cell-bg-c);
  --cell-bg-i: var(--cell-bg-d);
  --cell-bg-j: var(--cell-bg-e);
  --cell-bg-k: #00E091;
  --cell-bg-l: #FF00E4;
  --body-text-color: #fff;
  --body-font-size: 15px;
  --body-line-height: 20px;
  --body-font-family: sans-serif;
  --item-ratio: 2.6;
  --v-cell-width: 260px;
  --v-cell-height: 100px
}

@font-face {
  font-family: 'UserFeedbackFont';
  src: url('./assets/fonts//user-feedback-icons.eot');
  src: url('./assets/fonts//user-feedback-icons.eot?#iefix') format('embedded-opentype'), url('./assets/fonts//user-feedback-icons.woff2') format('woff2'), url('./assets/fonts//user-feedback-icons.woff') format('woff'), url('./assets/fonts//user-feedback-icons.svg#5a01321a-bdf4-4f8e-bd1c-6323b7fc10ba') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap
}
@font-face {
  font-family: 'Montserrat';
  src: url('./assets/fonts/montserrat-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap
}
@font-face {
  font-family: 'MontserratBold';
  src: url('./assets/fonts/montserrat-bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap
}

img {
  max-width: 100%
}

a,
a:link,
a:visited,
a:active {
  text-decoration: none;
  color: var(--text-link);
}

.customText {
  font-family: var(--custom-font-family)
}

.huge {
  font-size: 38px
}

.large {
  font-size: 35px
}

.medium {
  font-size: 24px
}

.small {
  font-size: 19px
}

.small b {
  font-size: 23px
}

.xsmall {
  font-size: 14px
}

.xxsmall {
  font-size: 12px
}

.xxxsmall {
  font-size: 11px
}

.regular {
  font-family: var(--general-font-family-regular)
}

.accent {
  color: var(--text-link)
}

.accent b,
.accent strong {
  color: var(--text-on-dark)
}

.error {
  padding-top: var(--main-padding);
  word-wrap: break-word
}

.error p {
  margin-bottom: var(--main-padding)
}

*,
*::before,
*::after {
  box-sizing: border-box
}

* {
  margin: 0
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%
}

input,
button,
textarea,
select {
  font: inherit
}

button {
  border: none;
  background-color: transparent
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word
}

a {
  text-decoration: none
}

main,
#__next {
  isolation: isolate
}

html,
body {
  height: 100%
}

html,
body,
#orientation-container {
  color: var(--body-text-color);
  font-family: var(--general-font-family-regular), var(--font-fallback);
  background-image: var(--bg-image-body);
  background-color: var(--bg-body);
  text-align: center;
}

main {
  max-width: var(--max-width);
  margin:0 auto;
  padding: 0 12px 20px;
}

b,
strong {
  font-family: var(--general-font-family)
}

nav {
  height: 65px;
  background-color: var(--bg-header);
  border-bottom: var(--header-border);
  margin-bottom: 40px;
  > div {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    height: 65px;
  }
}

nav a,
.close-btn {
  flex: 0 0 30px;
  height: 30px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  line-height: 30px
}

.close-btn {
  background-image: url('./assets/img/close.svg?v=20240723061931')
}

.close-btn.modal {
  z-index: 2;
  position: relative;
  margin: 0 0 -30px auto;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34" fill="none"><path d="M16.878 33c8.733 0 15.878-7.2 15.878-16S25.61 1 16.878 1 1 8.2 1 17s7.145 16 15.878 16ZM12.384 21.529l8.987-9.056M21.371 21.529l-8.987-9.056" stroke="rgb(140, 49, 175)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
}

.close-btn.modal span {
  display: none;
  color: var(--btn-gen-bg)
}

.prizes-btn {
  background-image: url('./assets/img/account.svg?v=20240723061931');
  margin-inline-end: var(--main-padding);
}

.prizes-btn.self {
  pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.177 12.177c0 2.315-.686 4.439-1.868 6.211-1.725 2.555-4.455 4.36-7.632 4.822a9.63 9.63 0 0 1-1.677.144 9.632 9.632 0 0 1-1.677-.144c-3.177-.463-5.907-2.267-7.632-4.822a11.126 11.126 0 0 1-1.868-6.211C5.823 5.997 10.821 1 17 1c6.18 0 11.177 4.998 11.177 11.177Z" stroke="%237a73fc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m31.77 27.298-2.635.623c-.59.143-1.054.59-1.182 1.181l-.558 2.347c-.304 1.278-1.932 1.661-2.779.655L17 23.354 9.384 32.12c-.847 1.006-2.475.623-2.779-.655l-.558-2.347a1.59 1.59 0 0 0-1.182-1.181l-2.635-.623c-1.213-.288-1.644-1.804-.766-2.683l6.227-6.227c1.725 2.555 4.455 4.36 7.632 4.822A9.63 9.63 0 0 0 17 23.37c.575 0 1.134-.048 1.677-.144 3.177-.463 5.907-2.267 7.632-4.822l6.227 6.227c.878.863.447 2.38-.766 2.667ZM17.926 7.354l.942 1.884c.128.256.463.511.767.56l1.708.287c1.086.175 1.341.974.559 1.756l-1.325 1.325c-.224.224-.352.655-.272.974l.383 1.645c.304 1.293-.383 1.804-1.532 1.118l-1.597-.942c-.288-.176-.767-.176-1.054 0l-1.597.942c-1.15.67-1.836.175-1.532-1.118l.383-1.645c.064-.303-.048-.75-.272-.974l-1.325-1.325c-.782-.782-.527-1.565.559-1.756l1.708-.288c.288-.048.623-.303.75-.559l.943-1.884c.463-1.022 1.293-1.022 1.804 0Z" stroke="%237a73fc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
}

.back-btn {
  background-image: url('./assets/img/back.svg?v=20240723061931');
  background-repeat: no-repeat;
  background-size: 25px;
  display: flex;
    position: relative;
    top: -30px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    color: var(--secondary-color);
}

.close-btn,
.back-btn {
  background-position: left center;
  padding-left: 20px;
}

.close-btn span,
.back-btn span {
  color: var(--body-text-color);
  text-align: start;
  font-size: 12px;
  text-decoration: none;
  font-family: var(--general-font-family);
}

.btn-success {
  background-color: var(--secondary-color);
  color: #fff;
  font-size: 22px;
  font-family: var(--general-font-family);
  border-radius: 10px;
  border: none;
  cursor: pointer;
  outline: none;
  width: 100%;
  height: auto;
  margin: 20px auto 0;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14);
  padding: 14px 24px;
  justify-content: center;
  align-items: center
}

.btn-success:active,
.login-page .uo30 .otp-login #blackboard #forgotbutton:active,
.btn-success:disabled,
.login-page .uo30 .otp-login #blackboard #forgotbutton:disabled {
  box-shadow: none
}

.btn-success:disabled,
.login-page .uo30 .otp-login #blackboard #forgotbutton:disabled {
  background-color: #D9D9D9
}

nav a.promo_logo {
  background-image: url('./assets/img/promo_logo.svg?v=20240723061931');
  background-size: 147px 40px;
  background-repeat: no-repeat;
  background-position: 14.5px center;
  max-width: var(--max-width);
  height: 40px;
  position: relative;
  top: 0px;
  width: 100%;
  display: block;
  flex:0 0 200px;
}

.drawer,
.otp-login {
  margin: 10px auto 40px;
  background-color: var(--bg-header);
  width: 100%;
  border-radius: 20px;
  padding: 30px;
  color: var(--main-color);
  max-width: 40em;
}

.otp-login {
  min-height: -webkit-calc(100vh - 70px);
  min-height: -moz-calc(100vh - 70px);
  min-height: calc(100vh - 70px);
  z-index: 1
}

.drawer.spaced {
  padding-top: 45px
}

.account-section {
  text-align: start;
  color: var(--body-text-color);
  padding: 20px 0;
  font-weight: 400;
}

.welcome-text {
  color: var(--main-color);
  font-size: 22px;
  font-family: var(--general-font-family-bold);
  text-align: center;
  margin-bottom: 20px
}

.welcome-text span::after {
  content: '!';
  display: inline-block
}

.welcome-image {
  margin: 0 -30px 18px;
  background-image: var(--bg-image-banner);
  filter: hue-rotate(210deg);
  aspect-ratio: 4;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
}
@media screen and (min-width: 768px) {
  .welcome-image {
  aspect-ratio: 7;
  }
}

.welcome-image p {
  color: var(--body-text-color);
  text-align: center;
  text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
  font-family: var(--custom-font-family);
  font-size: 26px;
  line-height: normal
}

.state-icon {
  margin: -25px auto 0
}

.state-icon img {
  max-width: 310px;
  margin: 0 auto;
  aspect-ratio: 1.24463519
}

.state-icon.over {
  margin-bottom: -50px
}

.promo-contest .back-btn {
  visibility: hidden
}

.promo-contest .state-icon {
  margin-bottom: 0
}

.promo-contest .state-icon img {
  aspect-ratio: 2.0794702
}

.promo-error .promo-message {
  color: #E11E25
}

.promo-noprizes .state-icon {
  margin-bottom: -50px
}

.promo-already-played .state-icon,
.promo-already-won .state-icon {
  margin: -40px auto -50px
}

.promo-message {
  font-family: var(--general-font-family-bold);
  font-size: 24px;
  color: var(--secondary-color);
  font-weight: bolder;
  font-style: normal;
  line-height: 30px
}

.promo-message b,
.promo-message strong {
  color: var(--secondary-color)
}

.retry {
  display: inline-block;
  color: #c00;
  padding: 4px 6px;
  border-radius: 3px;
  font-size: 110%;
  vertical-align: middle
}

.login-page .uo30 .otp-login #blackboard .more-actions button,
.login-page .uo30 .otp-login #blackboard .link-button {
  font-style: normal;
  font-family: var(--general-font-family-regular)
}

.login-page .uo30 .otp-login #blackboard h2 {
  color: #0A0528;
  font-size: 18px;
  text-transform: none;
  line-height: 26px;
  font-family: var(--general-font-family-regular);
  margin-bottom: 0
}

.login-page .uo30 .otp-login #blackboard h2 b,
.login-page .uo30 .otp-login #blackboard h2 strong {
  font-family: var(--general-font-family)
}

.login-page .uo30 .otp-login #blackboard #otpBox h2 {
  margin-bottom: 14px
}

#otpBox h2 {
  margin-top: 0px
}

#msisdnBox h2 {
  margin-top: 0px
}

.login-page .uo30 .account30 button {
  font-family: var(--general-font-family);
  font-size: 18px
}

.login-page nav {
  height: 30px
}

.login-page .state-icon {
  margin: 0 auto -69px;
  position: relative;
  z-index: 2;
  aspect-ratio: 2.0794702;
  width: 310px;
  background-image: url('./assets/img/promo_icon_general.png?v=20240723061931');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center
}

.uo30.hidden, .hidden.truehidden {
  display: none;
  opacity: 1
}

.uo30 .form__message--pop-up {
  padding: 0;
  position: static;
  margin: 0 auto
}

.login-page .uo30 .form__message--pop-up {
  margin: 0px
}

.login-page .uo30 .otp-login #user-feedback.form__message .message {
  color: var(--text-on-dark) !important
}

.login-page .uo30 .otp-login #blackboard .form__line label.flying_label {
  margin: 14px 0
}

.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input:focus {
  border-color: var(--main-color)
}

.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input+span,
.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-pristine+span,
.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-untouched+span,
.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-empty+span,
.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input:focus+span,
.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-empty:focus+span,
.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-touched+span,
.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-dirty+span,
.login-page .uo30 .otp-login #blackboard .form__line label.flying_label input.ng-not-empty+span {
  top: 4px;
  left: 10px;
  background: #eef4ff;
  font-size: 12px;
  color: #94a2ab
}

.login-page .uo30 .otp-login #blackboard .login-input-otp,
.wrapperlogin-page .uo30 .otp-login #blackboard .login-input-otp {
  font-size: 20px;
  width: 1.85em
}

.accordion-items {
  padding-top: 50px
}

.accordion-items>li {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 0;
  margin: 0 -30px;
}

.accordion-items>li>h2 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  color: var(--body-text-color);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.42857143;
  font-family: var(--general-font-family);
  margin: 0;
  padding: 8px 20px
}

.accordion-items>li>h2::after {
  content: '';
  width: 17px;
  height: 10px;
  transform: rotate(270deg);
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 17 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.81 3.516a2.038 2.038 0 0 0 0-2.913 2.11 2.11 0 0 0-2.954 0l-4.433 4.37L3.99.603a2.11 2.11 0 0 0-2.955 0 2.038 2.038 0 0 0 0 2.913l5.91 5.826c.816.803 2.14.803 2.956 0 .127-.126.235-.264.322-.41.149-.087.289-.193.416-.32l5.172-5.096Z" fill="%239873ff"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center
}

.accordion-items>li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1)
}

.accordion-items li>ul {
  display: none
}

.accordion-items li.open>h2 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--general-font-family-bold);
}

.accordion-items li.open>h2::after {
  transform: rotate(0deg)
}

.accordion-items li.open>ul {
  display: block;
  padding: 0 15px 10px
}

.accordion-items li.open>ul .static-page {
  color: var(--body-text-color);
  padding: 0;
  font-size: 14px;
  line-height: 24px;
  padding: 20px 0;
  dt {
    font-weight: bold;
  }
  dd {
    margin-bottom: 10px;
  }
}

.cont {
  margin-bottom: 40px
}

.horizontal,
.vertical {
  position: relative;
  width: 270px;
  scale: 80%;
  margin: 0 auto 0;
  aspect-ratio: .8;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center
}

.wheel-container {
  margin: 0 auto;
  position: relative;
  perspective: 1000px;
  width: var(--v-cell-width);
  height: var(--v-cell-height);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center
}

.wheel {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.wheel-subtext {
  display: none;
  color: var(--body-text-color);
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  margin: 0px auto
}

.wheel-frame,
.wheel-overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  aspect-ratio: .80053191;
  scale: 1.38 1.377;
  height: auto
}

.wheel-lens {
  width: 160%;
  height: auto;
  position: absolute;
  z-index: 2;
  padding: 28px 38px;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
  align-content: stretch;
  justify-content: center;
  aspect-ratio: 2.03529412
}

.wheel-lens::after {
  background-image: url('./assets/img/wheel-lens.svg?v=20240723061931');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2
}

.spin,
.spin.item {
  aspect-ratio: 2.31578947;
  background-color: var(--secondary-color);
  width: auto;
  height: auto;
  z-index: 1;
  position: static;
  margin: 0 auto;
  box-shadow: none;
  border: 15px solid var(--body-text-color);
  border-radius: 20px
}

#wheelbtn-vert {
  padding: 0 20px
}

.spin-placement {
  display: flex;
  background-color: var(--body-text-color)
}

.wheel-frame {
  background-image: url('./assets/img/wheel-bg.svg?v=20240723061931')
}

.wheel-overlay {
  background-image: url('./assets/img/wheel-overlay.svg?v=20240723061931');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center
}

.item {
  display: block;
  position: absolute;
  background: url('./assets/img/cell_glow.svg?v=20240723061931'), var(--cell-bg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
  opacity: 1;
  border-radius: 10px;
  border: none;
  aspect-ratio: var(--item-ratio);
  width: var(--v-cell-width);
  height: var(--v-cell-height);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 3px 3px 0 0px inset var(--body-text-color), -3px -3px 0 0px inset var(--body-text-color), -3px 3px 0 0px inset var(--body-text-color), 3px -3px 0 0px inset var(--body-text-color)
}

.item,
.bigSign,
.spin,
.spin.item {
  text-align: center;
  color: #fefefe;
  line-height: normal;
  display: flex;
  flex-direction: row;
  align-content: stretch;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  font-family: var(--general-font-family-bold), sans-serif;
  font-size: 27px;
  text-transform: uppercase;
}

.cell__content,
.spin {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4)
}

.stars {
  position: absolute;
  width: 100vw;
  height: 80vh;
  overflow: hidden;
  top: 0;
  left: 0
}

.stars span {
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('./assets/img/star.svg?v=20240723061931');
  background-size: contain;
  background-repeat: no-repeat
}

.item.highlighted {
  aspect-ratio: 2.23880597;
  height: auto;
  box-shadow: none;
  border: 11px solid var(--body-text-color);
  border-radius: 20px;
  translate: 0 -7px
}

.vertical:has(.item.highlighted) .wheel-lens {
  scale: 1.2
}

.prize-item:nth-child(1),
.item:nth-child(1) {
  --cell-bg: var(--cell-bg-a)
}

.prize-item:nth-child(2),
.item:nth-child(2) {
  --cell-bg: var(--cell-bg-b)
}

.prize-item:nth-child(3),
.item:nth-child(3) {
  --cell-bg: var(--cell-bg-c)
}

.prize-item:nth-child(4),
.item:nth-child(4) {
  --cell-bg: var(--cell-bg-d)
}

.prize-item:nth-child(5),
.item:nth-child(5) {
  --cell-bg: var(--cell-bg-e)
}

.prize-item:nth-child(6),
.item:nth-child(6) {
  --cell-bg: var(--cell-bg-f)
}

.prize-item:nth-child(7),
.item:nth-child(7) {
  --cell-bg: var(--cell-bg-g)
}

.prize-item:nth-child(8),
.item:nth-child(8) {
  --cell-bg: var(--cell-bg-h)
}

.prize-item:nth-child(9),
.item:nth-child(9) {
  --cell-bg: var(--cell-bg-i)
}

.prize-item:nth-child(10),
.item:nth-child(10) {
  --cell-bg: var(--cell-bg-j)
}

.prize-item:nth-child(11),
.item:nth-child(11) {
  --cell-bg: var(--cell-bg-k)
}

.prize-item:nth-child(12),
.item:nth-child(12) {
  --cell-bg: var(--cell-bg-l)
}

.prizes-list-wheelpage li.prize-item[data-prizeid="lost"],
.prizes-list-wheelpage li.prize-item[data-prizeid^="empty_"] {
  display: none
}

.prizes-box {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 12px;
  margin: 50px 16px 16px;
}

.prizes-box p {
  text-align: center;
  margin-bottom: 16px;
  font-family: var(--general-font-family-bold);
}

.prizes-list-wheelpage {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
  align-items: center
}

.prizes-list-wheelpage.reverse {
  flex-direction: row-reverse
}

.prizes-list-wheelpage li.prize-item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  line-height: 22px;
  color: var(--cell-bg);
  position: static;
  border: none;
  background: transparent;
  box-shadow: none;
  width: auto;
  height: auto;
  flex: 0 0 50%;
  list-style-position: inside;
  margin-bottom: 10px;
}

.prizes-list-wheelpage li.prize-item::before {
  font-size: 22px;
  line-height: 22px;
  content: "\25FC";
  display: inline-block;
  margin-inline-end: 20px
}

.prizes-list-wheelpage span {
  color: var(--body-text-color);
  text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
  font-size: 13px;
  line-height: 22px;
  display: inline-block;
  -webkit-margin-start: -15px;
  margin-inline-start: -15px
}

.promo-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  padding: 20px
}

.promo-modal.visible {
  display: flex;
  justify-content: center;
  align-items: center
}

.promo-modal__content {
  background: var(--body-text-color);
  border-radius: 30px;
  max-width: 400px;
  margin: 22px auto;
  padding: 18px;
  color: #000;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center
}

.promo-modal__content .btn-success {
  margin-bottom: 20px;
  text-transform: none
}

.promo-modal__content .lose .btn-success {
  margin-bottom: 10px
}

.promo-modal__title {
  color: #3351FF;
  text-align: center;
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  line-height: 38px;
  margin-bottom: 18px
}

.promo-modal__subtitle {
  color: #31343C;
  text-align: center;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  max-width: 80%;
  margin: 0 auto 5px
}

.promo-modal__subtitle b,
.promo-modal__subtitle strong,
.promo-modal__subtitle .prize-description {
  color: #E11E25
}

.promo-modal__subtitle .prize-description {
  margin: 0 3px
}

.promo-modal__text {
  color: #31343C;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0 auto 5px
}

.promo-modal__text b,
.promo-modal__text strong {
  color: #E11E25
}

.promo-modal__banner {
  margin: 20px auto;
  aspect-ratio: 2.66666667;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background-image: url('./assets/img/banner_claro.jpg?v=20240723061931');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain
}

.promo-modal__logo {
  margin-bottom: -18px
}

.tip {
  color: #747584;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: start
}

.win .promo-modal__text {
  color: #747584;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: start
}

.win .tip {
  text-align: start;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin-left: -18px;
  margin-right: -18px;
  padding-inline: 20px
}

.win .tip.noshare {
  padding-bottom: 0;
  border: none
}

.win .tip::before {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.177 12.177c0 2.315-.686 4.439-1.868 6.211-1.725 2.555-4.455 4.36-7.632 4.822a9.63 9.63 0 0 1-1.677.144 9.632 9.632 0 0 1-1.677-.144c-3.177-.463-5.907-2.267-7.632-4.822a11.126 11.126 0 0 1-1.868-6.211C5.823 5.997 10.821 1 17 1c6.18 0 11.177 4.998 11.177 11.177Z" stroke="rgb(123, 31, 162)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m31.77 27.298-2.635.623c-.59.143-1.054.59-1.182 1.181l-.558 2.347c-.304 1.278-1.932 1.661-2.779.655L17 23.354 9.384 32.12c-.847 1.006-2.475.623-2.779-.655l-.558-2.347a1.59 1.59 0 0 0-1.182-1.181l-2.635-.623c-1.213-.288-1.644-1.804-.766-2.683l6.227-6.227c1.725 2.555 4.455 4.36 7.632 4.822A9.63 9.63 0 0 0 17 23.37c.575 0 1.134-.048 1.677-.144 3.177-.463 5.907-2.267 7.632-4.822l6.227 6.227c.878.863.447 2.38-.766 2.667ZM17.926 7.354l.942 1.884c.128.256.463.511.767.56l1.708.287c1.086.175 1.341.974.559 1.756l-1.325 1.325c-.224.224-.352.655-.272.974l.383 1.645c.304 1.293-.383 1.804-1.532 1.118l-1.597-.942c-.288-.176-.767-.176-1.054 0l-1.597.942c-1.15.67-1.836.175-1.532-1.118l.383-1.645c.064-.303-.048-.75-.272-.974l-1.325-1.325c-.782-.782-.527-1.565.559-1.756l1.708-.288c.288-.048.623-.303.75-.559l.943-1.884c.463-1.022 1.293-1.022 1.804 0Z" stroke="rgb(123, 31, 162)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
  content: '';
  width: 30px;
  height: 30px;
  flex: 0 0 36px
}

.promo-modal img {
  margin: 0 auto
}

.promo-modal .lose,
.promo-modal .win {
  width: 100%;
  text-align: center
}

.promo-modal.lose .win {
  display: none
}

.promo-modal.lose .lose {
  display: block
}

.promo-modal.lose .lose .box-lose {
  padding: 10px 10px 0;
  margin: 10px 0
}

.promo-modal.win .lose {
  display: none
}

.promo-modal.win .win {
  display: block
}

.share-btn {
  text-align: center;
  background: var(--body-text-color);
  border: 1px solid var(--btn-gen-bg);
  border-radius: 10px;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  width: 100%
}

.share-btn span {
  background-image: url('./assets/img/share.svg?v=20240723061931');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 26px;
  font-size: 15px;
  font-weight: 600px;
  color: var(--btn-gen-bg)
}

#promo-accept h5 {
  color: var(--body-text-color);
  font-size: 16px;
  font-weight: 500;
  font-family: var(--general-font-family)
}

#promo-accept input[type="checkbox"] {
  width: 46px;
  height: 46px
}

#promo-accept .btn.link span {
  display: inline-block;
  border: none;
  background: transparent;
  color: var(--main-color);
  text-align: start;
  text-decoration: underline
}

#promo-accept .btn.link span.no-link {
  text-decoration: none;
  pointer-events: none;
  color: var(--body-text-color);
}

#promo-accept label {
  display: flex;
  text-align: start;
}

.prizes {
  padding: 0 16px 16px
}

.prizes.empty img {
  margin: 50px auto 30px
}

.prizes.empty p {
  color: var(--body-text-color);
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  max-width: 300px;
  margin: 0 auto
}

.prizes h2 {
  color: var(--body-text-color);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
  text-align: center
}

.prizes li p {
  color: #31343C;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  flex: 1 1 auto;
  text-align: start;
}

.prizes li {
  background: var(--body-text-color);
  border-radius: 10px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 64px;
  align-content: center;
  justify-content: space-between;
  align-items: center
}

.prizes li.done {
  opacity: .5
}

.prizes .icon-prize-page {
  margin: 0 8px;
  aspect-ratio: 1;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.177 12.177c0 2.315-.686 4.439-1.868 6.211-1.725 2.555-4.455 4.36-7.632 4.822a9.63 9.63 0 0 1-1.677.144 9.632 9.632 0 0 1-1.677-.144c-3.177-.463-5.907-2.267-7.632-4.822a11.126 11.126 0 0 1-1.868-6.211C5.823 5.997 10.821 1 17 1c6.18 0 11.177 4.998 11.177 11.177Z" stroke="rgb(123, 31, 162)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m31.77 27.298-2.635.623c-.59.143-1.054.59-1.182 1.181l-.558 2.347c-.304 1.278-1.932 1.661-2.779.655L17 23.354 9.384 32.12c-.847 1.006-2.475.623-2.779-.655l-.558-2.347a1.59 1.59 0 0 0-1.182-1.181l-2.635-.623c-1.213-.288-1.644-1.804-.766-2.683l6.227-6.227c1.725 2.555 4.455 4.36 7.632 4.822A9.63 9.63 0 0 0 17 23.37c.575 0 1.134-.048 1.677-.144 3.177-.463 5.907-2.267 7.632-4.822l6.227 6.227c.878.863.447 2.38-.766 2.667ZM17.926 7.354l.942 1.884c.128.256.463.511.767.56l1.708.287c1.086.175 1.341.974.559 1.756l-1.325 1.325c-.224.224-.352.655-.272.974l.383 1.645c.304 1.293-.383 1.804-1.532 1.118l-1.597-.942c-.288-.176-.767-.176-1.054 0l-1.597.942c-1.15.67-1.836.175-1.532-1.118l.383-1.645c.064-.303-.048-.75-.272-.974l-1.325-1.325c-.782-.782-.527-1.565.559-1.756l1.708-.288c.288-.048.623-.303.75-.559l.943-1.884c.463-1.022 1.293-1.022 1.804 0Z" stroke="rgb(123, 31, 162)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
  flex: 0 0 36px
}

.prizes .btn-success,
.prizes p.redeemed {
  flex: 0 0 100px;
  margin: 12px;
  padding: 6px 12px;
  font-size: 18px
}

.prizes p.redeemed {
  color: var(--secondary-color);
  text-align: center;
  font-style: normal;
  font-weight: 700;
  line-height: normal
}

.wheelbtn-stop,
.timer,
.prizes-container {
  transition: opacity .2s linear
}

.timer {
  text-align: center
}

.hidden {
  opacity: 0;
  pointer-events: none
}