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

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

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

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

 header {
     height: 70px;
     max-width: 760px !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;
 }

 header a.btn-theme.register {
     color: #000000;
     background-image: url(../image/opt20/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/opt20/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/opt20/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/opt20/btn_bg.jpg);
     height: 35px;
     line-height: 35px;
     padding: 0px;
 }

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

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

 footer div.contact-row div.contact-link {
     margin-left: 10px;
     display: inline-block;
 }

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

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

 /*Start layout*/

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

 body#logged .container {
     max-width: 740px;
 }

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

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

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

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

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

 body#logged .navbar.fixed-bottom {
     background-image: url(../image/opt20/nav_bg.png);
     background-size: contain;
 }

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

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

 body#logged #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/opt20/bg.jpg);
     /*background-size: 100vw 100vh;*/
     background-position-y: 65px;
 }

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

 body#logged 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);
 }

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

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

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

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

 body#logged 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;
 }

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

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

 /*End Layout*/

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

 body#logged div#announcementModal.modal div.modal-content div.modal-header {
     border-bottom: 0px;
 }

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

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

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

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

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

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

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


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

 body#logged .product-action .deposit-btn {
     color: #fff;
     background-color: #68B641;
     border-radius: 0px;
 }

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

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

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

 body#logged 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*/
 body#logged p.small-title {
     margin-bottom: 5px;
 }

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

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

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

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

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

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

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

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

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

 body#logged 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*/
 body#logged div.custom-accordion.promotion div.card {
     background-color: transparent;
     border-radius: 0px;
     border: 1px solid var(--theme-color);

 }

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

 /*End Promotion Page*/

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

 body#logged 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;
 }

 body#logged 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;
 }

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

 body#logged 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;
 }

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

 body#logged a.profile-logout {
     text-decoration: none;
     color: var(main-font-color);
     background-color: #FB4F42;
     border: 0px;
     width: 49%;
     margin-left: 1%;
     border-radius: 0px;
 }

 body#logged div.profile-membership div.profile-membership-body {
    padding: 0px 0px;
}

body#logged div.profile-membership ul.nav.nav-tabs {
    border: 0px;
}

body#logged div.profile-membership ul.nav.nav-tabs li span {
    border-radius: 0px;
    background-color: transparent;
    text-transform: uppercase;
}

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;
    color: var(--main-title-color);
    text-decoration: underline;
    border-bottom: none;
}

body#logged div.profile-membership div.tab-content {
    color: #ffffff;
    -moz-box-shadow:
        inset 0px 11px 8px -10px #000000,
        inset 0px -11px 8px -10px #000000;
    -webkit-box-shadow:
        inset 0px 11px 8px -10px #000000,
        inset 0px -11px 8px -10px #000000;
    box-shadow:
        inset 0px 11px 8px -10px #000000,
        inset 0px -11px 8px -10px #000000;
    padding: 20px 15px;
}

body#logged .step-progressbar-toplabels .step-progressbar-steplabel,
body#logged .step-progressbar-bottomlabels .step-progressbar-steplabel {
    color: #ffffff !important;
}

body#logged .step-progressbar-bar .step-progressbar-progress,
body#logged .step-progressbar-rounded .step-progressbar-bar:before,
body#logged .step-progressbar-rounded .step-progressbar-bar:after {
    background-color: var(--main-title-color) !important;
}

body#logged div#profile-page div.tab-pane#references[role=tabpanel] div.card {
    margin-bottom: 5px;
    border: none;
    color: #888888;
    border-radius: 0px;
    padding-top: 10px;
    border: 1px solid #000;
}

body#logged div#profile-page div.tab-pane#references[role=tabpanel] div.card div.card-header {
    text-transform: uppercase;
    text-align: center;
    background-color: transparent;
    border-bottom: none;
    font-weight: bold;
    color: #000000;
}

body#logged div#profile-page div.tab-pane#references[role=tabpanel] div.card div.card-body a.btn-theme {
    border-radius: 0px;
}

 /*End Profile Page*/