@import url("/assets/css/fonts/roboto/font.css"); body { font-family: 'Roboto', sans-serif; font-size: 14px; color: #fff; margin: 0; box-sizing: border-box; line-height: 1.42857 } header { background-color: #171342; padding-top: 4px } ul { display: flex; list-style: none; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: 0 } ul li { padding: 0 8px } a { text-decoration: none; color: #fff } a:focus { outline: 0 } a:active { opacity: .2 } .wrapper { width: 100%; padding: 0 6rem; box-sizing: border-box } .row { display: flex } .close-any { position: fixed; top: 0; left: 0; right: 0; bottom: 0 } .close-any__clickable { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 999 } .button { margin: 0 auto; width: 100%; display: block; padding: 12px 16px; font-size: 16px; line-height: 1.33333; border-radius: 0; cursor: pointer; box-sizing: border-box; text-align: center; border: none } .button:active { opacity: .2 } .button:focus { outline: 0 } .button--yellow { color: #212121; background-color: #e3a43b; border-color: #e3a43b } .button--blue { color: #212121; background-color: #1da0cb; border-color: #1da0cb } input { font-family: Roboto, sans-serif } .text-muted { color: #636c72 } .nav { background-color: #171342; box-shadow: 0 1px 0 rgba(0, 0, 0, .3); position: fixed; top: 0; height: 43px; width: 100%; z-index: 9998; display: flex; justify-content: space-between; align-items: center } .nav__menu, .nav__notification { cursor: pointer; z-index: 1; } .nav__menu:active, .nav__notification:active { opacity: .2 } .nav__menu i, .nav__notification i { font-size: 21px } .nav__menu .fa-times { display: none } .nav__menu .fa-arrow-left { font-size: 16px } .nav__logo { max-width: 90px; } .nav__logo img { max-width: 100%; height: auto } .nav__title { font-size: 20px; margin-top: -2px; } .nav__title-container { display: inline } .nav__title-container span { font-size: 20px } .nav__title-container i { font-size: 14px } .nav__title-dropdown { position: fixed; top: 43px; right: 0; left: 0; height: 0; transition: .3s; overflow: hidden } .nav__title-dropdown.show { height: 400px } .nav__title-dropdown ul { display: block } .nav__title-dropdown ul li { background-color: #f0f0f0 } .nav__title-dropdown ul li:hover { background-color: #e4e2e2 } .nav__title-dropdown ul li a { padding: .625rem 1rem; font-size: .875rem; border-bottom: 1px solid #dfdddd; display: block; color: #262626 } .nav__notification { padding-right: 16px; padding-left: 0 } .nav__notification i { position: relative } .nav__notification i .notif-on { background-color: #23b223; position: absolute; top: -1px; right: 2px; width: 8px; height: 8px; border-radius: 100%; border: 2px solid } .nav__right { padding-right: 16px; padding-left: 0 } .nav__right img { width: 18px; height: 18px } .slider {} .slider__bg { background-color: #292b2c } .slider__bg-img { max-width: 50rem; width: 100%; height: auto; margin: 0 auto -4px } .slider__bg-img img { max-width: 100%; height: auto } .slider img { width: 100%; height: auto } .slider .swiper-button-next, .slider .swiper-button-prev { color: rgba(255, 255, 255, .4) } .slider .swiper-button-next::after, .slider .swiper-button-prev::after { font-size: 16px } .slider .swiper-button-next:focus, .slider .swiper-button-prev:focus { outline: 0 } .slider .swiper-pagination-bullet { background: #212121; opacity: 1; width: 2px; height: 2px; border-radius: 100% } .slider .swiper-pagination-bullet-active { background: #fff } .matches { max-width: 35rem; margin: 16px auto 0px; padding: 0 11px; position: relative } .matches__top { background: linear-gradient(-207deg, #171342 50%, #105a72); position: relative; border-top-left-radius: 15px; border-top-right-radius: 15px } .matches__top-title { font-size: 15px; text-transform: uppercase; padding: 4px; text-align: center; font-weight: 700; margin-bottom: -1px } .matches__top-title strong { color: #1da0cb } .matches__top-close { position: absolute; top: 5px; right: 5px; cursor: pointer } .matches__top-close:active { opacity: .2 } .matches__top-close i { font-size: 19px; color: #1da0cb } .matches__title { position: absolute; top: 33px; left: 24px; z-index: 999 } .matches__pagination { background: #301d6e; margin: 0; padding: 15px; position: relative } .matches__detail { background-image: url(../img/football.png); background-color: #fff; background-repeat: no-repeat; background-position: center -35px; background-size: 65%; border: 1px solid #dedede; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px } .matches__detail-versus { display: flex; justify-content: center; align-items: flex-end; padding: 12px 24px } @media only screen and (max-width:475px) { .matches__detail-versus { padding: 6px 2px } } .matches__detail-versus .club-detail { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 0 8px } .matches__detail-versus .club-detail__logo img { width: 32px; height: 32px } .matches__detail-versus .club-detail__versus { background-color: #000; width: 32px; height: 32px; border-radius: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 16px } .matches__detail-versus .club-detail__name { color: #292b2c; font-size: 12px; white-space: nowrap; max-width: 100px; overflow: hidden; text-overflow: ellipsis } .matches__detail-versus .club-detail__score { background-color: #000; padding: 5px 7px; border-radius: 4px; font-size: 12px; width: 93%; margin: auto; display: flex; justify-content: space-between } .matches__detail-versus .club-detail__score-title { text-transform: uppercase } .matches__detail-versus .club-detail__score-point { color: #1da0cb; font-weight: 700 } .matches__detail-footer { background-color: #e8e8e8; padding: 8px 15px; display: flex; justify-content: space-between; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px } .matches__detail-footer .detail-time { color: #000; font-size: 14px; font-weight: 700 } .matches__detail-footer .button-cta { background-color: #1da0cb; color: #000; padding: 8px 24px; font-weight: 700; font-size: 14px } .matches .swiper-button-next, .matches .swiper-button-prev { color: #fff; top: 15px } .matches .swiper-button-next::after, .matches .swiper-button-prev::after { font-size: 12px } .matches .swiper-button-next:focus, .matches .swiper-button-prev:focus { outline: 0 } .matches .swiper-button-next { right: 0px } .matches .swiper-button-prev { left: auto; right: 58px } .matches .swiper-pagination-fraction { top: 6px; width: unset !important; right: 23px; font-size: 12px; left: unset !important } .game-list { max-width: 35rem; margin: 0px auto } .game-list.has-padding { padding-top: 40px } .game-list__detail { display: flex; flex-wrap: wrap; padding: 10px; } @media only screen and (max-width:475px) { .game-list__detail { justify-content: center } } .game-list__detail .detail-list { position: relative; padding: 1%; width: 23%; font-size: 0px; } @media only screen and (max-width:475px) { .game-list__detail .detail-list { width: 31.33% } } .game-list__detail .detail-list img { max-width: 100%; height: auto; border-radius: 8px } .game-list__detail .detail-list img.has-shadow { box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2) } .game-list__detail .detail-list__title { position: absolute; left: 0; right: 0; bottom: 15px; text-align: center; font-size: 16px } .footer { max-width: 720px; width: 100%; margin: 0 auto; padding-bottom: 24px } .footer .social-logo { margin-bottom: 8px } .footer .social-logo ul { display: flex; flex-wrap: wrap; justify-content: center } .footer .social-logo ul li { padding: 5px 16px } .footer .social-logo ul li a { color: #211f69; font-size: 30px } .footer .copyright { color: #262626; font-size: 16px; text-align: center; } .bottom-nav { background-color: #171342; position: fixed; bottom: -1px; height: 60px; width: 100%; z-index: 999 } .bottom-nav ul { width: 100%; height: 100%; display: flex; align-items: center } .bottom-nav ul li { flex: 1; text-align: center } .bottom-nav ul li a { display: flex; flex-direction: column; font-size: 10px; } .bottom-nav ul li a i { font-size: 28px; margin-bottom: 3px; } .bottom-nav.open { z-index: 999999; } .banking-container { position: relative; -webkit-tap-highlight-color: transparent; } .banking-container .banking i { display: none; } .banking-container.open .banking i { display: block; font-size: 13px; margin-top: 4px; } .banking-container.open .banking i.fa-times { color: white; } .banking-container.open .banking img { display: none; } .banking-container.open .tree-icon a.deposit { left: -67px; bottom: 74px; opacity: 1; } .banking-container.open .tree-icon a.promosi { bottom: 125px; opacity: 1; } .banking-container.open .tree-icon a.withdrawal { left: 88px; bottom: 74px; opacity: 1; } .tree-icon a { position: absolute; bottom: -80px; left: 11px; opacity: 0; box-shadow: 0 2px 4px 0 rgb(0 0 0 / 75%); background-color: #970919; color: #f3f4f5; width: 72px; height: 72px; border-radius: 50%; text-align: center; justify-content: center; align-items: center; transition: all .2s ease; } .menu { background-color: #fff; position: fixed; top: 0px; left: -280px; min-height: 100vh; z-index: 9999; max-width: 17.5rem; width: 280px; height: 100%; overflow: auto; transition: all ease .3s } .menu ul { display: block } .menu ul li { padding: 12px 16px; border-bottom: 1px solid #ddd; display: grid; } .menu ul li:first-child { background-color: #1da0cb; border-bottom: none } .menu ul li:nth-child(2) { background-color: #e3a43b; border-bottom: none } .menu ul li a { display: flex; align-items: center } .menu ul li a img { width: 21px; height: 21px; margin-right: 16px } .menu ul li a span { color: #292b2c; font-size: 16px; text-transform: uppercase } .menu__close { margin-top: 8px; cursor: pointer } .menu__close:active { opacity: .2 } .menu__close i { font-size: 24px } .menu--login ul li:first-child, .menu--login ul li:nth-child(2) { background-color: unset; border-bottom: 1px solid #ddd } .menu--login ul li:first-child a span { text-transform: unset } .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; z-index: 999999; background: rgba(0, 0, 0, .5); display: none } .modal__box { max-width: 45%; margin: 2% auto; transition: all ease .3s } @media only screen and (max-width:732px) { .modal__box { max-width: 96%; margin: 2% auto } } @media only screen and (max-width:475px) { .modal__box { max-width: 100%; margin: 0 } } .modal__content { position: relative; background-color: #e6e5e5; color: #292b2c; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, .2); border-radius: .3rem; outline: 0 } @media only screen and (max-width:475px) { .modal__content--full { max-width: 100%; margin: 0; min-height: 100vh } } .modal__content .login-header, .modal__content .notif-header { padding: 15px; position: relative } .modal__content .login-header__title, .modal__content .notif-header__title { font-size: 24px; text-align: center } .modal__content .login-header__close, .modal__content .notif-header__close { position: absolute; top: 0; right: 0; width: 40px; height: 40px; background-color: #171342; display: flex; justify-content: center; align-items: center; cursor: pointer } .modal__content .login-header__close:active, .modal__content .notif-header__close:active { opacity: .2 } .modal__content .login-header__close img, .modal__content .notif-header__close img { width: 16px; height: auto } .modal__content .login-header__img, .modal__content .notif-header__img { display: flex; justify-content: center } @media only screen and (max-width:475px) { .modal__content .login-header__img, .modal__content .notif-header__img { margin-top: 80px } } .modal__content .login-header__img img, .modal__content .notif-header__img img { max-width: 200px; height: auto } .modal__content .notif-body { padding: 0 24px 24px } .modal__content .notif-body__detail-list { margin-bottom: 16px } .modal__content .notif-body__detail-list .detail-header { background-color: #eceeef; padding: 10px; display: flex; justify-content: space-between; margin-bottom: 12px; cursor: pointer } .modal__content .notif-body__detail-list .detail-content { display: none } .modal__content .notif-body__detail-list .detail-content__box { border-color: rgba(0, 0, 0, .1); background-color: #fff; margin-bottom: 12px; border-radius: .5rem } .modal__content .notif-body__detail-list .detail-content__box .content { padding: 12px } .modal__content .notif-body__detail-list .detail-content__box .content a { color: #1da0cb } .modal__content #login-forgot, .modal__content #login-form { padding: 12px } .modal__content #login-forgot .form-group, .modal__content #login-form .form-group { margin-bottom: 16px; position: relative } .modal__content #login-forgot .form-group label, .modal__content #login-form .form-group label { font-size: 12px; text-transform: uppercase } .modal__content #login-forgot .form-group label strong, .modal__content #login-form .form-group label strong { color: #c4281c } .modal__content #login-forgot .form-group input, .modal__content #login-form .form-group input { padding: 11px 8px; font-size: 14px; height: 40px; box-sizing: border-box; border: none; background-color: #fff; width: 100%; margin-top: 8px; font-size: 1rem } .modal__content #login-forgot .form-group input:focus, .modal__content #login-form .form-group input:focus { outline: 0; border: 1px solid #171342 } .modal__content #login-forgot .form-group span, .modal__content #login-form .form-group span { color: #d42848; font-size: 12px; margin-top: 4px } .modal__content #login-forgot .form-group .password-show, .modal__content #login-form .form-group .password-show { position: absolute; top: 18px; right: 12px; cursor: pointer } .modal__content #login-forgot .form-group .password-show:active, .modal__content #login-form .form-group .password-show:active { opacity: .2 } .modal__content #login-forgot .form-group .password-show i, .modal__content #login-form .form-group .password-show i { font-size: 18px } .modal__content #login-forgot .forgot-password, .modal__content #login-form .forgot-password { color: #1da0cb; font-size: 12px; text-align: center; cursor: pointer; padding-top: 16px } .modal__content #login-forgot .forgot-password:active, .modal__content #login-form .forgot-password:active { opacity: .2 } .modal__content #login-forgot .button, .modal__content #login-form .button { margin-top: 16px } .modal__content #login-forgot { display: none } .modal__content .login-body { max-width: 300px; margin: 0 auto } .modal__content .login-footer { max-width: 300px; padding: 16px; box-sizing: border-box; margin: 0 auto } #modal-login { overflow-y: hidden } #modal-promo .modal-header { position: relative } #modal-promo .modal-header__bg img { max-width: 100%; height: auto } #modal-promo .modal-header__cta { position: absolute; top: 0; right: 0; display: flex } #modal-promo .modal-header__cta .button { padding: 8px 12px } #modal-promo .modal-body { padding: 10px } #modal-promo .modal-body .promo-subtitle, #modal-promo .modal-body .promo-title { font-size: 1.5rem; text-align: center; width: 100%; margin: 0; overflow: hidden; word-wrap: break-word; margin-bottom: 8px } #modal-promo .modal-body .promo-subtitle { text-align: left; margin-top: 8px } #modal-promo .modal-body .promo-timer { background-color: transparent; border-radius: 0; width: 290px; margin: 0 auto; text-align: center; display: flex } #modal-promo .modal-body .promo-timer .button, #modal-promo .modal-body .promo-timer span { line-height: 1; vertical-align: middle; padding-right: 2px; flex: 1 } #modal-promo .modal-body .promo-timer .button:last-child, #modal-promo .modal-body .promo-timer span:last-child { padding-right: 0 } #modal-promo .modal-body .promo-timer .button small, #modal-promo .modal-body .promo-timer span small { font-size: 8px; text-transform: uppercase; color: #fff; background-color: #171342; display: block; padding: 8px } #modal-promo .modal-body .promo-timer .button big, #modal-promo .modal-body .promo-timer span big { color: #171342; padding: 8px; display: block; background-color: #fafafb; font-size: 26px; font-weight: 300 } #modal-promo .modal-body .promo-timer .button { padding: 10px 12px !important; font-size: 16px; text-transform: uppercase; text-shadow: 0 2px 2px rgba(10, 10, 10, .15); border-radius: 0 } .box { padding: 10px 15px; max-width: 50rem; margin: 0 auto; box-sizing: border-box; } .box__detail-img { margin-bottom: .75rem; cursor: pointer } .box__detail-img.default-cursor { cursor: default } .box__detail-img img { max-width: 100%; height: auto; border-radius: .5rem; border: 1px solid rgba(0, 0, 0, .125) } .box__detail-cta { display: flex; margin: -9px -1px 0 1px } .box__detail-cta a { flex: 1 } .box__detail-cta a:first-child { border-bottom-left-radius: .5rem } .box__detail-cta a:last-child { border-bottom-right-radius: .5rem } @media (max-width:543px) { .box__detail-cta a { padding: 6px 8px; font-size: 12px } } .box__promo { display: block; padding-top: 55px } .box__promo-list { padding: 0; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2); margin-bottom: .625rem; border-radius: .5rem; overflow: hidden } .box__promo-list .promo-title { background-color: #fff; min-height: 80px; padding: 15px 20px 0; box-sizing: border-box } .box__promo-list .promo-title h3 { color: #292b2c; font-size: 14px; text-transform: uppercase; margin-bottom: 5px } .box__promo-list .promo-title small { font-size: 12px; color: #636c72 } .box__promo-list .promo-img img { max-width: 100%; height: auto } .box__promo-list .promo-cta { display: flex; margin-top: -5px } .box__promo-list .promo-cta a { flex: 1; text-transform: uppercase } .box__promo-list .promo-cta a:first-child { max-width: 44px } @media (max-width:543px) { .box__promo-list .promo-cta a { padding: 6px 8px; font-size: 12px } } .box--promo { padding: 43px 15px; max-width: 25rem; position: relative } .box--promo #list-tabs { background: #fff; position: absolute; left: 0; right: 0; overflow: auto } .box--promo #list-tabs::-webkit-scrollbar { display: none } .box--promo #list-tabs li { padding: 0; white-space: nowrap; text-overflow: ellipsis; display: block; transition: .3s } .box--promo #list-tabs li.active { border-bottom: 1px solid #1da0cb } .box--promo #list-tabs li.active a { color: #1da0cb } .box--promo #list-tabs li a { color: #636c72; padding: .625rem 2rem; display: block; text-transform: uppercase } .vip { padding: 75px 10px } .vip__top-header { color: #301d6e; font-size: 1.25rem; text-align: center; overflow: hidden; word-wrap: break-word } .vip__top-content { margin-top: 16px } .vip__top-content .content-detail__list { display: flex; align-items: center } .vip__top-content .content-detail__list .detail-img { margin-right: 8px } .vip__top-content .content-detail__list .detail-img img { width: 50px; height: 50px } .vip__top-content .content-detail__list .detail-text { color: #3c3c3c; font-size: 12px; padding-right: 26px } .vip__content { margin-top: 16px } .vip__content #list-tabs { background-color: #171342; display: flex } .vip__content #list-tabs li { padding: 0; flex: 1 } .vip__content #list-tabs li a { display: flex; flex-direction: column; align-items: center; position: relative; border-right: 1px solid #b3b3b3 } .vip__content #list-tabs li a:last-child { border-right: none } .vip__content #list-tabs li a:before { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 3px; background-color: #b3b3b3 } .vip__content #list-tabs li a img { width: 40px; height: 40px; margin-bottom: 4px } .vip__content #list-tabs li a span { color: #fff; font-size: 14px; text-transform: uppercase } .vip__content #list-tabs li:nth-child(1).active { background-color: #1a5213 } .vip__content #list-tabs li:nth-child(1).active a:before { background-color: #1a5213 } .vip__content #list-tabs li:nth-child(2).active { background-color: #707479 } .vip__content #list-tabs li:nth-child(2).active a:before { background-color: #707479 } .vip__content #list-tabs li:nth-child(3).active { background-color: #e7b44b } .vip__content #list-tabs li:nth-child(3).active a:before { background-color: #e7b44b } .vip__content #list-tabs li:nth-child(4).active { background-color: #c900bd } .vip__content #list-tabs li:nth-child(4).active a:before { background-color: #c900bd } .vip__content #content { margin-top: 12px } .vip__content #content .tab-content { display: none } .vip__content #content .tab-content table { width: 100%; max-width: 100%; border-collapse: collapse; background-color: transparent } .vip__content #content .tab-content table tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, .05) } .vip__content #content .tab-content table tr td { vertical-align: middle; padding: .75rem; border-top: 1px solid rgba(0, 0, 0, .1) } .vip__bottom { color: #292b2c; text-align: center; display: flex; flex-direction: column } .vip__bottom small { font-size: 12.8px } .vip__bottom small:first-child { margin-bottom: 4px } .vip__bottom small:nth-child(2) { margin-bottom: 8px; line-height: 2 } .vip__bottom .button { width: unset } .profile {} .profile__header { padding: 1.25rem; background-color: #e6e5e5; color: #292b2c; display: flex; flex-direction: column; justify-content: center; align-items: center } .profile__header-title { font-size: 12px; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px } .profile__header-currency { font-size: 12px; color: #636c72; font-style: italic } .profile__header--secondary { background-color: #fff; flex-direction: row; padding: 12px } .profile__header--secondary .profile__header-title { font-size: 1rem; margin-right: 4px } .profile__verification { padding: 20px } .profile__verification-account { display: flex; justify-content: center; align-items: center } .profile__verification-account .verification-detail { display: flex; align-items: center } .profile__verification-account .verification-detail__badge { background: url(../img/account.png); background-size: 105px; height: 78px; width: 78px; background-repeat: no-repeat; display: block; overflow: hidden; margin: -2px 20px 0 0; background-position: 0 0 } .profile__verification-account .verification-detail__account { flex: 1 1 auto; display: flex; flex-direction: column; margin-top: -4px } .profile__verification-account .verification-detail__account .section-top { display: flex } .profile__verification-account .verification-detail__account .section-top .av-icon { background: url(../img/account.png); background-repeat: no-repeat; background-size: 130px; height: 30px; width: 34px; margin: 0 10px 10px 10px; display: inline-block } .profile__verification-account .verification-detail__account .section-top .av-icon:first-child { margin-left: 0 } .profile__verification-account .verification-detail__account .section-top .av-icon.av-profile { background-position-x: -97px } .profile__verification-account .verification-detail__account .section-top .av-icon.av-bank { background-position: -97px -31px } .profile__verification-account .verification-detail__account .section-top .av-icon.av-sms { background-position: -97px -67px } .profile__verification-account .verification-detail__account .section-top .av-icon.av-email { background-position: -97px -98px } .profile__verification-account .verification-detail__account .section-top .av-icon__bonus { background: url(../img/account.png); background-size: 130px; display: block; height: 20px; width: 20px; background-position: -98px -130px; background-repeat: no-repeat; margin-left: 19px; margin-top: 12px } .profile__balance { background-color: #efefef; display: flex } .profile__balance-section { flex: 1; padding: 15px 10px; text-align: center } .profile__balance-section span { font-size: 12.8px; color: #7e7e7e } .profile__balance-section span:last-child { color: #bbb } .profile__balance-section .balance-detail { display: flex; justify-content: center; align-items: center } .profile__balance-section .balance-detail__number { font-size: 18px; color: #1da0cb; margin-right: 8px } .profile__balance-section .balance-detail__icon { color: #7e7e7e } .profile__menu { margin-top: 1px; padding-bottom: 55px } .profile__menu ul { display: flex; flex-wrap: wrap } .profile__menu ul li { background-color: #e6e5e5; flex: 0 0 33.333%; padding: unset; border: 1px solid rgba(0, 0, 0, .125); border-width: 0 1px 1px 0; border-color: #fff; box-sizing: border-box } @media (max-width:544px) { .profile__menu ul li { flex: 0 0 50% } } .profile__menu ul li a { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1.25rem; color: #262626 } .profile__menu ul li a img { width: 40px; height: 41px; margin-bottom: 8px } .profile__menu ul li a span { font-size: 10px; text-transform: uppercase; font-weight: 300 } .profile__edit { max-width: 30rem; margin: 0 auto; padding: 10px 15px 65px; box-sizing: border-box } .profile__bank { max-width: 30rem; margin: 0 auto; padding: 10px 15px 65px; box-sizing: border-box } .profile__bank-box { border: 1px solid #ddd; border-radius: .5rem } .profile__bank-box .bank-section__top { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid #ddd } .profile__bank-box .bank-section__top-title { font-size: 20px; color: #292b2c } .profile__bank-box .bank-section__top-button .button { font-size: 10px; padding: 5px; text-transform: uppercase } .profile__bank-box .bank-section__detail { padding: 12px 20px; display: none } .profile__bank-box .bank-section__notes { padding: 12px 20px; font-size: 12.8px; color: #636c72; border-top: 1px solid #ddd } .profile__compose { position: fixed; right: 15px; bottom: 75px } .profile__compose .button { width: 56px; height: 56px; border-radius: 100%; display: flex; align-items: center; justify-content: center } .profile__compose .button i { font-size: 24px } .profile__to { padding: 0 15px } .profile__message { position: fixed; left: 0; right: 0; bottom: 50px; background-color: #e6e5e5; padding: .75rem; display: flex; align-items: center } .profile__message textarea { font-size: .875rem; border: 0; resize: none; padding: .5rem; background-color: #fff; border-radius: .5rem; flex: 1; line-height: 1.25; color: #464a4c; min-height: 60px } .profile__message textarea:focus { outline: 0 } .profile__message button { width: 56px; padding: 0; background-color: transparent; color: #1da0cb } .form-group { margin-bottom: 1rem } .form-group label { font-size: .75rem; color: #262626; text-transform: uppercase; margin-bottom: 0; display: inline-block } .form-group p { color: #262626; margin-top: 5px } .form-group label .text-danger { color: #c4281c } .form-group .form-control { display: block; width: 100%; padding: .5rem .75rem; font-size: 1rem; line-height: 1.25; color: #464a4c; border: 1px solid rgba(0, 0, 0, .15); font-weight: 300; text-align: left; border-radius: 0; transition: all .2s ease-in-out; margin-top: .6rem; box-sizing: border-box; background-color: #fff } .form-group .form-control:focus { border: 1px solid; outline: 0; border-color: #171342 } .form-group .form-control[disabled], .form-group .form-control[readonly] { padding-right: 1.75rem; background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAAHlBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABaVcReAAAACnRSTlMAXBI6KExVHTEGZKQ5ZwAAAGNJREFUeF5joCXQCBRtQhfjEHUvCWxAEzQrYGBgT0YVY0kCkWoOKILTwFyWTBRBVwgVgiJojEIxoChxHdyCxsapxmAQZmwMFxQ2hgNDuKAQAxwojgoCgbgSHBTCBQWRAAONAABW0hXaky1gaAAAAABJRU5ErkJggg==) no-repeat right center; background-size: 20px; opacity: 1 } .form-group .custom-select { font-size: 1rem; line-height: 1.25; color: #464a4c; width: 100%; padding: .5rem .75rem .5rem 0; background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAALVBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACttl6nAAAAD3RSTlMAvwQKkpm3h40QgnKeUU0GYVJMAAAArklEQVR4XmMgA2hnK2CIMS0UXIQhqC4oKI6ulKlQUFCwCFOhoKAEqlKmRkEQaEYRNBEEAxEDJDFmR0EIcEYSNBWEAlGEUuZAQRgIhgtOFYQDmQlQMc6DgghwEirIIogERKCCbMiCYlBB3kRBBMhlGGCA6aQ8PI5H9aYEtgCJxBJ0ogZ4AxkRHSIGeCMOEcUSBsiCzJDE0MSAAjRAYuIKeBMYIoVJKeBPtMjJm2QAABFbIeu0XeKXAAAAAElFTkSuQmCC) no-repeat right center; background-size: .75rem; border: 0; border-bottom: 1px solid rgba(0, 0, 0, .1); display: inline-block; max-width: 100%; -moz-appearance: window; -webkit-appearance: none } .form-group .custom-select:focus { border: none; border-bottom: 1px solid; outline: 0; border-color: #171342 } .form-group .input-icon { position: relative } .form-group .input-icon img { position: absolute; right: 8px; width: 20px; height: 20px; top: 8px } .form-group .custom-control { position: relative; display: inline; padding-left: 1.5rem; cursor: pointer; color: #262626 } .form-group .custom-control-block { display: block; position: relative; padding-left: 0 } .form-group .custom-switch { margin-top: .46875rem } .form-group .custom-control-input { position: absolute; z-index: -1; opacity: 0 } .form-group .custom-control-indicator { position: absolute; top: -.125rem; left: 0; display: block; width: 3.125rem; height: 1.875rem; pointer-events: none; user-select: none; background-color: #bbb; background-repeat: no-repeat; background-position: center center; background-size: 75%; border-radius: .9375rem; transition: .4s; left: auto; right: 0; margin-top: -.23438rem } .form-group .custom-control-indicator::before { content: ""; position: absolute; left: 1px; top: 2px; width: 1.625rem; height: 1.625rem; background-color: #fff; border-radius: 50%; transition: .4s } .form-group .custom-switch .custom-control-input:checked~.custom-control-indicator:before { -webkit-transform: translateX(1.25rem); -moz-transform: translateX(1.25rem); transform: translateX(1.25rem) } .form-group .custom-control-description { font-size: 1rem; text-transform: none; color: #636c72 } .form-group .custom-switch .custom-control-input:checked~.custom-control-indicator { background-color: #171342 } .form-group .custom-control-input:checked~.custom-control-indicator { color: #fff; border-color: #171342 } .form-group .input-group { display: table; position: relative; width: 100%; border-collapse: separate } .form-group .input-group .custom-select { width: 15%; border: 1px solid rgba(0, 0, 0, .1); border-right: 0; padding: .2rem .5rem; height: 38px; float: left; margin-top: .6rem; background-position: 95% center } .form-group .input-group .form-control { width: 85%; display: table } .form-group .custom-file { font-size: 1rem; text-transform: none; width: 100%; position: relative; display: inline-block; max-width: 100%; height: 2.5rem; cursor: pointer } .form-group .custom-file-input { min-width: 14rem; max-width: 100%; margin: 0; opacity: 0; display: block; padding: .5rem 1rem; margin-bottom: 10px } .form-group .custom-file-control { padding-left: 0; background-color: transparent; border: 0; border-bottom: 1px solid rgba(0, 0, 0, .1); padding-right: 2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: absolute; top: 0; right: 0; left: 0; z-index: 5; height: 2rem; padding: .5rem 0 0; line-height: 1.5; color: #555; user-select: none; border-radius: 0 } .funds__header { display: flex; justify-content: space-between; align-items: flex-end; padding: 20px 24px 0 } .funds__header-left { display: flex; flex-direction: column } .funds__header-left span { color: #262626; text-transform: uppercase; font-size: 12px } .funds__header-left .header-balance { display: flex; align-items: center; color: #1da0cb } .funds__header-left .header-balance small { font-size: 12px; margin-right: 4px } .funds__header-left .header-balance strong { font-size: 40px } .funds__header-right { padding-bottom: 10px } .funds__header-right .header-more { width: 34px; height: 30px; background-color: #e6e6e6; display: flex; justify-content: center; align-items: center } .funds__header-right .header-more i { color: #262626; font-size: 24px } .funds__menu { margin-top: 1px; padding-bottom: 55px } .funds__menu ul { display: flex; flex-wrap: wrap } .funds__menu ul li { background-color: #e6e5e5; flex: 0 0 33.333%; width: 33.333%; padding: unset; border: 1px solid rgba(0, 0, 0, .125); border-width: 0 1px 1px 0; border-color: #fff; box-sizing: border-box } @media (max-width:544px) { .funds__menu ul li { flex: 0 0 50%; width: 50% } } .funds__menu ul li a { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1.25rem; color: #262626 } .funds__menu ul li a img { width: 40px; height: 41px; margin-bottom: 8px } .funds__menu ul li a span { font-size: 10px; text-transform: uppercase; font-weight: 300 } .funds__menu--wallet { display: none; padding-bottom: 0 } .funds__menu--wallet ul li { background-color: #171342; padding: .75rem 1rem; text-align: center } .funds__menu--wallet ul li .label { font-size: .625rem; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 300 } .funds__menu--wallet ul li .value { font-size: 1.5rem; color: #1da0cb } .funds__menu--wallet ul li .currency { font-size: 1rem; font-weight: 700 } .funds__transfer { max-width: 30rem; margin: 0 auto; padding: 15px 15px 45px; box-sizing: border-box } .funds__container { position: relative } .funds__container ul { border-color: transparent; background-color: #f2f2f2; position: relative; left: 0; right: 0; overflow: auto } .funds__container ul::-webkit-scrollbar { display: none } .funds__container ul li { padding: 0; white-space: nowrap; text-overflow: ellipsis; display: block; transition: .3s } .funds__container ul li a { padding: 10px 32px; color: #636c72; display: block } .funds__container ul li.active { border-bottom: 1px solid #1da0cb } .funds__container ul li.active a { color: #1da0cb } .funds__container-section { max-width: 30rem; margin: 0 auto; padding: 12px 15px; box-sizing: border-box } .funds__container-section table { width: 100%; max-width: 100%; margin-bottom: 1rem; font-size: .875rem; color: #292b2c } .funds__container-section table tr td, .funds__container-section table tr th { vertical-align: middle; padding: .3rem; border-bottom: 1px solid rgba(0, 0, 0, .1) } .funds__container-section table tr th { color: #171342; text-align: left; font-weight: 300; padding-left: 0 } .funds__container-section .section-input { padding-bottom: 50px } .funds__container-section .section-input .bank-information { padding: 24px 0 } .funds__container-section .section-input .bank-information ul { border-radius: .5rem; border: 1px solid rgba(0, 0, 0, .125); display: flex; flex-direction: column; position: relative; background-color: #fff } .funds__container-section .section-input .bank-information ul li { padding: .75rem 1.25rem; display: flex } .funds__container-section .section-input .bank-information ul li span { font-size: 1rem; color: #292b2c } .funds__container-section .section-input .bank-information ul li span:first-child { margin-right: 4px } .funds__container-section .section-input .alert-danger { background-color: #f2dede; border-color: #ebcccc; color: #a94442 } .funds__container-section .section-note { color: #292b2c } .funds__container-section .section-note__box { background-color: #d4edda; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); border: 1px solid rgba(128, 128, 128, .2); padding: 10px; border-radius: 4px; font-size: 16px } .funds__container-section .section-note__box ul { display: block; list-style-type: disc; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: 40px; border-color: unset; background-color: unset; position: unset; left: unset; right: unset; overflow: unset } .funds__container-section .section-note__box ul li { padding: unset; white-space: unset; text-overflow: unset; display: list-item; transition: unset } .funds__container-section .section-note__box ul li a { padding: unset; color: #1da0cb; display: unset } .funds__container-section .section-note h3 { font-size: 16px } .funds__container-section .section-note .coupon { display: flex; font-size: 16px; border-top: 1px solid rgba(0, 0, 0, .15); padding: 8px 0 } .funds__container-section .section-note .coupon strong { flex: 3 } .funds__container-section .section-note .coupon span { flex: 1 } .funds__container-section .section-text { padding: 16px } .funds__container-section .section-text p { font-size: 16px } .funds__container-section .section-text a { color: #1da0cb } .funds__rebate { max-width: 35rem; margin: 0 auto; padding: 55px 15px } .funds__rebate-header { padding-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, .1) } .funds__rebate-detail { margin-top: 16px; margin-right: -15px; margin-left: -15px } .funds__rebate-detail .rebate-item__title { text-align: center; font-size: 14px; color: #292b2c; text-transform: uppercase } .funds__rebate-detail .rebate-item__detail { margin-top: 12px; display: flex; flex-wrap: wrap } .funds__rebate-detail .rebate-item__detail-box { width: 50%; padding: 0 15px; box-sizing: border-box } @media only screen and (max-width:475px) { .funds__rebate-detail .rebate-item__detail-box { width: 100%; padding: 0 } } .funds__rebate-detail .rebate-item__detail-box .box-header { position: relative; border-bottom: 1px solid rgba(0, 0, 0, .1); padding: 12px 15px; display: flex; justify-content: space-between; align-items: center } .funds__rebate-detail .rebate-item__detail-box .box-header span { color: #ffffff; font-size: 12px } .funds__rebate-detail .rebate-item__detail-box .box-header .chevron i { color: #292b2c } .funds__rebate-detail .rebate-item__detail-box .box-content { background-color: #e6e5e5; display: none } .funds__rebate-detail .rebate-item__detail-box .box-content ul { display: flex; flex-direction: column } .funds__rebate-detail .rebate-item__detail-box .box-content ul li { display: flex; justify-content: space-between; padding: 5px 12px; background-color: #fff; border: 1px solid #ddd; border-top: 0px; } .funds__rebate-detail .rebate-item__detail-box .box-content ul li span { font-size: 12px } .funds__rebate-detail .rebate-item__detail-box .box-content ul li span:first-child { color: #292b2c } .funds__rebate-detail .rebate-item__detail-box .box-content ul li span:last-child { color: #1da0cb } .funds__rebate-detail .rebate-item__detail-box .box-content ul li span.min { background-color: #e3a43b; padding: 3px 8px; font-size: 12px; color: #fff; border-radius: 50rem } .funds__rebate-detail .rebate-item__detail-box .box-content__cta { padding: 5px; text-align: center; color: #111111 } .funds__rebate-detail .rebate-item__detail-box .box-content__cta a { padding: 8px; font-size: 12px; color: #fff; display: block } .funds__rebate-footer { padding: 12px 0 6px } .hamburger { padding: 8px 8px !important; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: .15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible } .hamburger:hover { opacity: .7 } .hamburger-box { width: 25px; height: 16px; display: inline-block; position: relative } .hamburger-inner { display: block; top: 50%; margin-top: -1px } .hamburger-inner, .hamburger-inner::after, .hamburger-inner::before { width: 25px; height: 2px; background-color: #fff; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: .15s; transition-timing-function: ease } .hamburger-inner::after, .hamburger-inner::before { content: ""; display: block } .hamburger-inner::before { top: -7px } .hamburger-inner::after { bottom: -7px } .hamburger--squeeze .hamburger-inner { transition-duration: .1s; transition-timing-function: cubic-bezier(.55, .055, .675, .19) } .hamburger--squeeze .hamburger-inner::before { transition: top .1s .14s ease, opacity .1s ease } .hamburger--squeeze .hamburger-inner::after { transition: bottom .1s .14s ease, transform .1s cubic-bezier(.55, .055, .675, .19) } .swmenu .hamburger:hover { opacity: 1 !important } .swmenu .hamburger--squeeze .hamburger-inner { transform: rotate(45deg); transition-delay: .14s; transition-timing-function: cubic-bezier(.215, .61, .355, 1) } .swmenu .hamburger--squeeze .hamburger-inner::before { top: 0; opacity: 0; transition: top .1s ease, opacity .1s .14s ease } .swmenu .hamburger--squeeze .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom .1s ease, transform .1s .14s cubic-bezier(.215, .61, .355, 1) } .modal-signup { background-color: rgba(255, 255, 255, .9); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999999; display: none; overflow: auto } .modal-signup__dialog { max-width: 650px; background-color: #e9e9ed; color: #464a4c; box-shadow: 0 0 50px 10px rgba(10, 10, 10, .25); margin: auto; position: relative; top: 50%; transform: translateY(-50%); top: unset; transform: unset } .modal-signup__dialog-header { padding: 15px; border-bottom: 1px solid rgba(128, 128, 128, .2); position: relative } .modal-signup__dialog-header .header-title { text-align: center } .modal-signup__dialog-header .header-close { position: absolute; right: 15px; top: 15px; cursor: pointer } .modal-signup__dialog-header .header-close:active { opacity: .2 } .modal-signup__dialog-header .header-close i { font-size: 18px } .modal-signup__dialog-body .img-container { width: 100%; display: flex; justify-content: center; margin-top: 24px } .modal-signup__dialog-body .img-container img { max-width: 200px; margin: 0 auto; height: auto } .modal-signup__dialog-body form { padding: 24px 24px 48px } .modal-signup__dialog-body form .form-container { display: flex; flex-direction: column } .modal-signup__dialog-body form .form-container .form-input { flex: 1 } .modal-signup__dialog-body form .form-container .form-input .form-group { display: flex; flex-direction: column; padding: 12px; position: relative; margin-bottom: 0 } .modal-signup__dialog-body form .form-container .form-input .form-group label { margin-bottom: 8px } .modal-signup__dialog-body form .form-container .form-input .form-group label span { color: #d42848 } .modal-signup__dialog-body form .form-container .form-input .form-group .form-control { padding: 11px 8px; font-size: 14px; height: 40px; box-sizing: border-box; border: none; background-color: #fff } .modal-signup__dialog-body form .form-container .form-input .form-group .form-control:focus { outline: 0 } .modal-signup__dialog-body form .form-container .form-input .form-group .select-date { margin-right: 8px } .modal-signup__dialog-body form .form-container .form-input .form-group .select-date:nth-child(1) { flex: 1 } .modal-signup__dialog-body form .form-container .form-input .form-group .select-date:nth-child(2) { flex: 3 } .modal-signup__dialog-body form .form-container .form-input .form-group .select-date:nth-child(3) { flex: 2; margin-right: 0 } .modal-signup__dialog-body form .form-container .form-input .form-group .m-code { margin-right: 8px; width: 60px } .modal-signup__dialog-body form .form-container .form-input .form-group .phone { flex: 1 } .modal-signup__dialog-body form .form-container .form-input .form-group select { -webkit-appearance: none; border-radius: 0; background-position: right center; background-repeat: no-repeat; background-size: 38px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABMCAYAAADHl1ErAAAAi0lEQVR4Ae3QMQ0CQRRF0XWADdz9n0wxHWYwQIkGWhocYIIE1sKj2AT2nOQauAsJAAAAAAAAAAAAuvtSVe8Neq2d/mHY4+sJeeefHzbGOFbVc4NZtznnYVmZls8yLZ9lWj7LtHSWacEs04JZppkVTjMrmGZWMM2sYJpZwbR7d193MQsAAAAAAAAAAD6rXkPcI0ThZQAAAABJRU5ErkJggg==) !important } .modal-signup__dialog-body form .form-container .form-input .form-group input::-webkit-inner-spin-button, .modal-signup__dialog-body form .form-container .form-input .form-group input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 } .modal-signup__dialog-body form .form-container .form-input .form-group input[type=number] { -moz-appearance: textfield } .modal-signup__dialog-body form .form-container .form-input .form-group label.error { margin: 4px 0 0; color: #d42848; font-size: 12px } .modal-signup__dialog-body form .terms-condition { display: flex; padding: 12px 12px 24px; position: relative } .modal-signup__dialog-body form .terms-condition input[type=checkbox] { position: relative; width: 18px; height: 18px; background-color: #fff; border: 1px solid rgba(113, 123, 143, .2); border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; cursor: pointer } .modal-signup__dialog-body form .terms-condition input[type=checkbox]:checked { color: #fff; border-color: #171342; background: #171342 } .modal-signup__dialog-body form .terms-condition input[type=checkbox]:checked::before { opacity: 1 } .modal-signup__dialog-body form .terms-condition input[type=checkbox]::before { position: absolute; content: ""; display: block; top: 0; left: 5px; width: 5px; height: 11px; border-style: solid; border-color: #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } .modal-signup__dialog-body form .terms-condition__text { margin-left: 8px; font-size: 12px; color: #525165; max-width: 530px } .modal-signup__dialog-body form .terms-condition__text a { color: #1da0d9 } .modal-signup__dialog-body form .terms-condition__text span { color: #d42848 } .modal-signup__dialog-body form .terms-condition .error { position: absolute; position: absolute; top: 8px; right: 8px } .modal-signup__dialog-body form .terms-condition .error .caption { position: absolute; bottom: 37px; right: 0; padding: 10px; border-radius: 4px; background-color: #d42848; border-color: #bf245a; color: #fff; text-align: center; width: 150px; box-sizing: border-box; display: none } .modal-signup__dialog-body form .terms-condition .error i { font-size: 25px; color: #d42848 } .modal-signup__dialog-body form .terms-condition .error:hover .caption { display: block } .modal-signup__dialog-body form .button { margin: 0 auto; width: 180px; display: block; padding: 12px 16px; font-size: 16px; line-height: 1.33333; border-radius: 0; cursor: pointer; box-sizing: border-box; text-align: center } .modal-signup__dialog-body form .button:focus { outline: 0 } .modal-signup__dialog-body form .button:active { opacity: .2 } .modal-signup__dialog-body form .button--register { color: #212121; background-color: #e3a43b; border-color: #e3a43b } .modal-forgot { background-color: rgba(255, 255, 255, .9); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999999; display: none } .modal-forgot__dialog { max-width: 650px; background-color: #e9e9ed; color: #464a4c; box-shadow: 0 0 50px 10px rgba(10, 10, 10, .25); margin: auto; position: relative; flex: 1 } .modal-forgot__dialog::after, .modal-forgot__dialog::before { content: ""; position: absolute; width: 352px; height: 379px; transform: translate(-60%, -50%); top: 30%; z-index: -1; background-position: center center; background-repeat: no-repeat; background-image: url("../img/forgot password.png"); background-color: transparent; background-size: 70% } .modal-forgot__dialog::after { transform: translate(80%, -50%); top: 70%; right: 80px } .modal-forgot__dialog-header { padding: 15px; border-bottom: 1px solid rgba(128, 128, 128, .2); position: relative } .modal-forgot__dialog-header .forgot-title { text-align: center } .modal-forgot__dialog-header .forgot-close { position: absolute; right: 15px; top: 15px; cursor: pointer } .modal-forgot__dialog-header .forgot-close:active { opacity: .2 } .modal-forgot__dialog-header .forgot-close i { font-size: 18px } .modal-forgot__dialog-body .img-container { width: 100%; display: flex; justify-content: center; margin-top: 24px } .modal-forgot__dialog-body .img-container img { max-width: 200px; margin: 0 auto; height: auto } .modal-forgot__dialog-body form { padding: 24px 12px 48px } .modal-forgot__dialog-body form .form-container .form-group { display: flex; flex-direction: column; padding: 12px 0; position: relative; margin-bottom: 0 } .modal-forgot__dialog-body form .form-container .form-group .form-control { padding: 11px 8px; font-size: 14px; height: 40px; box-sizing: border-box; border: none; background-color: #fff; margin-top: 0 } .modal-forgot__dialog-body form .form-container .form-group .form-control:focus { outline: 0 } .modal-forgot__dialog-body form .form-container .form-group .icon { position: absolute; top: 22px; right: 12px } .modal-forgot__dialog-body form .form-container .form-group .icon i { font-size: 16px } .modal-forgot__dialog-body form .form-container .form-group .icon .caption { position: absolute; bottom: 37px; right: 0; padding: 10px; border-radius: 4px; background-color: #d42848; border-color: #bf245a; color: #fff; text-align: center; width: 150px; box-sizing: border-box } .modal-forgot__dialog-body form .form-container .form-group label.error { margin: 4px 0 0; color: #d42848; font-size: 12px } .modal-forgot__dialog-body form .button { margin: 0 auto; width: 180px; display: block; padding: 12px 16px; font-size: 16px; line-height: 1.33333; border-radius: 0; cursor: pointer; box-sizing: border-box; text-align: center } .modal-forgot__dialog-body form .button:focus { outline: 0 } .modal-forgot__dialog-body form .button:active { opacity: .2 } .modal-forgot__dialog-body form .button--submit { color: #212121; background-color: #e3a43b; border-color: #e3a43b; margin-top: 16px } .modal-login { background-color: rgba(255, 255, 255, .9); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999999; display: none; overflow: auto } .modal-login__dialog { max-width: 650px; background-color: #e9e9ed; color: #464a4c; box-shadow: 0 0 50px 10px rgba(10, 10, 10, .25); margin: auto; position: relative; top: 50%; transform: translateY(-50%); top: unset; transform: unset } .modal-login__dialog-header { padding: 15px; border-bottom: 1px solid rgba(128, 128, 128, .2); position: relative } .modal-login__dialog-header .header-title { text-align: center } .modal-login__dialog-header .header-close { position: absolute; right: 15px; top: 15px; cursor: pointer } .modal-login__dialog-header .header-close:active { opacity: .2 } .modal-login__dialog-header .header-close i { font-size: 18px } .modal-login__dialog-body .img-container { width: 100%; display: flex; justify-content: center; margin-top: 24px } .modal-login__dialog-body .img-container img { max-width: 200px; margin: 0 auto; height: auto } .modal-login__dialog-body form { padding: 24px 24px 48px } .modal-login__dialog-body form .form-container { display: flex; flex-direction: column } .modal-login__dialog-body form .form-container .form-input { flex: 1 } .modal-login__dialog-body form .form-container .form-input .form-group { display: flex; flex-direction: column; padding: 12px; position: relative } .modal-login__dialog-body form .form-container .form-input .form-group label { margin-bottom: 8px } .modal-login__dialog-body form .form-container .form-input .form-group label span { color: #d42848 } .modal-login__dialog-body form .form-container .form-input .form-group .form-control { padding: 11px 8px; font-size: 14px; height: 40px; box-sizing: border-box; border: none; background-color: #fff } .modal-login__dialog-body form .form-container .form-input .form-group .form-control:focus { outline: 0 } .modal-login__dialog-body form .form-container .form-input .form-group .select-date { margin-right: 8px } .modal-login__dialog-body form .form-container .form-input .form-group .select-date:nth-child(1) { flex: 1 } .modal-login__dialog-body form .form-container .form-input .form-group .select-date:nth-child(2) { flex: 3 } .modal-login__dialog-body form .form-container .form-input .form-group .select-date:nth-child(3) { flex: 2; margin-right: 0 } .modal-login__dialog-body form .form-container .form-input .form-group .m-code { margin-right: 8px; width: 60px } .modal-login__dialog-body form .form-container .form-input .form-group .phone { flex: 1 } .modal-login__dialog-body form .form-container .form-input .form-group select { -webkit-appearance: none; border-radius: 0; background-position: right center; background-repeat: no-repeat; background-size: 38px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABMCAYAAADHl1ErAAAAi0lEQVR4Ae3QMQ0CQRRF0XWADdz9n0wxHWYwQIkGWhocYIIE1sKj2AT2nOQauAsJAAAAAAAAAAAAuvtSVe8Neq2d/mHY4+sJeeefHzbGOFbVc4NZtznnYVmZls8yLZ9lWj7LtHSWacEs04JZppkVTjMrmGZWMM2sYJpZwbR7d193MQsAAAAAAAAAAD6rXkPcI0ThZQAAAABJRU5ErkJggg==) !important } .modal-login__dialog-body form .form-container .form-input .form-group input::-webkit-inner-spin-button, .modal-login__dialog-body form .form-container .form-input .form-group input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 } .modal-login__dialog-body form .form-container .form-input .form-group input[type=number] { -moz-appearance: textfield } .modal-login__dialog-body form .form-container .form-input .form-group label.error { margin: 4px 0 0; color: #d42848; font-size: 12px } .modal-login__dialog-body form .terms-condition { display: flex; padding: 12px 12px 24px; position: relative } .modal-login__dialog-body form .terms-condition input[type=checkbox] { position: relative; width: 18px; height: 18px; background-color: #fff; border: 1px solid rgba(113, 123, 143, .2); border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; cursor: pointer } .modal-login__dialog-body form .terms-condition input[type=checkbox]:checked { color: #fff; border-color: #171342; background: #171342 } .modal-login__dialog-body form .terms-condition input[type=checkbox]:checked::before { opacity: 1 } .modal-login__dialog-body form .terms-condition input[type=checkbox]::before { position: absolute; content: ""; display: block; top: 0; left: 5px; width: 5px; height: 11px; border-style: solid; border-color: #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } .modal-login__dialog-body form .terms-condition__text { margin-left: 8px; font-size: 12px; color: #525165; max-width: 530px } .modal-login__dialog-body form .terms-condition__text a { color: #1da0d9 } .modal-login__dialog-body form .terms-condition__text span { color: #d42848 } .modal-login__dialog-body form .terms-condition .error { position: absolute; position: absolute; top: 8px; right: 8px } .modal-login__dialog-body form .terms-condition .error .caption { position: absolute; bottom: 37px; right: 0; padding: 10px; border-radius: 4px; background-color: #d42848; border-color: #bf245a; color: #fff; text-align: center; width: 150px; box-sizing: border-box; display: none } .modal-login__dialog-body form .terms-condition .error i { font-size: 25px; color: #d42848 } .modal-login__dialog-body form .terms-condition .error:hover .caption { display: block } .modal-login__dialog-body form .button { margin: 0 auto; width: 180px; display: block; padding: 12px 16px; font-size: 16px; line-height: 1.33333; border-radius: 0; cursor: pointer; box-sizing: border-box; text-align: center } .modal-login__dialog-body form .button:focus { outline: 0 } .modal-login__dialog-body form .button:active { opacity: .2 } .modal-login__dialog-body form .button--register { color: #212121; background-color: #e3a43b; border-color: #e3a43b } .modal, .modal-apps { z-index: 9999 !important } .modal-apps { background-color: rgba(255, 255, 255, .9); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999999; display: none; overflow: auto } .modal-apps__dialog { max-width: 650px; background-color: #e9e9ed; color: #464a4c; box-shadow: 0 0 50px 10px rgba(10, 10, 10, .25); margin: auto; position: relative; top: 50%; transform: translateY(-50%); top: unset; transform: unset } .modal-apps__dialog-header { padding: 15px; border-bottom: 1px solid rgba(128, 128, 128, .2); position: relative } .modal-apps__dialog-header .header-title { text-align: center } .modal-apps__dialog-header .header-close { position: absolute; right: 15px; top: 15px; cursor: pointer } .modal-apps__dialog-header .header-close:active { opacity: .2 } .modal-apps__dialog-header .header-close i { font-size: 18px } .modal-apps__dialog-body .img-container { width: 100%; display: flex; justify-content: center; margin-top: 24px } .modal-apps__dialog-body .img-container img { max-width: 200px; margin: 0 auto; height: auto } .modal-apps__dialog-body form {} .modal-apps__dialog-body form .form-container { display: flex; flex-direction: column } .modal-apps__dialog-body form .form-container .form-input { flex: 1 } .modal-apps__dialog-body form .form-container .form-input .form-group { display: flex; flex-direction: column; padding: 12px; position: relative } .modal-apps__dialog-body form .form-container .form-input .form-group label { margin-bottom: 8px } .modal-apps__dialog-body form .form-container .form-input .form-group label span { color: #d42848 } .modal-apps__dialog-body form .form-container .form-input .form-group .form-control { padding: 11px 8px; font-size: 14px; height: 40px; box-sizing: border-box; border: none; background-color: #fff } .modal-apps__dialog-body form .form-container .form-input .form-group .form-control:focus { outline: 0 } .modal-apps__dialog-body form .form-container .form-input .form-group .select-date { margin-right: 8px } .modal-apps__dialog-body form .form-container .form-input .form-group .select-date:nth-child(1) { flex: 1 } .modal-apps__dialog-body form .form-container .form-input .form-group .select-date:nth-child(2) { flex: 3 } .modal-apps__dialog-body form .form-container .form-input .form-group .select-date:nth-child(3) { flex: 2; margin-right: 0 } .modal-apps__dialog-body form .form-container .form-input .form-group .m-code { margin-right: 8px; width: 60px } .modal-apps__dialog-body form .form-container .form-input .form-group .phone { flex: 1 } .modal-apps__dialog-body form .form-container .form-input .form-group select { -webkit-appearance: none; border-radius: 0; background-position: right center; background-repeat: no-repeat; background-size: 38px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABMCAYAAADHl1ErAAAAi0lEQVR4Ae3QMQ0CQRRF0XWADdz9n0wxHWYwQIkGWhocYIIE1sKj2AT2nOQauAsJAAAAAAAAAAAAuvtSVe8Neq2d/mHY4+sJeeefHzbGOFbVc4NZtznnYVmZls8yLZ9lWj7LtHSWacEs04JZppkVTjMrmGZWMM2sYJpZwbR7d193MQsAAAAAAAAAAD6rXkPcI0ThZQAAAABJRU5ErkJggg==) !important } .modal-apps__dialog-body form .form-container .form-input .form-group input::-webkit-inner-spin-button, .modal-apps__dialog-body form .form-container .form-input .form-group input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 } .modal-apps__dialog-body form .form-container .form-input .form-group input[type=number] { -moz-appearance: textfield } .modal-apps__dialog-body form .form-container .form-input .form-group label.error { margin: 4px 0 0; color: #d42848; font-size: 12px } .modal-apps__dialog-body form .terms-condition { display: flex; padding: 12px 12px 24px; position: relative } .modal-apps__dialog-body form .terms-condition input[type=checkbox] { position: relative; width: 18px; height: 18px; background-color: #fff; border: 1px solid rgba(113, 123, 143, .2); border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; cursor: pointer } .modal-apps__dialog-body form .terms-condition input[type=checkbox]:checked { color: #fff; border-color: #171342; background: #171342 } .modal-apps__dialog-body form .terms-condition input[type=checkbox]:checked::before { opacity: 1 } .modal-apps__dialog-body form .terms-condition input[type=checkbox]::before { position: absolute; content: ""; display: block; top: 0; left: 5px; width: 5px; height: 11px; border-style: solid; border-color: #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } .modal-apps__dialog-body form .terms-condition__text { margin-left: 8px; font-size: 12px; color: #525165; max-width: 530px } .modal-apps__dialog-body form .terms-condition__text a { color: #1da0d9 } .modal-apps__dialog-body form .terms-condition__text span { color: #d42848 } .modal-apps__dialog-body form .terms-condition .error { position: absolute; position: absolute; top: 8px; right: 8px } .modal-apps__dialog-body form .terms-condition .error .caption { position: absolute; bottom: 37px; right: 0; padding: 10px; border-radius: 4px; background-color: #d42848; border-color: #bf245a; color: #fff; text-align: center; width: 150px; box-sizing: border-box; display: none } .modal-apps__dialog-body form .terms-condition .error i { font-size: 25px; color: #d42848 } .modal-apps__dialog-body form .terms-condition .error:hover .caption { display: block } .modal-apps__dialog-body form .button { margin: 0 auto; width: 180px; display: block; padding: 12px 16px; font-size: 16px; line-height: 1.33333; border-radius: 0; cursor: pointer; box-sizing: border-box; text-align: center } .modal-apps__dialog-body form .button:focus { outline: 0 } .modal-apps__dialog-body form .button:active { opacity: .2 } .modal-apps__dialog-body form .button--register { color: #212121; background-color: #e3a43b; border-color: #e3a43b } .mobLine { padding: 20px; } .mobLine input { padding: 6px 8px; background-color: #ffffff; border: 0px; font-size: 12px; width: calc(100% - 16px) } .mobLine .btn { background-color: #e3a43b; color: #212121; cursor: pointer; border: 0px; padding: 6px 20px; font-weight: bold; } .mobLine .btn:hover { background-color: #d0942f } .text-center { text-align: center; } .modal-login__dialog-body .button2 { color: #212121; background-color: #1da0cb; border-color: #1da0cb; } .modal-login__dialog-body .button-forget { color: #1da0cb; display: block; margin: 20px 0px } .form-control.error { border: 2px solid #ff0000 !important } label.error { font-size: 12px; font-weight: bold; color: #ff0000; padding-top: 3px; display: block; text-transform: none; } #showD { display: none; } body.swmenu { overflow-x: hidden; } body.swmenu .menu { left: 0px; } body.swmenu .content, body.swmenu .nav, body.swmenu .content, body.swmenu .bottom-nav { transform: translate(280px); } .content, .nav, .bottom-nav { transition-duration: 300ms; } .overlap { position: fixed; width: 100%; height: 100%; background: rgb(0, 0, 0, 0.2); z-index: 9999; display: none; } body.swmenu .overlap { display: block; } .pbox { color: #212121 } .pbox img { max-width: 100%; height: auto !important } .err404 { color: #636C72; text-align: center; padding: 20px 0px } .err404 h1 { color: #212121; font-size: 76px; padding: 0px; margin: 0px; line-height: 80px; } .dl-box { padding: 20px 0px } .dl-listing { padding-bottom: 20px; border-bottom: 1px solid rgba(113, 123, 143, 0.2); } .dl-listing ul { text-align: center; display: block; } .dl-listing ul li { display: inline-block; } .dl-listing img { filter: grayscale(100%); max-width: 44px; } .dl-listing a.active img { filter: grayscale(0%); } .dl-body { font-size: 0px; } .dl-bb { display: inline-block; width: 46%; text-align: center; padding: 20px 2% } .dl-bbt { background-color: rgba(113, 123, 143, 0.25); font-size: 0px; display: block } .dl-bbt .l { display: inline-block; width: 50% } .dl-bbt .r { display: inline-block; width: 50% } .dl-bbt img { max-width: 100% } .dl-bb h4 { color: #212121; font-size: 16px; padding: 0px; margin: 15px 0px 10px; } .dl-bb a { color: #212121; background-color: #e3a43b; padding: 6px 0px; display: inline-block; font-size: 12px; width: 50% } .dl-bb a:hover { background-color: #ce8c1d } .dl-bb a.b2 { background-color: #1da0cb } .dl-bb a.b2:hover { background-color: #0f92bd } .funds__header-right .header-more { cursor: pointer; } .funds__header-right .header-more .caret { display: block; width: 0; height: 0; margin: 6px auto -2px; border: 8px solid transparent; border-top-color: #171342; transition: 0.3s } .funds__header-right .header-more.aa { background-color: #171342 } .funds__header-right .header-more.aa .caret { border-bottom-color: #ffffff; margin: -2px auto 6px } /*** WALLET ***/ .g8-bal { text-align: center; color: #301d6e; font-size: 0px; } .g8-bal .bbl { padding: 6px 5px; position: relative; background-color: #171342; border: 1px solid #ffffff; border-bottom: 0px; width: calc(33.33% - 12px); display: inline-block; } .g8-bal .bbl p { margin: 0px; font-size: 10px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffffff } .g8-bal .bbl span { padding: 0px 5px; font-size: 18px; margin: 0px; color: #1da0cb } .g8-bal .bbl a { color: #ffffff; font-size: 14px; } .g8-bal .bbl a:hover { color: #1da0cb } .g8-bal .bbl-0 { width: calc(100% - 12px) } /*.g8-bal .bbl-0 .b1, .g8-bal .bbl-0 .b2 {position: absolute; top: 10px; right: 0px;}*/ .g8-bal .bbl-0 .b1 { display: block; font-size: 10px; font-weight: bold; text-transform: uppercase; } /*.g8-bal .bbl-0 .b2 {right: 30px;}*/ .bbloverlap { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); background-image: url(/assets/img/preloader.svg); background-repeat: no-repeat; background-position: center; background-size: auto 40px } /*** END WALLET ***/ .nav { height: 50px; } .nav__logo { max-width: none; } .nav__logo img { max-width: none; height: 46px; } .nav__notification { padding-left: 7px; } .content { margin: 50px 0px 70px; min-height: 80vh; } .funds__rebate-detail .rebate-item { margin: 0px 25px; } .arrow { transition: 0.3s; transform: rotate(0deg) } .arrow.aa { transform: rotate(180deg) } .funds__rebate-detail .rebate-item__detail p { display: block; color: #212121; width: 100%; margin: 0px; text-align: center; } .button-sm { margin-top: 3px; font-size: 12px; font-weight: bold; padding: 5px; display: inline-block; width: 100% } .funds__container-section h3 { color: #292b2c; font-size: 16px; } .msglist-box { background-color: #171342; color: #ffffff; margin-bottom: 10px !important; font-size: 12px; padding: 10px !important; } .msglist-box-left { display: inline-block; vertical-align: top; padding-right: 5px; min-width: 150px } .msglist-box-right { display: inline-block; vertical-align: top; padding-left: 5px; } .msglist-box a { color: #ce8c1d } .seo { padding: 15px; border-top: 1px solid rgba(113, 123, 143, 0.2); color: #262626 } .seo h1, .seo h2, .seo h3, .seo h4, .seo h5 { margin: 0px 0px 10px; line-height: normal } .seo-top { position: relative; padding-right: 40px; cursor: pointer; } .seo-top .arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; transform: rotate(45deg); -webkit-transform: rotate(45deg); position: absolute; right: 10px; top: 6px; } .seo-top .arrow.aa { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } .seo-top h1 { margin-bottom: 0px } .seo-body { display: none; } .regbank-tickbox { padding-top: 3px; font-size: 11px; display: none; } /* .modal-signup__dialog-body .img-container img, .modal-forgot__dialog-body .img-container img, .modal-login__dialog-body .img-container img {-webkit-filter: brightness(0%); filter: brightness(0%);} */ .matches__detail-versus .club-detail__score.center { display: inline-block; text-align: center; } .contact { color: #262626 } .contact .d { text-align: center; } .contact .d ul { font-size: 0px; display: block; } .contact .d ul li { display: inline-block; width: calc(50% - 10px); font-size: 14px; background-color: #eeeeee; vertical-align: top; padding: 10px 0px; margin: 5px } .contact .d ul li span { font-size: 16px; display: block; } .contact .d ul li i { font-size: 26px; display: block; padding: 10px 0px } .box__detail { font-size: 0px; } .box__detail .box__detail-img { margin-bottom: 8px; width: calc(33.33% - 10px); display: inline-block; padding: 0px 3px; } .box__detail .box__detail-img img { /* border-radius: .5rem; */ background-color: #d4284869; min-width: 122px; min-height: 160px; } .box__detail-img img { border: 0px; border-radius: .5rem .5rem 0 0 } .box__detail-img .cta { background-color: #e9283a; color: #ffffff; text-transform: uppercase; padding: 4px 0px; font-size: 12px; text-align: center; border-radius: 0 0 .5rem .5rem } @media only screen and (max-width: 479px) { .box__detail .box__detail-img { width: calc(33.33% - 10px); } } /*** custom ***/ body { /* background: linear-gradient(to bottom, #5f0010 0%,#b0001e 100%); */ overflow-x: hidden; } .nav { background: #5f0010; background: -moz-linear-gradient(top, #5f0010 0%, #b0001e 100%); background: -webkit-linear-gradient(top, #5f0010 0%, #b0001e 100%); background: linear-gradient(to bottom, #5f0010 0%, #b0001e 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5f0010', endColorstr='#b0001e', GradientType=0); } .bottom-nav { background-color: #b0001e } .bottom-nav a { color: #ffffff } .menu { background-color: #620c10 } .menu ul li, .menu--login ul li:first-child, .menu--login ul li:nth-child(2) { border-color: #390003 } .menu ul li:first-child { background-color: #6a6a6a; } .menu ul li a span { color: #ffffff } .menu ul li a img { -webkit-filter: invert(100%); filter: invert(100%); } .footer .social-logo ul li a { color: #111111 } /*.footer .copyright {color: #ffffff}*/ /*.seo {color: #ffffff} .seo-top .arrow {border-color: #ffffff}*/ .modal-login__dialog-body .button-forget { color: #111111 } .modal-login__dialog-body .button2 { background-color: #6a6a6a; color: #ffffff } /*.dl-bb h4, .pbox {color: #ffffff}*/ /*.funds__header-left span, .form-group label, .funds__container-section table {color: #ffffff}*/ .funds__header-left .header-balance, .funds__container-section table tr th { color: #b0001e } .funds__header-right .header-more.aa { background-color: #b0001e; } .funds__header-right .header-more.aa .caret { border-top-color: #b0001e } .g8-bal { border-bottom: 1px solid #333333 } .g8-bal .bbl { background-color: #222222; border-color: #333333 } .g8-bal .bbl span { color: #e2c360 } /*.funds__rebate-detail .rebate-item__detail-box .box-header span, */ .funds__rebate-detail .rebate-item__detail-box .box-content ul li span:first-child { color: #fff } .funds__rebate-detail .rebate-item__detail-box .box-header .chevron i, .funds__rebate-detail .rebate-item__detail-box .box-content ul li span:last-child, .funds__rebate-detail .rebate-item__detail-box .box-content__cta { color: #b0001e } .funds__rebate-detail .rebate-item__detail-box .box-content { background-color: #333333 } .funds__rebate-detail .rebate-item__detail-box .box-content ul li { background-color: #555555; border-color: #333333 } .funds__container ul { background-color: #333333 } .funds__container ul li a { color: #999999 } .funds__container ul li.active { border-color: #b0001e } .funds__container ul li.active a { color: #b0001e } .form-group .custom-select { margin-top: .6rem } .form-group .custom-select.error { border: 2px solid #ff0000 !important } label.error { color: #ff0000 !important } .matches__top { background: #000000 } .matches__top-title strong { color: #ff0000 } /*.matches__top-close {background-color: #ffffff; border-radius: 50%}*/ .matches__top-close i, .matches__detail-versus .club-detail__score-point { color: #b0001e } .matches__pagination { background-color: #b0001e; color: #ffffff } .matches__detail-footer .button-cta { background-color: #b0001e; color: #ffffff } .ref-dbox .ref-dbox-data .dd { background-color: #e6e5e5; color: #262626; } .ref-dbox .ref-dbox-input .ref-dbox-input-l .ii input { color: #000000; background-color: #ffffff; } .ref-dbox .ref-dbox-data table { color: #000000; background-color: #ffffff; } .ref-dbox .ref-dbox-data table thead { color: #000000; background-color: #ffffff; } .ref-dbox .ref-dbox-data .dd.aaa { color: #000000; background-color: #ffffff; } .contact .d ul li a { color: #262626; } /* new design home page */ .marquee { display: flex; background-color: #10131a; padding: 10px 5px; color: #c37e45; font-weight: bold; font-style: italic; } .marquee .marquee__bullhorn { padding: 4px; background-color: #de8c0c; border-radius: 5px; color: #fff; } .quick-btn { display: flex; text-transform: uppercase; } .quick-btn a { flex: 1; text-align: center; padding: 10px 0; font-weight: bold; letter-spacing: 1px; background-color: #e9283a; } .quick-btn a:last-child { background-color: #e3a43b; } /* Menu-2 */ .menu-2 { display: flex; overflow: auto; margin-bottom: 10px; background: #62050a; background: -moz-linear-gradient(top, #62050a 0%, #e9283a 100%); background: -webkit-linear-gradient(top, #62050a 0%, #e9283a 100%); background: linear-gradient(to bottom, #62050a 0%, #e9283a 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62050a', endColorstr='#e9283a', GradientType=0); } .menu-2 li { font-size: 13px; text-transform: uppercase; padding: 10px 12px 3px 12px; border-bottom: 3px solid transparent; } .menu-2 li.active { background-color: #00000085; border-bottom: 3px solid #c7a46f; } .menu-2 li.active a { color: #ffd89c; } .menu-2 a { align-items: center; display: flex; flex-direction: column; } .menu-2 svg { border-radius: 6px !important; background: #fff !important; padding: 5px; } .menu-2 span { white-space: nowrap; margin-top: 5px; } .menu-2+.nav__title { color: #333; } /* jackpot */ @font-face { font-family: 'Open24DisplaySt'; src: url('fonts/Open24DisplaySt.woff2') format('woff2'), url('fonts/Open24DisplaySt.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } .progressive-jackpot { background: center no-repeat; background-size: 100% 100%; background-image: url('../img/jackpot-bg.png'); font-family: 'Open24DisplaySt'; color: #fff; height: 86px; position: relative; } .progressive-jackpot .jackpot-container { font-size: 23px; position: absolute; top: 50%; transform: translateY(-50%); right: 20%; } .progressive-jackpot .jackpot-currency { color: #fdfe48; margin-right: 10px; display: inline-block; text-align: right } .progressive-jackpot .jackpotNumber { display: inline-block; text-align: left; } /* home game */ .games { padding: 0 10px; } .home-games { margin-top: 20px; } .home-games:last-child { margin-bottom: 20px; } .home-games>.title { display: flex; justify-content: space-between; margin-bottom: 8px; } .home-games>.title span { color: #333; font-weight: 700; font-size: 18px; } .home-games>.title a { background-color: #e9283a; color: #fff; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 20px; } .home-games .game-wrapper { overflow-x: auto; } .home-games .game-items { display: flex; width: 625px; gap: 3px; } .home-games .game-items>.box { cursor: pointer; text-align: center; color: #fff; width: calc(100%/6); border-radius: 5px; padding: 3px; background-color: #e9283a; } .home-games .game-items>.box>span { padding-top: 5px; display: block; color: #fff; text-transform: uppercase; font-size: 10px; } .home-games .game-items>.box>.box-item { overflow: hidden; border-radius: 5px; } .home-games .game-items>.box>.box-item>img { width: 100%; max-width: 100%; -webkit-transition: -webkit-transform .2s ease-in-out; transition: -webkit-transform .2s ease-in-out; transition: transform .2s ease-in-out; transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out; } .home-games .game-items>.box:hover>.box-item>img { transform: scale(1.25); } .home-games.popular>.title { background-color: #9d001a; padding: 12px; } .home-games.popular>.title span { color: #fff; } .home-games.popular .game-wrapper { margin-top: 20px; } .home-games.popular .game-items { width: 1100px; gap: 5px; } .home-games.popular .game-items:after { content: ''; flex: auto; } .home-games.popular .game-items>.box { width: calc(100%/3 - 11px); padding: 8px; border-radius: 25px; } .depo-withdraw { display: flex; gap: 10px; flex-wrap: wrap; padding: 15px 10px; } .depo-withdraw>div { display: flex; align-items: center; flex: 1; padding: 10px; border-radius: 10px; background: #6c0012; background: -moz-linear-gradient(top, #6c0012 0%, #a8001c 100%); background: -webkit-linear-gradient(top, #6c0012 0%, #a8001c 100%); background: linear-gradient(to bottom, #6c0012 0%, #a8001c 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c0012', endColorstr='#a8001c', GradientType=0); } .depo-withdraw>div i { font-size: 32px; color: #ffffff9c; } .depo-withdraw>div div { margin-left: 10px; } .depo-withdraw>div div h4 { margin: 0 0 10px; } .supported-banks { padding: 15px; } .supported-banks .hr-text { line-height: 1em; position: relative; outline: 0; border: 0; color: black; text-align: center; opacity: 0.5; margin: 0 0 17px; } .supported-banks .hr-text:before { content: ''; background: linear-gradient(to right, transparent, #818078, transparent); position: absolute; left: 0; top: 50%; width: 100%; height: 1px; } .supported-banks .hr-text:after { content: attr(data-content); position: relative; display: inline-block; padding: 0 1em; line-height: 1.5em; font-size: 15px; font-weight: bold; color: #000; background-color: #fff; } .supported-banks .swiper-wrapper { height: 65px; } .supported-banks .swiper-slide div { padding: 10px 15px; background-color: #6c0012; color: #fff; position: relative; white-space: nowrap; border-radius: 5px; text-align: center; font-weight: bold; letter-spacing: 1px; font-size: 14px; } .supported-banks .swiper-slide div:before { content: "\2022"; color: #3cff2f; font-size: 1.5em; position: absolute; top: -5px; left: 5px; } .supported-banks .swiper-slide.offline div { background-color: #181a1f; color: #97989a; } .supported-banks .swiper-slide.offline div:before { color: #e02b2b; } .supported-banks .swiper .swiper-pagination-bullet { background: #000; width: 13px; height: 2px; } .supported-banks .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #38ac20; width: 20px; } /* custom sportsbook & slots page */ .nav__title { text-align: center; } .slots-page .menu-2 { margin-bottom: 0; } .slots-page .nav__title { padding-top: 10px; } .loading-slots { height: 100vh; background: url(/assets/img/preloader.svg) center no-repeat; } .bottom-nav img { height: 20px; width: 20px; margin: 5px auto; border-radius: 50%; } .bottom-nav .wrap { height: 20px; width: 20px; margin: 5px auto; border-radius: 50%; background-color: #b0001e; transform: scale(2.5) translateY(-5px); } .bottom-nav .wrap img { position: relative; top: -4px; } .bottom-nav .active a { color: #fbe373; font-weight: bold; } .bottom-nav .active img { filter: brightness(0) saturate(100%) invert(69%) sepia(82%) saturate(243%) hue-rotate(9deg) brightness(110%) contrast(97%); transform: scale(1.3); } .bottom-nav .active .wrap img { transform: scale(1); } .bottom-nav .live-chat { background: transparent; animation: pulse 3s infinite; } @keyframes pulse { 0% { filter: initial } 50% { filter: brightness(40.5) drop-shadow(0 0 10px white) } } /* popup download android */ #showM.wt {} #showM.wt .nav { top: 60px; } #showM.wt .content { margin-top: 110px; } body.swmenu .g8app-mob { transform: translate(280px); } .g8app-mob { height: 60px; background-color: #111111; position: fixed; top: 0px; width: 100%; z-index: 9998; transition-duration: 300ms; display: none; } .g8app-mob .l { height: 60px; position: absolute; left: 0px; top: 0px; width: 50px; font-size: 20px; text-align: center; cursor: pointer; } .g8app-mob .l i { line-height: 60px; } .g8app-mob .c { height: 50px; position: absolute; left: 50px; top: 5px; width: calc(100% - 110px) } .g8app-mob .c .cl { float: left; height: 50px; padding-right: 15px; } .g8app-mob .c .cl img { max-height: 100% } .g8app-mob .c .cr { float: left; } .g8app-mob .c .cr h3 { margin: 0px; text-transform: uppercase; font-size: 20px; } .g8app-mob .c .cr p { margin: 0px; font-size: 12px; } .g8app-mob .r { height: 60px; position: absolute; right: 0px; top: 0px; width: 120px; font-size: 26px; display: flex; } .g8app-mob .r a { text-align: center; width: 60px; background-color: #e3a43b; } .g8app-mob .r i { line-height: 60px; } .r img { width: 60px; } .rtp-icon { position: fixed; left: 15px; bottom: 72px; z-index: 99; } .rtp-icon img { max-width: 63px; } .modal-signup__dialog-body form .form-container .form-input .form-group .form-control { background-color: #e6e6e6; } /* Wallet Info */ .nav .nav__logo, .nav .nav__title { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; } .nav-bals { position: absolute; right: 8px; background-color: #c10021; padding: 4px; cursor: pointer; border-radius: 5px; } .nav-bals .nav-bals-details { text-align: right; line-height: 12px; font-size: 11px; padding-right: 10px; } .nav-bals .nav-bals-details span { display: block; } .nav-bals .nav-bals-details strong { font-weight: normal; } .nav-bals .nav-bals-arrow { position: absolute; right: 0px; top: 50%; transform: translateY(-50%); background-color: #ffd200; width: 10px; height: 100%; border-radius: 0 5px 5px 0; } .nav-bals .nav-bals-arrow .caret { display: block; width: 0; height: 0; margin: 4px auto 0px; border: 4px solid transparent; border-top-color: transparent; border-top-color: #444444; transition: 0.3s; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .g8-bals-box { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 9999999999; overflow-y: auto; display: none; background-color: #111111; } .g8-bals-box .g8bb-t { position: relative; height: 40px; line-height: 40px; padding-left: 12px; font-size: 16px; text-transform: uppercase; } .g8-bals-box .g8bb-t strong { color: #ffd200; } .g8-bals-box .g8bb-t .g8-nav-bals-close { position: absolute; width: 40px; height: 40px; top: 0px; right: 0px; z-index: 1; background-color: #ffd200; } .g8-bals-box .g8bb-t .g8-nav-bals-close img { max-width: 24px !important; padding: 8px; } .hide { display: none; } .misbtn, .sw-a { display: none !important; } .misbtn.in-mission, .sw-a.in-mission { display: block !important; } .promotionInfo .aimg { background-color: #021c39; cursor: pointer; } .promotionInfo .acon h3{font-size: 20px;margin: 4px 0;} /* turnover status */ .progress { display: -ms-flexbox; display: flex; height: 1rem; overflow: hidden; font-size: .75rem; background-color: #e9ecef; border-radius: .25rem; } .turnover { display: none; padding: 10px; color: #fff; background-color: #b0001e; } .turnover .ttl { margin-bottom: 4px; } .turnover .progress, .turnover .progress-bar { border-radius: .5rem; } .turnover .progress-bar { background-color: #022346; } /* history list */ .funds__rebate-detail .rebate-item__detail-box .box-header { background-color: #000; border-bottom: none; } .funds__rebate-detail .rebate-item__detail-box .box-content { margin-bottom: 5px; } .funds__rebate-detail .rebate-item__detail { gap: 1px; } .bubon-wrapper { display: none; position: relative; width: calc(100% + 0px); left: 0px; } .bubon-free-spin { padding: 10px; margin-bottom: 15px; background-color: #202020; display: flex; flex-direction: column; gap: 10px } .bubon-free-spin>div { display: flex; gap: 10px; align-items: center; justify-content: space-between } .bubon-free-spin .button { border-radius: 4px; padding: 7px; width: 108px; margin: 0; font-size: 14px } .menu--login h1 { text-align: center; margin: 20px 0px; font-size: 1.7em } .menu--login h1 i { color: #c7a36a } .menu--login h1 .g8-bal-total{ color: #ffd200; } .button.button--yellow { color: #e6e5e5; background-color: #e9283a; border-color: #e9283a; } .menu .games .all-games { margin-top: 7px; } .menu .games .all-games li { background-color: transparent; border-color: transparent; padding: 7px 16px } .menu ul .games>svg.down-drop{ position: absolute; right: 28px; margin-top: 6px; fill: #fff; } .abox { margin: 10px 0; }