/* LAYOUT CSS */
:root {
    --main-bg-color: #000000;
    --main-font-color: #ffffff;
    --main-font-color-2: #F7EBAD;
    --theme-color: #DEC37C;
    --theme-color-2: #CAB479;
    --theme-color-3: #F9D869;
    --theme-color-success: #1ED26A;
}

@font-face {
    font-family: "Adventure";
    src: url(/assets/Content/font/AdventureSubtitles.ttf);
}


html {
    background-color: var(--main-bg-color);
}

body {
    background-image: url(../image/opt4/bg.jpg);
    /*background-repeat: no-repeat;
    background-size: 100% 100%;*/
    color: var(--main-font-color);
    max-width: 740px !important;
    height: 100%;
    min-height: 100vh;
    font-family: 'Roboto';
}

hr {
    border: 0;
    clear: both;
    display: block;
    width: 100%;
    background-color: var(--theme-color);
    height: 1px;
    margin: 0px;
}

a {
    text-decoration: none;
}

header {
    height: 70px;
    max-width: 760px !important;
    text-align: center;
}

header img#logo {
    height: 45px;
    margin: 12.5px 0px;
}

.container {
    max-width: 740px;
}

.navbar {
    flex-direction: row;
}

.navbar>.container {
    max-width: 740px;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
}

.container.top-bar {
    padding: 0;
    height: 100%;
    background-color: black;
}

.navbar .top-logo {
    margin: auto;
    height: 42px;
}

.top-logo img {
    height: 42px;
}

.navbar .left-icon {
    position: absolute;
    left: 10px;
    display: flex;
}

.navbar .left-icon #drawer-button {
    background: none;
    background-color: black;
    outline: none;
    border: none;
    color: white;
}

.navbar .right-icon {
    position: absolute;
    right: 10px;
}

.navbar a.lang-button,
.navbar a.login-button,
.navbar a.profile-button {
    color: var(--theme-color);
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;
    text-decoration: none;
}

.navbar a.login-button {
    justify-content: flex-end;
}

.navbar .login-text {
    width: 100%;
    text-align: center;
}

.navbar a.lang-button img {
    height: 20px;
}

.navbar a.lang-button .lang-text {
    height: 20px;
    margin-left: 2px;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.navbar a.login-button .login-text {
    border: 1px solid var(--theme-color);
    font-size: 12px;
    padding: 1px;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.bottom-nav-button {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
    height: 100%;
}

.bottom-nav-button > img {
    height: 24px;
}

#game-icon.bottom-nav-button > img {
    height: 48px !important;
}

.navbar.fixed-bottom {
    padding-top: 1px;
    background: linear-gradient(to right, #755232, #eee59d, #e6d887, #eee59d, #e6d887, #eee59d, #e6d887, #eee59d, #e6d887 );
    box-shadow: 0 0 2px #e6d887, 0 0 10px #b9954d, 0 0 50px #54391d;
    max-width: 740px; 
    margin: auto; 
    background-color: black;
}

#drawer {
    background-color: black;
    top: 53px;
}

#drawer .drawer-navigation {
    padding: 10px;
}

#drawer .drawer-navigation ul {
    margin-top: 20px;
    width: 100%;
    list-style: none;
    padding: 0;
}

#drawer .drawer-navigation ul li {
    width: 100%;
    height: 50px;
    margin-bottom: 5px;
}

#drawer .drawer-navigation ul li a div {
    width: 100%;
    height: 50px;
    color: gold;
    font-weight: 600;
    display: flex;
    align-items: center;
}

#drawer .drawer-navigation ul li a div i {
    font-size: 20px;
    margin-left: 20px;
    margin-right: 20px;
    width: 30px;
}


#drawer .drawer-navigation .divider {
    border-top: 1px solid gray;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 30px;
}

#drawer .download-app-link {
    color: gold;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#drawer .download-app-link i {
    font-size: 20px;
    margin-left: 20px;
    margin-right: 20px;
    width: 30px;
}

#drawer .lang-button-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 30px;
}

#drawer .lang-button-container button {
    color: gray;
    border: none;
    background-color: transparent;
    height: 30px;
}

#drawer .lang-button-container button.active {
    color: gold;
}

.modal-backdrop {
    top: 53px;
}

#main-content {
    overflow-y: auto;
    max-height: 100vh;
}
/* Modals */
#lang-modal .modal-content,
#announcement-modal .modal-content,
#download-modal .modal-content,
#token-modal .modal-content,
#promotion-modal .modal-content,
#history-modal .modal-content {
    background-color: rgba(0,0,0,0.75);
    border: 0;
    width: 100vw;
    height: 100vh;
}

#lang-modal .modal-body,
#announcement-modal .modal-body,
#download-modal .modal-body,
#token-modal .modal-body,
#promotion-modal .modal-body,
#history-modal .modal-body {
    width: 100%;
    height: 100%;
    display: flex;
}

#lang-modal .modal-dialog,
#announcement-modal .modal-dialog,
#download-modal .modal-dialog,
#token-modal .modal-dialog,
#promotion-modal .modal-dialog,
#history-modal .modal-dialog  {
    max-width: none;
    margin: 0;
}

#lang-modal .close-button,
#announcement-modal .close-button,
#download-modal .close-button,
#token-modal .close-button,
#promotion-modal .close-button,
#history-modal .close-button {
    position: absolute;
    top: 12px;
    right: 18px;
    height: 46px;
    width: 46px;
    border-radius: 50%;
    border: 5px solid white;
    background-color: transparent;
    display: flex;
}

#lang-modal .close-button i,
#announcement-modal .close-button i,
#download-modal .close-button i,
#token-modal .close-button i,
#promotion-modal .close-button i,
#history-modal .close-button i {
    font-size: 1.8em;
    color: white;
    background-color: transparent;
    margin: auto;
}

#product-modal .modal-content {
    border: 2px solid #f8a009;
    background-color: black;
    border-radius: 20px;
    padding: 15px 5px;
    min-height: 50vh;
}

#product-modal .modal-product-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
#product-modal .close-button {
    position: absolute;
    left: calc(50% - 50px);
    bottom: -50px;
    width: 100px;
    text-transform: uppercase;
    border-radius: 25px;
    color: black;
    background-color: gold;
    font-weight: bold;
    font-style: italic;
    font-size: 15px;
}

#product-modal .modal-product {
    height: 80px;
    width: 100%;
    border: 2px solid #f4c017;
    background-color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    color: black;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    align-items: center;
    outline: none;
}

#product-modal .modal-product img {
    height: 55px;
    width: 100%;
    object-fit: contain;
}

#announcement-modal .announcement-container {
    width: 75%;
    border: 2px solid var(--theme-color);
    overflow: auto;
    margin: auto;
    height: 75%;
}

#announcement-modal .announcement-container img {
    width: 100%;
    height: auto;
}

#lang-modal .lang-chooser-container {
    height: 248px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#lang-modal .lang-chooser {
    position:  relative;
    width: 246px;
    height: 56px;
    text-decoration: none;
    background-color: rgba(255,255,255,0.68);
    border-radius: 8px;
    color: black;
    font-size: 24px;
    font-weight: 500;
    display: flex;
}

#lang-modal .lang-chooser div {
    margin: auto;
}

#lang-modal .lang-chooser .lang-img {
    position: absolute;
    height: 56px;
    width: 56px;
    left: -28px;
    top: 0px;
    border: 6px solid black;
    border-radius: 50%;
}

#lang-modal .lang-chooser .lang-img img {
    width: 100%;
    height: 100%;
}

#download-modal .download-button-container {
    margin: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

#download-modal .download-button-container > a {
    margin: auto;
    height: 59px;
    width: 75%;
    border-radius: 29.5px;
    color: white;
    background-color: var(--theme-color);
    margin-bottom: 23px;
    display: flex;
    text-decoration: none;
}

#download-modal .download-button-container > a > div {
    margin: auto;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
}

#download-modal .download-button-container > a:last-child {
    margin-bottom: 0;
}

#token-modal .mini-game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
}

#token-modal .mini-game-container > h3 {
    margin-bottom: 15px;
}

#token-modal .mini-game-container > img {
    height: auto;
    width: 100%;
    margin: 0 auto;
    margin-top: 25px;
    border-radius: 10px;
}

#token-modal .mini-game-container > a {
    border-radius: 10px;
    height: 29px;
    width: 100%;
    text-decoration: none;
    color: white;
    background-color: var(--theme-color-success);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
}

#token-modal .mini-game-container > span {
    color: red;
    font-weight: bold;
    margin-top: 5px;
}

#promotion-modal .promotion-container {
    height: 80vh;
    width: 80vw;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: auto;
    padding: 30% 5% 5% 5%;
    border: 2px solid var(--theme-color);
}

#promotion-modal .promotion-container .promotion-banner {
    position: absolute;
    top: 2.5%;
    width: 90vw;
    left: -5.5vw;
    border: 2px solid #00C2FF;
}

#promotion-modal .promotion-container .promotion-banner > img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

#promotion-modal .promotion-container .promotion-banner > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.7);
    font-weight: 900;
    font-size: 13px;
    height: 100%;
    color: white;
}

#promotion-modal .promotion-container .promotion-tnc {
    margin-top: 30%;
    overflow: auto;
    width: 100%;
    margin: 0 auto;
}

#promotion-modal .promotion-container .promotion-tnc > ol {
    padding-inline-start: 20px;
}

#history-modal .history-container {
    margin: auto;
    width: 80vw;
    padding: 18px;
    border-radius: 11px;
    border: 2px solid var(--theme-color);
    background-color: black;
}

#history-modal .history-container #history-modal-title {
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    color: var(--theme-color);
}

#history-modal .history-container .divider {
    height: 1px;
    width: 100%;
    background-color: var(--theme-color);
    margin: 16px 0;
}

#history-modal .history-container .info-container {
    margin-top: 5px;
}

#history-modal .history-container .info-container > div {
    display: flex;
    flex-direction: row;
    margin-top: 11px;
}

#history-modal .history-container .info-container > div > div:first-child {
    width: 40%;
}

#history-modal .history-container .info-container > div > div:nth-child(3) {
    width: 40%;
    margin-left: 20px;
}

/* Announcement */
div#announcementModal.modal div.modal-content {
    background-color: #000000;
    color: var(--theme-color);
    border: 3px solid var(--theme-color);
    border-radius: 10px;
}

div#announcementModal.modal div.modal-content div.modal-header {
    border-bottom: 0px;
    padding: 0.5rem;
    display: unset;
}

div#announcementModal.modal div.modal-content div.modal-footer {
    padding: 0.5rem;
    display: unset;
}

div#announcementModal.modal div.modal-content div.modal-header .modal-title {
    font-weight: bold;
}

div#announcementModal.modal div.modal-content div.modal-body {
    color: #fff;
}

div#announcementModal.modal div.modal-content div.modal-body img {
    max-width: 100%;
    height: auto;
}

div.rolling-announcement {
    border: 1px solid var(--theme-color);
    border-left: 0px;
    border-right: 0px;
    width: 100%;
    padding: 0px 0px 0px 10px;
    background-color: #00000050;

    padding-top: 1px;
    padding-bottom: 1px;
    background: linear-gradient(to right, #513418, #866c42, #513418, #866c42, #513418, #866c42, #513418);
    margin-top: 2px;
    overflow: hidden;
}

img#ann-icon {
    display: inline-block;
    width: 24px;
}

div.rolling-announcement marquee {
    width: calc(100% - 33px);
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
    display: inline-block;
    font-family: "Arial";
    font-size: 14px;
    color: var(--main-font-color);
    position: relative;
}

body#logged #roll-ann-div {
    width: 100%;
    padding-top: 1px;
    padding-bottom: 1px;
    background: linear-gradient(to right, #513418, #866c42, #513418, #866c42, #513418, #866c42, #513418);
    display: flex;
    align-items: center;
    height: unset;
    margin-top: 2px;
    overflow: hidden;
}

body#logged div#roll-ann-div marquee {
    width: 100%;
    height: 25px;
    line-height: 25px;
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: var(--main-font-color);
    position: relative;
    background-color: transparent;
    margin-left: 35px;
}

body#logged #roll-ann-div img,
div.rolling-announcement img {
    position: absolute;
    height: 16px;
    left: 15px;
    top: calc(50% - 8px);
}


div.rolling-announcement .glow ,
body#logged div#roll-ann-div .glow {   
    inset: 0;
    background-color: black;
    position: absolute;
}

div.rolling-announcement .glow::before ,
body#logged div#roll-ann-div .glow::before {
    position: absolute;
    left: -2px;
    right: -2px;
    top: -24px;
    height: 26px;
    content: "";
    background: linear-gradient(to right, #513418, #866c42, #513418, #866c42, #513418, #866c42, #513418);
    filter: blur(2px);
}


div.rolling-announcement .glow::after,
body#logged div#roll-ann-div .glow::after {
    background: linear-gradient(to right, #513418, #866c42, #513418, #866c42, #513418, #866c42, #513418);
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: -24px;
    height: 26px;
    content: "";
    filter: blur(2px);
}

body.bottom-menu {
    padding-top: 80px;
}

#claim-daily-fab {
    top: -72px !important;
    left: 7px !important;
}
/* Slick Custom Css */

/* custom slick */
.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.slick-dots li {
    width: 30px !important;
    height: 8px !important;
    margin: 0 2px;
    transform: skewX(-45deg) scaleY(cos(45deg));
}

.slick-dots button {
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(217, 217, 217, 0.5) !important;
    padding: 0 !important;
}

.slick-dots button::before {
    display: none;
}

.slick-dots .slick-active button {
    background-color: var(--theme-color) !important;
}

/* .slick-dots li button:before {
    color: white;
}

.slick-dots li.slick-active button:before {
    color: yellow;
} */

.slick-prev {
    left: 0;
    z-index: 1;
}

.slick-next {
    right: 0;
    z-index: 1;
}

.slick-prev:before,
.slick-next:before {
    opacity: 1;
    color: var(--theme-color);
}

.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.slick-dots {
    position: relative;
    bottom: 0;
}

.slick-slide > img {
    max-width: 100%;
    width: 100%;
    height: 120px;
}


.banner {
    width: 100%;
}

.banner img,
img.banner {
    width: 100%;
    height: 165px;
    object-fit: cover;
}
/* End Slick Custom Css */

/** LANDING */
div#currentJackpot {
    background-image: url(../image/opt4/jackpot_bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 296px;
    height: 103px;
    position: relative;
    margin: auto;
    margin-top: 31px;
    margin-bottom: 31px;
}

div#currentJackpot img#hdnJpBg {
    visibility: hidden;
    width: 100%;
}


div#currentJackpot img#jpTitle {
    position: absolute;
    text-align: center;
    top: 30%;
    height: 20px;
    width: auto;
    margin: auto;
    left: 0;
    right: 0;
}

div#currentJackpot img#jpTitle.cn {
    height: 27px;
}

div#currentJackpot span.jpAmount {
    position: absolute;
    font-size: 25px;
    color: #FFD44B;
    font-weight: bold;
    text-shadow: 2px 2px 4px #00000080;
    bottom: 35%;
    width: 100%;
    text-align: center;
    left: 0px;
}

#hot-games {
    margin-bottom: 20px;
}

#hot-games img:not(.product) {
    height: 24px;
    margin-left: 5px;
    margin-right: 5px;
}

#hot-games img.product {
    height: 46px;
    margin-left: 5px;
    margin-right: 5px;
}

#hot-games div.product-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 10px;
}

#hot-games .hot-games-title {
    text-align: center;
    height: 100%;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.1em;
}

#description {
    font-size: 9px;
    text-align: center;
    font-weight: 400;
    margin: 0 25px;
}

#description .highlight {
    color: var(--theme-color);
}
/* Landing page end */

/* Login page */
.login-info-main {
    padding: 0 35px;
}

.login-text-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-text {
    font-size: 24px;
    font-weight: 300;
    color: white;
}

.login-info-container {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    border: 1px solid var(--theme-color);
    height: 35px;
    width: 100%;
}

.login-info-img {
    height: 33px;
    min-width: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-info-img img {
    height: 20px;
    width: 20px;
}

.login-info-container input {
    width: 100%;
    background-color: transparent;
    border: 0;
    color: white;
    padding-left: 5px;
}

#captcha-img {
    margin-top: 10px;
    margin-left: 5px;
    width: 100px;
}

a.login-page.login-button {
    height: 40px;
    width: 250px;
    background-color: var(--theme-color);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: white;
    margin: 15px auto;
}

a.login-page.login-button div {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.5em;
}

/* Login page end */

/* Home page / Deposit page start */
#processing_ticket {
    background-color: var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    height: 25px;
    width: 100%;
}

#unclaimed-rebate {
    background-color: var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    height: 25px;
    width: 100%;
}

#unclaimed-rebate a {
    color: black;
    text-decoration: none;
    outline: none;
}

.home-page,
.deposit-page,
.deposit-page .deposit-tab {
	width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 200px;
}

.deposit-page .deposit-tab {
    padding-bottom: 0px;
}

.home-page .product-slider,
.deposit-page .product-slider {
    position: relative;
    width: 100%;
    margin-top: 15px;
}

.home-page .slider-container,
.deposit-page .slider-container {
    width: 240px;
    margin: auto;
}

.home-page .product-container,
.deposit-page .product-container {
    height: 70px;
    width: 80px;
    border-radius: 5px;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-page .product,
.deposit-page .product {
    height: 70px;
    width: 70px;
    border-radius: 15px;
    background-color: white;
    color: var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.home-page .product .veil,
.deposit-page .product .veil {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
}

.home-page .product > img,
.deposit-page .product > img {
    height: auto;
    width: 60px;
}

.home-page .product-slider ul,
.deposit-page .product-slider ul {
    position: absolute;
    top: 23px;
    left: 0;
    right: 0;
}

.home-page .product-slider ul > li.prev,
.deposit-page .product-slider ul > li.prev {
    position: absolute;
    left: 15px;
    list-style: none;
}

.home-page .product-slider ul > li.next,
.deposit-page .product-slider ul > li.next {
    position: absolute;
    right: 15px;
    list-style: none;
}

.home-page .product-slider ul > li > img,
.deposit-page .product-slider ul > li > img {
    height: 24px;
    width: 13px;
}

.home-page span#product-text,
.deposit-page span#product-text {
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--theme-color);
    text-align: center;
    margin: 0 auto;
}

.home-page .user-info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    min-width: 60%;
}

.home-page .user-info-container .user-info {
    width: 100%;
    margin-left: 30px;
    height: 21px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.home-page .user-info-container .user-info .user-info-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 21px;
}

.home-page .user-info-container .user-info .user-info-img img {
    width: 12px;
}

.home-page .user-info-container .user-info .user-info-img i {
    font-size: 0.8em;
}

.home-page #product-username,
.home-page #product-password {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.25em;
    font-family: 'Roboto';
    margin-left: 12px;
    color: var(--theme-color);
}

.home-page .product-info-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
    width: 75%;
}

.home-page .product-info-container .product-info,
.home-page .product-info-container .big-product-info {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    border: 2px solid white;
    border-radius: 5px;
    width: 31%;
    min-width: 75px;
    height: 29px;
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
}

.home-page .product-info-container .product-info.disabled,
.home-page .product-info-container .big-product-info.disabled,
.home-page .action-button.change-password.disabled,
.deposit-page .action-button.disabled {
    border: 2px solid #4C4C4C !important;
    color: #4C4C4C !important;
}

.home-page .product-info-container .big-product-info {
    width: 65%;
    min-width: 150px;
}

.home-page .product-info-container .product-info-img {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}

.home-page .product-info-container .product-info-text {
    width: 100%;
    margin: auto;
    text-align: center;
}

.home-page .product-info-container .product-info img,
.home-page .product-info-container .big-product-info img {
    width: 15px;
}

.home-page .action-button {
    width: 75%;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    height: 35px;
    border-radius: 17.5px;
    display: flex;
    color: white;
    text-decoration: none;
    outline: none;
}

.home-page .action-button.change-password {
    border: 2px solid white;
}

.home-page .action-button.back {
    background-color: var(--theme-color);
    color: black;
}

.home-page .action-button.transfer {
    background-color: #8358e9;
}

.home-page .deposit-withdraw-container {
    display: flex;
    flex-direction: row;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

.home-page .action-button.deposit {
    width: 47.5%;
    margin-right: 5%;
    background-color: #27AE60;
    padding: 0;
}

.home-page .action-button.deposit.disabled {
    background-color: #2f8a55;
    border-color: #2f8a55;
    color: white;
}

.home-page .action-button.withdraw.disabled {
    background-color: #ba3030;
    border-color: #ba3030;
    color: white;
}

.home-page .action-button.deposit.big {
    width: 75%;
    margin-right: auto;
}

.home-page .action-button.withdraw {
    width: 47.5%;
    background-color: #E12525;
    padding: 0;
}

.home-page .action-button > div {
    font-size: 14px;
    font-weight: 500;
    margin: auto;
}

.home-page .octagon-container {
    display: flex;
    width: 100%;
    height: 150px;
    justify-content: space-around;
}

.home-page .octagon {
    height: 15vh;
    width: 25%;
    position: relative;
    padding: 5px;
}

.home-page .octagon .octagon {
    background: #272622;
}

.home-page .octagon .octagon .octagon {
    background: #8c8e93;
}

.home-page .octagon:before {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 15px solid red;
    border-left: 15px solid black;
    border-right: 15px solid black;
}

.home-page .octagon .octagon:before {
    border-bottom: 10px solid #272622;
    border-left: 10px solid red;
    border-right: 10px solid red;
}

.home-page .octagon:after {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 15px solid red;
    border-left: 15px solid black;
    border-right: 15px solid black;
}

.home-page .octagon .octagon:after {
    border-top: 10px solid #272622;
    border-left: 10px solid red;
    border-right: 10px solid red;
    bottom: 10px;
}


.home-page .product-type-container {
    height: 15vh;
    min-height: 150px;
    width: 30%;
    max-width: 200px;
    display: flex;
    position: relative;
    border: 2px solid var(--theme-color);
    cursor: pointer;
    background: transparent;
    outline: none;
    color: white;
}

.home-page .product-type-container img {
    height: 100%;
    width: 100%;
    object-fit: fill;
}

.home-page .product-type-container div {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%;
    background-color: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Adventure;
    text-transform: uppercase;
}

.home-page h3.rank-title {
    text-align: center;
    text-transform: uppercase;
    color: var(--theme-color);
    margin-top: 30px;
}

.home-page .rank-table-container {
    margin-top: 5px;
    border-radius: 5px;
    background: linear-gradient(to right bottom, white, #d3ac58);
    width: 95%;
    padding: 3px;
    margin: auto;
}

.home-page .rank-table-container .custom-rank-table {
    height: 100%;
    width: 100%;
    padding: 20px 10px;
    background: linear-gradient(to bottom, #84581c, black);

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: 5px;
}

.home-page .rank-table-container .custom-rank-table .table-header {
    background: linear-gradient(to bottom, #f4c238, #c08d30 70%, #8a5830);
    text-transform: uppercase;
    text-align: center;
    font-family: Adventure;
    font-size: 10px;
    font-weight: 400;
    width: 100%;
    margin-bottom: 10px;
    font-weight: 400;
    padding: 5px 0;
}

.home-page .rank-table-container .custom-rank-table .data-row {
    grid-column: 1 / 5; /* span 4 columns */
    font-size: 12px;
    text-align: center;
    margin-top: 20px;
    position: relative;
}

.home-page .rank-table-container .custom-rank-table .data-row:not(.no-data) {
    background: #6a605b;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 5px 0;
    border-radius: 2px;
}

.home-page .rank-table-container .custom-rank-table .data-row .data{
    position: relative;
}

.home-page .rank-table-container .custom-rank-table .data-row .rank-number {
    position: absolute;
    left: calc(50% - 35px);
    top: calc(50% - 4px);
    font-size: 8px;
}

.home-page .rank-table-container .custom-rank-table .data-row .icon-container {
    position: absolute;
    left: calc(50% - 15px);
    bottom: -7px;
    background-color: blue;;
    transform: rotate(-45deg);
    border: 3px solid var(--theme-color);
    border-radius: 5px;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-page .rank-table-container .custom-rank-table .data-row .icon-container i {
    transform: rotate(45deg);
    font-size: 15px;
}

.home-page .rank-table-container .custom-rank-table .data-row:not(.no-data):nth-child(5),
.home-page .rank-table-container .custom-rank-table .data-row:not(.no-data):nth-child(6),
.home-page .rank-table-container .custom-rank-table .data-row:not(.no-data):nth-child(7) {
    background: linear-gradient(to right, #fac326, #734931);
}
/* Home page / Deposit page end */

/* Deposit Page start */
.deposit-page h2 {
    margin-top: 19px;
    text-transform: uppercase;
    text-align: center;
    font-size: 24px;
    font-weight: 900;
}

.deposit-page .amount-container {
    width: 90%;
    margin: 0 auto;
    margin-top: 17px;
}

.deposit-page .amount-title {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.25em;
    color: white;
    display: flex;
    align-items: center;
}

.deposit-page .amount-title .min-text {
    font-size: 9px;
    color: red;
    letter-spacing: 0.05em;
    margin-left: 9px;
}

.deposit-page .amount-input {
    min-height: 37px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    position: relative;
    margin-top: 6px;
    padding: 1px 0;
}

.deposit-page .amount-input .amount-button {
    position: absolute;
    top: calc(50% - 16.5px);
    height: 33px;
    width: 39px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    color: white;
    text-decoration: none;
}

.deposit-page #amount-text {
    background-color: transparent;
    height: 100%;
    width: 100%;
    color: white;
    border: none;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
}

.deposit-page #amount-text:focus {
    outline: none;
}

.deposit-page .amount-input .amount-button.left {
    left: 2%;
}

.deposit-page .amount-input .amount-button.right {
    right: 2%;
}

.deposit-page .amount-presets {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin-top: 12px;
}

.deposit-page .amount-presets > a{
    width: 24%;
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: var(--theme-color-success);
    color: white;
    text-decoration: none;
}

.deposit-page .bonus-container {
    width: 90%;
    margin: 0 auto;
    margin-top: 24px;
}

.deposit-page .bonus-container .bonus-title {
    font-size: 14px;
    font-weight: 400;
    color: var(--theme-color);
}

.deposit-page #bonus-select {
    width: 100%;
    height: 30px;
    padding: 5px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--theme-color);
    color: white;
    background-image: url('../image/l4/btn-down.png');
    background-size: 20px;
    background-position: top 5px right 1px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.deposit-page #bonus-select:focus {
    outline: none;
}

.deposit-page #bonus-select option{
    color: black;
}

.deposit-page .credit-container {
    width: 90%;
    margin: 0 auto;
}

.deposit-page .credit-container .credit-title {
    color: var(--theme-color);
    font-size: 14px;
    font-weight: 400;
    margin-top: 48px;
}

.deposit-page .credit-container .credit-text {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--theme-color);
    border-radius: 10px;
    height: 30px;
}

.deposit-page .credit-container ul.credit-warning {
    padding: 0;
    font-size: 12px;
    font-weight: 400;
    margin-top: 2px;
}

.deposit-page .credit-container ul.credit-warning > li {
    color: red;
    list-style: none;
}

.deposit-page .selected-product-container {
    width: 90%;
    margin: 0 auto;
    margin-top: 41px;
}

.deposit-page .selected-product-container .selected-product-text {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-weight: 900;
    font-size: 14px;
    color: white;
    margin-top: 8px;
}

.deposit-page .selected-bonus-text {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-weight: 900;
    font-size: 14px;
    color: white;
    margin-top: 8px;
}

.deposit-page .selected-product-container .selected-product-text.large {
    font-size: 24px;
    margin-top: 17px;
}

.deposit-page #next-button,
.deposit-page #confirm-button {
    height: 35px;
    border-radius: 17.5px;
    width: 90%;
    margin-top: 21.5px;
    background-color: var(--theme-color-success);
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 69px;
    margin-left: auto;
    margin-right: auto;
    left: 10%;
    outline: none;
}

.deposit-page .payment-container {
    width: 90%;
    margin: 0 auto;
}

.deposit-page  .payment-container .payment-title {
    font-weight: 400;
    color: var(--theme-color);
    font-size: 14px;
}

.deposit-page  .payment-container .payment-title:first-child {
    margin-top: 44px;
}

.deposit-page  .payment-container .payment-title:not(:first-child) {
    margin-top: 26px;
    margin-bottom: 13px;
}

.deposit-page .payment-container .payment-type-container,
.deposit-page .payment-container .payment-receipt-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.deposit-page .payment-container .payment-type-container .action-button {
    width: 49%;
    height: 29px;
    border: 1.5px solid var(--theme-color);
    border-radius: 10px;
    background-color: transparent;
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deposit-page .payment-container .payment-type-container .action-button.active {
    background-color: var(--theme-color);
    color: black;
}

.deposit-page .payment-container .payment-receipt-container .file-text {
    border: 1.5px solid var(--theme-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 29px;
    width: 100%;
    padding-left: 12px;
    font-size: 12px;
}

.deposit-page .payment-container ul.warning-text {
    color: red;
    margin-top: 13px;
    list-style: none;
    padding: 0;
    font-size: 12px;
    font-weight: 400;
}

.deposit-page .payment-container .payment-receipt-container .action-button {
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: black;
    height: 29px;
    width: 74px;
    min-width: 74px;
    margin-left: 3px;
    font-size: 12px;
    text-decoration: none;
}

.deposit-page .payment-container #duitnow-payment-method-select,
.deposit-page .payment-container #payment-bank-select,
.deposit-page .payment-container #payment-product-id-select,
.deposit-page .payment-container #payment-bank-account-select {
    border: 1.5px solid var(--theme-color);
    border-radius: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: transparent;
    height: 29px;
    margin-top: 13px;
    -moz-appearance: none;
    -webkit-appearance: none;
    padding-left: 13px;
    appearance: none;
}

.deposit-page .payment-container #duitnow-payment-method-select option,
.deposit-page .payment-container #payment-bank-select option,
.deposit-page .payment-container #payment-product-id-select option,
.deposit-page .payment-container #payment-bank-account-select option {
    color: black;
    max-width: 100%;
}

.deposit-page .payment-container #payment-bank-account-select option {
    font-size: 10px;
}
/* Deposit Page end */

/* Mission Page */
.mission-page {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mission-page h3 {
    text-transform: uppercase;
    margin: 0 auto;
    margin-top: 19px;
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 14px;
}

.mission-page .mission-container {
    border: 2px solid #F9D382;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    width: 100%;
}

.mission-page .mission-container .image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.mission-page .mission-container .image-container img {
    height: 40px;
    width: 40px;
}

.mission-page .mission-container .image-container .mission-points {
    color: var(--theme-color);
    font-size: 14px;
}

.mission-page .mission-container .description-container {
    display: flex;
    flex-direction: column;
    margin-top: 11px;
    margin-bottom: 11px;
    width: 100%;
}

.mission-page .mission-container .description-container .title-container {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
}

.mission-page .mission-container .description-container .title-container .mission-name {
    font-size: 12px;
    color: var(--theme-color);
}

.mission-page .mission-container .description-container .title-container .mission-progress {
    font-size: 10px;
    color: white;
}

.mission-page .mission-container .description-container .mission-description {
    font-size: 10px;
    color: white;
}

.mission-page .mission-container .progress-bar {
    margin-top: 2px;
}

.mission-page .mission-button {
    min-height: 100%;
    min-width: 77px;
    margin-left: 5px;
    border-radius: 10px;
    background-color: var(--theme-color-success);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mission-page .mission-button.disabled {
    background-color: #555555;
}
/* Mission Page end */

/* Mini Game Page */
.mini-game-page {
    width: 100%;				
    display: flex;
    flex-direction: column;
}

.mini-game-page .mini-game-container {
    width: 80%;
    margin: 0 auto;
}

.mini-game-page .mini-game-container .mini-game-board {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 3%;
    padding-bottom: 3%;
    padding-left: 5%;
    padding-right: 5%;
}

.mini-game-page .mini-game-container .mini-game-board .cell {
    width: 30%;
    height: 30%;
    margin: 1%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-game-page .mini-game-container .mini-game-board .cell .value {
    position: absolute;
    text-align: center;
    color: #7d6c0f;
    font-size: 10px;
    width: 100%;
}

.mini-game-page .mini-game-container .mini-game-board .cell img {
    width: 90%;
    height: auto;
    margin-bottom: 10%;
}

.mini-game-page #no-token-text {
    min-height: 12px;
    font-size: 12px;
    text-align: center;
    color: red;
}

.mini-game-page #play-button,
.mini-game-page #convert-button,
.mini-game-page #double-button {
    height: 29px;
    width: 55%;
    border-radius: 5px;
    background-color: var(--theme-color-success);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 5px;
}

.mini-game-page #convert-button {
    background-color: var(--theme-color);
    margin-bottom: 5px;
}

.mini-game-page #double-button {
    background-color: var(--theme-color-3);
    margin-bottom: 5px;
    color: black;
}

.mini-game-page #play-button.disabled {
    background-color: #575757;
    color: #A9A9A9;
}

.mini-game-page .info-text-container {
    width: 70%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    font-size: 11px;
    font-weight: 500;
}

.mini-game-page .info-text-container.first {
    color: var(--theme-color-success);
    margin-top: 30px;
}

.mini-game-page .info-text-container > div:first-child {
    width: 49%;
}

.mini-game-page .info-text-container > div:nth-child(3) {
    margin-left: 5%;
}

.mini-game-page .divider {
    width: 85%;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    margin: 0 auto;
    margin-top: 14px;
    margin-bottom: 11px;
}

.mini-game-page .rules-container {
    width: 77%;
    margin: 0 auto;
}

.mini-game-page .rules-container > ul {
    list-style: none;
    padding: 0;
    font-size: 9px;
    font-weight: 500;
}
/* Mini Game Page end*/

/* Contact Us Page */
.contact-us-page {
    width: 100%;				
    display: flex;
    align-items: center;
    flex-direction: column;
}
.contact-us-page h3 {
    text-transform: uppercase;
    margin: 0 auto;
    margin-top: 19px;
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 38px;
}

.contact-us-page .contact-us-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
}

.contact-us-page .contact-us-container .info-container {
    padding-top: 38px;
    width: 45%;
    margin: 0 auto;
    margin-bottom: 31px;
    padding-left: 19px;
    padding-right: 19px;
    padding-bottom: 25px; 
    min-height: 147px;
    position: relative;
    background-color: #C4C4C4;
    border-radius: 19px;
}

.contact-us-page .contact-us-container .info-container img {
    position: absolute;
    width: 44px;
    height: 44px;
    left: calc(50% - 22px);
    top: -16px;
}

.contact-us-page .contact-us-container .info-container a {
    border: 1px solid black;
    color: black;
    background-color: white;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    height: 15px;
    font-size: 9px;
    margin-bottom: 13px;
}
/* Contact Us Page end */

/* Profile Page */
.profile-page {
    width: 100%;				
    display: flex;
    flex-direction: column;
    padding-left: 5%;
    padding-right: 5%;
}

.profile-page h3 {
    text-transform: uppercase;
    margin: 0 auto;
    margin-top: 19px;
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 19px;
}

.profile-page .info-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.profile-page .info-container .profile-name {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: white;
    font-size: 16px;
    margin-left: 13px;
}

.profile-page .divider {
    border-bottom: 4px solid var(--theme-color);
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.profile-page .detail-container {
    display: flex;
    flex-direction: row;
}

.profile-page .detail-container > div {
    font-size: 16px;
}

.profile-page .detail-container > div:not(:nth-child(2)) {
    width: 49%;
}

.profile-page .detail-container.last {
    margin-bottom: 32px;
}

.profile-page .detail-container > a {
    position: absolute;
    right: 10%;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 400;
    background-color: var(--theme-color-success);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
}

.profile-page .detail-container > a.disabled {
    background-color: #585858;
}

.profile-page .action-button {
    color: white;
    text-decoration: none;
    border-radius: 16px;
    width: 60%;
    margin: 0 auto;
    margin-top: 10px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-page #change-password {
    border: 2px solid white;
}

.profile-page #log-out {
    background-color: red;
}
/* Profile page end */

/* Change Password Page */
.change-password-page {
    display: flex;
    flex-direction: column;
}

.change-password-page h3 {
    text-transform: uppercase;
    margin: 0 auto;
    margin-top: 19px;
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: 900;
}

.change-password-page .input-field {
    width: 90%;
    height: 39px;
    text-align: center;
    border-radius: 10px;
    border: 2px solid white;
    color: white;
    background-color: transparent;
    margin: 0 auto;
    margin-bottom: 19px;;
}

.change-password-page .action-button {
    background-color: var(--theme-color-success);
    border-radius: 16px;
    height: 35px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin: 0 auto;
    margin-top: 29px;
}
/* Change Password Page end */

/* Redeem Page */
.redeem-page {
    width: 100%;				
    display: flex;
    flex-direction: column;
    padding-bottom: 300px;
}

.redeem-page h3 {
    text-transform: uppercase;
    margin: 0 auto;
    margin-top: 19px;
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 30px;
}

.redeem-page h3.item-type {
    margin-bottom: 28px;
}

.redeem-page .redeem-container {
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    margin-bottom: 22px;
}

.redeem-page .redeem-container > img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.redeem-page .redeem-container > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.7);
    font-weight: 900;
    font-size: 13px;
    height: 100%;
    color: white;
}

/* Redeem V3 */
.redeem-page .redeem-tab {
    text-transform: uppercase;
    width: 50%;
    height: 40px;
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: 900;
    background-color: transparent;
    border: 2px solid var(--theme-color);
    border-radius: 16px;
    text-decoration: none;
}

.redeem-page .active{
    background-color: var(--theme-color);
    border: 2px solid transparent;
}

.redeem-page .redeem-data { 
    position: relative;
    margin-top: 50px;
}

.redeem-page .redeem-data .redeem-img-container {
    width: 90%;
    border: 3px solid var(--theme-color-3);
    margin: auto;
    position: relative;
}

.redeem-page .redeem-data .redeem-img-container img {
    width: 100%;
    height: 100%;
}

.redeem-page .redeem-data .redeem-img-container .redeem-discount-container{
    position: absolute;
    top: 0;
    right: 0;
    width: 15%;
    height: 30%;
    background-color: var(--theme-color-3);
    text-align: center;
    font-weight: bold;
    font-size: 22px;
}
.redeem-page .redeem-data .redeem-img-container .redeem-discount {
    text-align: center;
    color: red;
    font-weight: normal;
    font-size: 22px;
}
/* Redeem V3 End*/

.redeem-page .redeem-item-container {
    position: relative;
    width: 100%;
    margin-top: 15px;
}

.redeem-page .redeem-item-container .product-container {
    height: 177px;
    width: 177px;
    border-radius: 8px;
    background-color: white;
    color: black;
}

.redeem-page .redeem-item-container .product-container .product {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
}

.redeem-page .redeem-item-container .product-container .product img {
    width: 100%;
    height: auto;
}

.redeem-page .redeem-item-container ul {
    position: absolute;
    top: calc(50% - 12px);
    left: 0;
    right: 0;
}

.redeem-page .slider-container {
    width: 177px;
    margin: auto;
}

.redeem-page .redeem-item-container ul > li.prev {
    position: absolute;
    left: 15px;
    list-style: none;
}

.redeem-page .redeem-item-container ul > li.next {
    position: absolute;
    right: 15px;
    list-style: none;
}

.redeem-page .redeem-item-container ul > li > img {
    height: 24px;
    width: 12px;
}

.redeem-page #item-name {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 12px;
    text-align: center;
    color: var(--theme-color);
    font-weight: 900;
    font-size: 24px;
}

.redeem-page .info-container {
    display: flex;
    flex-direction: row;
    width: 60%;
    margin: 0 auto;
    margin-bottom: 12px;
    font-weight: 900;
    font-size: 14px;
}

.redeem-page .info-container > div:not(:nth-child(2)) {
    width: 49%;
}

.redeem-page .info-container > div:nth-child(3) {
    display: flex;
    flex-direction: row;
}

.redeem-page #redeem-button, .redeem-page .redeem-button {
    width: 70%;
    height: 35px;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    background-color: var(--theme-color-success);
    border-radius: 16px;
    text-decoration: none;
}

.redeem-page #player-points,
.redeem-page #required-points,
.redeem-page #stock-left {
    margin-left: 3px;
}
/* Redeem Page end */

/* Promotion Page */
.promotion-page {
    width: 100%;				
    display: flex;
    flex-direction: column;
}

.promotion-page h3 {
    text-transform: uppercase;
    margin: 0 auto;
    margin-top: 19px;
    margin-bottom: 46px;
    font-size: 24px;
    font-weight: 900;
}

.promotion-page .promotions-container {
    display: flex;
    flex-direction: column;
}

.promotion-page .promotions-container .promotion-container {
    width: 80%;
    margin: 11px auto;
    position: relative;
}

.promotion-page .promotions-container .promotion-container > img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.promotion-page .promotions-container .promotion-container > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.7);
    font-weight: 900;
    font-size: 13px;
    height: 100%;
    color: white;
}
/* Promotion Page end */

/* History Page */
.history-page {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.history-page h3 {
    text-transform: uppercase;
    margin: 0 auto;
    margin-top: 19px;
    margin-bottom: 21px;
    font-size: 24px;
    font-weight: 900;
}

.history-page .history-tabs {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 40px;
    background-color: var(--theme-color);
    color: white;
}

.history-page .history-tabs > a {
    text-transform: uppercase;
    color: white;
    font-weight: 900;
    font-size: 12px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
}

.history-page .history-tabs > a .active-indicator {
    position: absolute;
    background-color: white;
    height: 5px;
    width: 100%;
    bottom: 0;
}

.history-page .history-header {
    margin: 11px 10px 0 10px;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid white;
    font-weight: 700;
}

.history-page .history-header:not(.redeem) > div:first-child,
.history-page .history-data:not(.redeem) a > div:first-child {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.history-page .history-header:not(.redeem) > div:nth-child(2),
.history-page .history-data:not(.redeem) a > div:nth-child(2) {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.history-page .history-header:not(.redeem) > div:nth-child(3),
.history-page .history-data:not(.redeem) a > div:nth-child(3) {
    width: 35%;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-page .history-data.claim a > div:nth-child(3) > div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.history-page .history-header.redeem > div:first-child,
.history-page .history-data.redeem a > div:first-child {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.history-page .history-header.redeem > div:nth-child(2),
.history-page .history-data.redeem a > div:nth-child(2) {
    width: 30%;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-page .history-header.redeem > div:nth-child(3),
.history-page .history-data.redeem a > div:nth-child(3) {
    width: 30%;
    margin-left: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-page .history-data {
    margin: 11px 10px 0 10px;
}

.history-page .history-data a {
    text-decoration: none;
    color: white;
    height: 40px;
    display: flex;
    flex-direction: row;
}

.history-page .white-background {
    position: absolute;
    z-index: 1;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    background-color: white;
    border-radius: 50%;
}

.history-page i.processing {
    color: var(--theme-color);
}

.history-page i.success,
.history-page i.reject {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;

}

.history-page i.success {
    color: var(--theme-color-success);
}

.history-page i.reject {
    color: red;
}

/* History Page end*/

/*Start Profile Page*/
a.profile-change-password {
    text-decoration: none;
    color: var(--main-font-color);
    border: 0px;
    width: 49%;
    margin-right: 1%;
    border-radius: 0px;
    background-color: #FFFFFF60;
    height: unset;
    font-size: 10pt;
}
a.profile-logout {
    text-decoration: none;
    color: var(--main-font-color);
    background-color: #FB4F42;
    border: 0px;
    width: 49%;
    margin-left: 1%;
    border-radius: 0px;
    height: unset;
    font-size: 10pt;
}
div.profile-membership {
    background-color: #ffffff15;
    border-top: 2px solid var(--theme-color);
}
div.profile-membership ul.nav.nav-tabs {
    border: 0px;
    /*width: 100vw;*/
}
div.profile-membership ul.nav.nav-tabs li span {
    border-radius: 0px;
    background-color: transparent;
    color: var(--main-font-color);
    /*width: 50vw;*/
    margin-left: -15px;
}
div.profile-membership ul.nav.nav-tabs li:first-child span {
    border-color: var(--theme-color);
    border-top: 1px;
    border-left: 1px;
}
div.profile-membership ul.nav.nav-tabs li:last-child span {
    border-color: var(--theme-color);
    border-top: 1px;
    border-right: 1px;
}
div.profile-membership ul.nav.nav-tabs li span.active {
    font-weight: bold;
    border: 0px;
}
div.profile-membership div.tab-content {
    margin: 15px 0px;
}
.step-progressbar-toplabels .step-progressbar-steplabel,
.step-progressbar-bottomlabels .step-progressbar-steplabel {
    color: var(--main-font-color) !important;
}
.step-progressbar-bar .step-progressbar-progress,
.step-progressbar-rounded .step-progressbar-bar:before,
.step-progressbar-rounded .step-progressbar-bar:after {
    background-color: var(--theme-color) !important;
}

div.theme-box {
    margin: 10px 0px 20px 0px;
    width: 100%;
}
div.theme-box div.theme-box-header {
    position: relative;
    color: var(--main-font-color);
    text-align: center;
    padding-top: 15px;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: 500;
}
div.theme-box div.theme-box-body {
    text-align: center;
    padding: 5px;
    color: #514A4C;
}
/*End Profile Page*/

/* Rank Table */
.rank-table {
    font-size: x-small;
}
.rank-table thead th:first-child {
    width: 10%;
}
.rank-table thead th:nth-child(2) {
    width: 30%;
}
.rank-table thead th:nth-child(3) {
    width: 60%;
}
.rank-table tbody tr:first-child {
    background-color: goldenrod;
}
 
.rank-table tbody tr:nth-child(2) {
   background-color: #999999;
}
rank-table tbody tr:nth-child(3) {
  background-color: #B87333;
}
rank-table tbody tr:nth-child(n+4) {
   background-color: #1e1e1e;
}
rank-table tbody tr:nth-child(n+9) {
   background-color: #2d2d2d;
}
.rank-table tbody tr td:nth-child(2) {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 1px; /* Need this to hide text */
}
.rank-nav .rank-mode-button {
    height: 100%;
    width: 100%;
    background-color: black;
    color: var(--theme-color);
    border-color: var(--theme-color);
    border-width: 1px;
}
.rank-nav .rank-nav-button {
    width: 30%;
    background-color: black;
    color: var(--theme-color);
    border-color: var(--theme-color);
    margin-left: 3%;
    margin-top: 1%;
    margin-bottom: 1%;
    padding-top: 3px;
    padding-bottom: 3px;
    border-width: 1px;
    font-size: 0.7rem;
}
.rank-nav .rank-nav-button.rank-nav-active {
   background-color: var(--theme-color);
   color: white;
}
.rank-highest-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.rank-weekly-highest {
    font-weight: bold;
    color: goldenrod;
    font-size: 1.5rem;
}
/* End Rank Table */