:root {
    --main-bg-color: #000000;
    --main-font-color: #ffffff;
    --main-font-color-2: #F7EBAD;
    --theme-color: #BC9A54;
    --theme-color-2: #CAB479;
    --theme-color-3: #F9D869;
    --theme-color-4: goldenrod;
}

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

 body {
     /*background-repeat: no-repeat;
     background-size: 100% 100%;*/
     color: var(--main-font-color);
     height: 100%;
     min-height: 100vh;
     margin: auto;
 }

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

 header {
     max-width: 740px !important;
     text-align: center;
 }

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

 header div.navbar-brand div.navbar-left {
     float: left;
     display: inline-block;
 }

 header div.navbar-brand div.navbar-right {
     float: right;
     height: 40px;
     line-height: 34px;
     margin: 15px 0px;
 }

 header div.navbar-brand div.navbar-right span.lang {
     margin-left: 3px;
     color: #efb72e;
     font-size: 14px;
     font-weight: bold;
 }

 header div.navbar-brand div.navbar-right span.lang>img {
     /*margin-right: 3px;*/
     height: 20px;
     margin-top: -4px;
 }

 .btn-theme {
     height: 26px;
     line-height: 14px;
     font-size: 14px;
     font-family: "Arial";
     font-weight: bold;
     border: none;
     border-radius: 0px;
 }

 header a.btn-theme.login {
     background-color: #FFFFFF40;
     color: var(--main-font-color);
     font-size: 12px;
 }

 input#Captcha {
     background-color: white;
     font-family: unset;
     font-weight: normal;
     font-size: 11pt;
     color: #555;
 }

 header a.btn-theme.register {
     color: #000000;
     background-image: url(../image/opt21/btn_bg.jpg);
     font-size: 12px;
 }

 header button.btn-theme.lang {
     padding: 0px;
     font-size: 26px;
 }

 header button.btn-theme.lang span {
     vertical-align: super;
 }

 @media only screen and (max-width: 380px) {
     header {
         height: 60px;
     }

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

     header div.navbar-brand div.navbar-right {
         float: right;
         height: 35px;
         line-height: 30px;
         margin: 12.5px 0px;
     }

     header .btn-theme {
         font-size: 12px;
         height: 26px;
         line-height: 14px;
     }
 }

 .banner img {
     width: 100%;
     max-width: 100%;
 }

 /* Slick Custom Css */
 .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;
 }

 /* End Slick Custom Css */

 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;
 }

 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);
 }

 div#currentJackpot {
     background-image: url(../image/opt21/jackpot_bg.png);
     background-size: contain;
     background-repeat: no-repeat;
     width: calc(100% + 30px);
     position: relative;
     margin-left: -15px;
 }

 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: 30px;
     color: #FFD44B;
     font-weight: bold;
     text-shadow: 2px 2px 4px #00000080;
     bottom: 35%;
     width: 100%;
     text-align: center;
     left: 0px;
 }

 @media only screen and (min-width: 768px) {
     div#currentJackpot span.jpAmount {
         font-size: 60px;
         /*top: calc(50% - 30px);*/
     }
 }

 @media only screen and (max-width: 767px) {
     div#currentJackpot span.jpAmount {
         font-size: 45px;
         /*top: calc(50% - 22.5px);*/
     }
 }

 @media only screen and (max-width: 550px) {
     div#currentJackpot span.jpAmount {
         font-size: 35px;
         /*top: calc(50% - 17.5px);*/
     }
 }

 @media only screen and (max-width: 420px) {
     div#currentJackpot span.jpAmount {
         font-size: 25px;
         /*top: calc(50% - 12.5px);*/
     }
 }

 div#description p {
     text-align: center;
     font-size: 14px;
     margin: 0px 10px 20px 10px;
 }

 div.theme-box {
     margin: 10px 0px 20px 0px;
 }

 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;
 }

 div#step {
     background-image: url(../image/opt21/step_bg.png);
     background-size: 100% 100%;
     line-height: 1;
 }

 div#step.theme-box div.theme-box-body>div {
     border-left: 2px solid #ffffff50;
 }

 div#step.theme-box div.theme-box-body>div:first-child {
     border: none;
 }

 div#step.theme-box div.theme-box-body img {
     display: block;
     width: 100%;
 }

 div#step.theme-box div.theme-box-body span.step-no {
     display: block;
     margin-top: 10px;
     color: var(--main-font-color);
     font-size: 12px;
 }

 div#step.theme-box div.theme-box-body span.step-name {
     display: block;
     margin-top: 5px;
     color: var(--main-font-color);
     font-weight: bold;
 }

 div#hot-games {
     width: calc(100% + 30px);
     margin-left: -15px;
 }

 div#hot-games.theme-box div.theme-box-body {
     padding: 5px 0px;
 }


 div#hot-games.theme-box div.theme-box-body img {
     width: 95%;
 }

 div#content a.btn-theme.submit {
     background-image: url(../image/opt21/btn_bg.jpg);
     height: 35px;
     line-height: 35px;
     padding: 0px;
 }

 div.contact-row {
     text-align: left;
     display: block;
     margin: 8px 0px;
 }

 /*div#footer div.contact-row div.contact-icon{
     display: inline-block;
}
*/
 div.contact-row div.contact-icon,
 div.contact-row div.contact-icon img {
     height: 30px;
     width: auto;
 }

 div.contact-row div.contact-link {
     display: inline-block;
 }

 div.contact-row div.contact-link a {
     text-decoration: none;
     display: inline-block;
     font-size: 12px;
     font-family: "Arial";
     color: #fff !important;
     border-radius: 10px;
     border: 1px solid #F9D869;
     background-color: #00000040;
     padding: 0px 5px;
     margin-left: 0px !important;
 }

 /*LOGIN PAGE*/

 input.custom-input {
     border-radius: 0px;
     padding: 0px 15px;
     font-size: 16px;
     font-family: "Arial";
     height: 35px;
     margin: 10px 0px;
     color: #000000;
     font-weight: bold;
     border: 1px #BC9A54;
 }

 ::placeholder {
     /* Chrome, Firefox, Opera, Safari 10.1+ */
     color: #00000040;
     /* Firefox */
 }

 :-ms-input-placeholder {
     /* Internet Explorer 10-11 */
     color: #00000040;
 }

 ::-ms-input-placeholder {
     /* Microsoft Edge */
     color: ##00000040;
 }

 ul#errors {
     font-size: 12px;
     font-weight: bold;
 }

 div.lang-modal div.modal-dialog {
     top: 20%;
     padding: 0px 15px;
     background-color: #000000;
     border: 2px solid var(--theme-color);
     border-radius: 0px;
 }

 div.lang-modal div.modal-dialog div.modal-content {
     background-color: #000000;
     color: var(--theme-color);
     border: 0px;
     border-radius: 0px;
 }

 div.lang-modal div.modal-dialog div.modal-content div.modal-header .modal-title {
     width: 100%;
     color: var(--main-font-color);
     margin-left: 10px;
 }

 div.lang-modal .close {
     color: #ffffff;
     text-shadow: none;
     width: 20px;
     padding: 0px;
     margin: 7px 0px;
     cursor: pointer;
     opacity: 1;
 }

 div.lang-modal div.modal-dialog div.modal-content div.modal-header {
     border: 0px;
     padding: 8px 15px;
 }

 div.lang-modal div.modal-dialog div.modal-content div.modal-body {
     display: flex;
     margin: 0px;
 }

 div.lang-modal div.modal-dialog div.modal-content div.modal-body a {
     display: inline-block;
     text-decoration: none !important;
     margin: auto;
 }

 div.lang-modal div.modal-dialog div.modal-content div.modal-body a img {
     display: block;
     width: 55px;
     margin: auto;
 }

 div.lang-modal div.modal-dialog div.modal-content div.modal-body a span {
     color: #ffffff;
 }

 div.lang-modal div.modal-dialog div.modal-content div.modal-body a span.selected {
     color: var(--theme-color-2);
     font-weight: bold;
 }
 
 .lang-icon {
     height: 45px;
     width: 45px;
 }

.lang-word.selected {
     font-size: 36px;
     border: 1px solid var(--theme-color);
 }

 /*Start layout*/

 /* {
     background-size: 100% calc(100% - 50px);
 }*/

 .container {
     max-width: 740px;
 }

 a.btn-theme,
 button.btn-theme {
     background-image: url(../image/opt21/btn_bg.jpg);
     height: 35px;
     line-height: 35px;
     padding: 0px;
 }

 .top-welcome a {
     color: var(--main-font-color-2);
     font-weight: bold;
 }

 .top-welcome a.top-username {
     text-decoration: underline;
 }

 .top-welcome img.top-nav {
     width: 20px;
     margin-left: 3px;
     cursor: pointer;
 }

 .navbar.fixed-top {
     border-color: var(--theme-color);
     background-image: url(../image/opt21/bg.jpg);
     /*background-size: 100% 100vh;*/
     border: 0px;
 }

 .navbar.fixed-bottom {
     background-image: url(../image/opt21/nav_bg.png);
     background-size: contain;
 }

 .navbar.fixed-bottom>.container>.icon-bar {
     border: none;
 }

 .navbar.fixed-bottom>.container>.icon-bar>img {
     height: 45px;
     margin-top: 2.5px;
 }

 #roll-ann-div {
     border: 1px solid var(--theme-color);
     border-left: 0px;
     border-right: 0px;
     width: 100%;
     padding: 0px 0px 0px 10px;
     background-color: #00000050;
     background-image: url(../image/opt21/bg.jpg);
     /*background-size: 100vw 100vh;*/
     background-position-y: 65px;
 }

 #roll-ann-div img#ann-icon {
     vertical-align: super;
 }

 div#roll-ann-div marquee {
     width: calc(100% - 33px);
     height: 28px;
     line-height: 28px;
     display: inline-block;
     font-family: "Arial";
     font-size: 14px;
     color: var(--main-font-color);
 }

 .notification-bg-fullwidth {
     background: var(--theme-color);
 }

 div#processing_ticket div.notification-text,
 div#unclaimed-rebate a.notification-text {
     color: #000000;
     background: var(--theme-color);
     font-size: 12px;
     text-align: center;
 }

 div#unclaimed-rebate a.notification-text {
    display: block;
    border-top: 1px solid black;
 }

 footer h2.subpart {
     text-align: left;
     border: none;
 }

 footer h2.subpart span {
     padding: 0px;
 }

 div.page-title {
     width: calc(100% - 30px);
     text-align: center;
     border-bottom: 1px solid var(--subpart-font-color);
     line-height: 0.1em;
     margin: 30px 15px 20px;
     font-size: 20px;
     line-height: 0px;
 }

 div.page-title span {
     color: var(--subpart-font-color);
     background: #000;
     padding: 0 10px;
     text-transform: uppercase;
     font-weight: bold;
     font-size: 20px;
 }

 div#langModal .close {
     position: absolute;
     top: 2px;
     right: 5px;
     opacity: 1;
 }

 /*End Layout*/

 /*Start Home Page*/
 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;
 }

 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;
 }

 table.product thead th {
     color: var(--main-font-color);
 }

 table.product th,
 table.product tr,
 table.product td {
     border-color: var(--theme-color);
 }

 .product-content {
     color: var(--main-font-color);
 }

 .product-content .fas {
     color: var(--main-font-color-2);
 }

 .product-download>a,
 .product-content #changePwdBtn.btn {
     border-radius: 0px;
     background-color: transparent;
     border-color: var(--theme-color-3);
     color: var(--theme-color-3);
 }

 .product-download a .fa-desktop {
     color: #FFFFFF;
 }


 .product-action a {
     font-size: 11px;
     width: 100%;
 }

 .product-deposit-btn {
     color: #fff;
     background-color: #68B641;
     border-radius: 0px;
     height: unset;
 }

 .product-contact-btn {
    color: #fff;
    background-color: var(--theme-color-4);
    border-radius: 0px;
    height: unset;
 }

 .product-action .btn-danger {
     color: #fff;
     background-color: #FB4F42;
     border-radius: 0px;
 }

 div.product-download div.modal.product-play-modal div.modal-content {
     background-color: #000000;
     border: 1px solid var(--theme-color);
 }

 div.product-download div.modal.product-play-modal div.modal-content .btn-theme {
     width: 90%;
     color: #000000;
     border-radius: 3px;
 }

 div.product-download div.modal.product-play-modal div.modal-content .close {
     position: absolute;
     height: 23px;
     opacity: 1;
     right: 5px;
     top: 5px;
 }

 /*End Home Page*/

 /*Start History Page*/
 p.small-title {
     margin-bottom: 5px;
 }

 div.custom-accordion.trans-hist {
     margin-bottom: 20px;
 }

 div.custom-accordion.trans-hist div.card {
     background-color: #ffffff30;
     border-radius: 0px;
     border: 1px solid var(--theme-color);
 }

 div.custom-accordion.trans-hist div.card div.card-header {
     border: 0px;
     padding: 10px 20px;
 }

 div.custom-accordion.trans-hist div.card div.card-header div#trans-hist-tic-type,
 div.custom-accordion.trans-hist div.card div.card-header div#trans-hist-amount,
 div.custom-accordion.trans-hist div.card div.card-header div#trans-hist-date,
 div.custom-accordion.trans-hist div.card div.card-header div#trans-hist-status {
     display: inline-block;
 }

 div.custom-accordion.trans-hist div.card div.card-header div#trans-hist-date {
     float: left;
 }

 div.custom-accordion.trans-hist div.card div.card-header div#trans-hist-amount,
 div.custom-accordion.trans-hist div.card div.card-header div#trans-hist-status {
     float: right;
 }

 div.custom-accordion.trans-hist div.card div.card-header div#trans-hist-tic-type,
 div.custom-accordion.trans-hist div.card div.card-header div#trans-hist-amount {
     font-size: 20px;
 }

 div.custom-accordion.trans-hist div.card div.card-header div#trans-hist-date,
 div.custom-accordion.trans-hist div.card div.card-header div#trans-hist-status {
     font-size: 11px;
 }

 div.custom-accordion.trans-hist div.card div.card-prebody {
     padding: 20px;
     padding-top: 0px;
 }

 div.custom-accordion.trans-hist div.card div.card-prebody div.card-body {
     border-top: 1px solid #ffffff;
     padding: 0px;
     padding-top: 20px;
 }

 /*End History Page*/

 /*Start Promotion Page*/
div.custom-accordion.promotion div.card {
     background-color: transparent;
     border-radius: 0px;
     border: 1px solid var(--theme-color);

 }

 div.custom-accordion.promotion div.card div.card-header {
     border: 0px;
 }

 /*End Promotion Page*/

 /*Start Contact Us Page*/
 div#contact-us-page div.contact-row {
     display: block;
     margin: 30px 15px;
     text-align: center;
 }

 div#contact-us-page div.contact-row div.contact-us-on {
     /*font-weight: bold;*/


     display: inline-block;
     float: left;
     line-height: 22px;
     margin-left: 10px;
 }

 div#contact-us-page div.contact-row div.contact-icon {
     /*display: block;
     height: 60px;
     width: 100%;
     text-align: center;*/

     display: inline-block;
     height: 22px;
     /* width: 100%; */
     width: auto;
     text-align: center;
     float: left;
 }

 div#contact-us-page div.contact-row div.contact-icon img {
     height: 22px;
 }

 div#contact-us-page div.contact-row div.contact-link {
     margin-top: 3px;
     width: 100%;
     display: block;
     float: left;
     text-align: left;
     padding-bottom: 20px;
 }

 div#contact-us-page div.contact-row div.contact-link a {
     text-decoration: none;
     display: inline-block;
     font-size: 12px;
     font-family: "Arial";
     color: var(--main-font-color) !important;
     border-radius: 10px;
     border: 1px solid var(--theme-color);
     background-color: #F9D86920;
     padding: 0px 5px;
     margin-left: 0px;
 }

 /*End Contact Us Page*/

 /*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;
 }

 /*End Profile Page*/

 td.product-name {
     color: white !important;
 }

 /* menu icon */
 .icon-active {
     color: var(--theme-color-4);
 }

 #login-button {
    font-size: 9pt;
    text-transform: uppercase;
 }

 .carousel-inner img {
     width: 100%;
     max-height: 600px;
     object-fit: cover;
 }


 /* 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;
 }