@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body { background-position: center; background-size: auto; background-attachment: scroll; margin: 0; line-height: normal; font-family: "Open Sans", sans-serif, "Microsoft JhengHei"; color: #fff; font-size: 16px; background: #191717; }
* { padding: 0; margin: 0; box-sizing: border-box; }
img { vertical-align: middle; }
table { width: 100%; }
button { outline: 0; border: 0; }
input { outline: 0; border: 0; }
iframe { width: 100%; height: 850px; border: 0; }
a, a:hover, a:active, a:focus { text-decoration: none; }
ul, ol { margin-left: 20px; margin-bottom: 20px; }
li { list-style-type: disc; padding: 5px 0; }

@media screen and (max-width:767px) {
    iframe { height: 70vh; }
    body { font-size: 12px; }
}

@media screen and (min-height:767px) {
    #divBody > div { min-height: 500px; }
}

/***************************************************************************** theme */
body.theme-light { background: #fff; color: #000; }

    body.theme-light .btn-login { /*background: #00aeef;*/ }
        body.theme-light .btn-login:hover { /* color: #000; border-color: #000;*/ }
    body.theme-light .btn-register { /*background: #ff0000; border-color: #ff0000; color: #fff;*/ }
        body.theme-light .btn-register:hover { /*background: #ff0000; color: #000;*/ }
    body.theme-light .time { color: #fff; }


    body.theme-light #divBody a { color: #2a2a2a !important; }

    body.theme-light #divBody #myBtnContainer a { color: #fff !important; }
    body.theme-light #divBody .promo-bluebut { border-color: #2a2a2a; color: #2a2a2a !important; }
    body.theme-light .home-ad{background:#191717;}

@media (min-width:1024px) {
    body.theme-light .divHeader { /*background: #00aeef;*/ }

    body.theme-light #cssmenu > ul > li > a { /*color: #222;*/ }
    body.theme-light #cssmenu > ul > li:hover > a { /*color: #fff; */ }
    body.theme-light #cssmenu > ul > li.active > a { /*color: #fff;*/ }
    body.theme-light #cssmenu ul ul:before { border-top-color: #5bcbf5; border-bottom-color: #353535; }
    body.theme-light #cssmenu ul ul li:hover > a { background: #00aeef; }
}

@media (max-width:767px) {
    body.theme-light .filterDiv { background: #efefef; }
}
/***************************************************************************** style */
.w1440 { max-width: 1440px; margin: auto; width: 100%; }
a { color: #fff; }
    a:hover { color: #00aeef; }
h1 { color: #00aeef; font-weight: bold; }
h3 { color: #00aeef; font-weight: bold; }
h4 { color: #fff; font-weight: bold; margin-top: 30px; margin-bottom: 15px; }
h5 { color: #00aeef; text-align: center; }
button.close { transition: transform 0.2s ease-in-out; font-size: 40px; opacity: 1; text-shadow: none; font-weight: normal; }
    button.close:hover { transform: rotate(180deg); }
.pd-5 { padding: 5px; }

.modal-backdrop { background-color: #000; }
    .modal-backdrop.in { opacity: 0.8; }

@media screen and (max-width:767px) {
    .box-container { margin: 25px auto; }
}

@media screen and (max-width:1023px) {
    .windowOnly { display: none; }
}

@media screen and (min-width:1024px) {
    .mobileOnly { display: none; }
}

.btn-blue { color: #00aeef; font-size: 1.2em; }

/**** bootstrap */
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.text-center { text-align: center; }

/**** scroll bar */
::-webkit-scrollbar { width: 8px; height: 5px; }
::-webkit-scrollbar-button { width: 0px; height: 0px; }
::-webkit-scrollbar-thumb { background: #888; border: 0px none #ffffff; border-radius: 50px; }
    ::-webkit-scrollbar-thumb:hover { background: #888; }
    ::-webkit-scrollbar-thumb:active { background: #888; }
::-webkit-scrollbar-track { background: #F5F5F5; border: 0px none #ffffff; border-radius: 50px; }
    ::-webkit-scrollbar-track:hover { background: #F5F5F5; }
/*::-webkit-scrollbar-track:active { background: #F5F5F5; }*/
::-webkit-scrollbar-corner { background: transparent; }

/***************************************************************************** THEME */
.switch { position: relative; display: inline-block; width: 50px; height: 25px; margin-bottom: 0; }
    .switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #2a2a2a; -webkit-transition: .4s; transition: .4s; }
    .slider:before { position: absolute; content: ""; height: 19px; width: 19px; left: 3px; bottom: 3px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input + .slider { background-color: #525252; }
input:checked + .slider { background-color: #00aeef; }
    input:checked + .slider:before { -webkit-transform: translateX(24px); -ms-transform: translateX(24px); transform: translateX(24px); }
/* Rounded sliders */
.slider.round { border-radius: 34px; }
    .slider.round:before { border-radius: 50%; }

@media (max-width:1023px) {
    input:checked + .slider { background: #00506d; }
}
/***************************************************************************** TERMS */
.collapse-box { border: 1px solid #888; border-radius: 6px; margin: 10px 0; }
.btn-collapse { width: 100%; border-radius: 0; margin: 0; text-align: left; border: 0; position: relative; padding: 7px 15px; background-color: #00aeef; border-top-left-radius: 6px; border-top-right-radius: 6px; }
.btn-collaps:hover { border-color: #00aeef; color: #fff;; }
.btn-collapse.collapsed:after { content: '+'; position: absolute; top: 0; bottom: 0; right: 10px; display: flex; justify-content: center; align-items: center; color: #00aeef; font-weight: bold; font-size: 21px; }
.btn-collapse.collapsed { background-color: transparent; }
.btn-collapse:not(collapsed):after { content: '-'; position: absolute; top: 0; bottom: 0; right: 10px; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: normal; font-size: 21px; }
.content.collapse { padding-left: 10px; padding-right: 10px; }
.content.collapsing { padding-left: 10px; padding-right: 10px; }

/***************************************************************************** ADMIN  */
#theme-contain-adminloginx { padding: 20px 15px; }
    #theme-contain-adminloginx input { padding: 5px 7px; border: 1px solid #666; margin: 5px auto; background-color: #fff; color: #000; }
    #theme-contain-adminloginx > p + table { max-width: 350px; margin: 0 auto; width: 90%; }
        #theme-contain-adminloginx > p + table > tbody > tr > td:nth-child(2) { padding-left: 10px; }
    #theme-contain-adminloginx table { border: 0 !important; }
        #theme-contain-adminloginx table td { border: 0 !important; }

/***************************************************************************** MENU */
#cssmenu > ul > li > a { border: 0; }
#cssmenu > ul > li.has-sub > a::after { display: none; }

#cssmenu > ul > li { float: none; }

@media (min-width:1024px) {
    #divMenu.modal { display: block !important; position: static; margin-left: 0; margin-right: auto; overflow: visible; }
    #divMenu .modal-dialog { width: auto; margin: auto; position: static; }

    #cssmenu { position: static; }
        #cssmenu > ul { display: flex; align-items: center; position: static; }
            #cssmenu > ul > li { position: static; }
                #cssmenu > ul > li > a { padding: 40px 15px !important; position: static; }
                #cssmenu > ul > li.active > a { color: #00aeef; }

                #cssmenu > ul > li:first-child { }

                #cssmenu > ul > li:hover > a { color: #00aeef; }

                #cssmenu > ul > li.has-sub > a::after { display: none; }
        #cssmenu ul ul { left: 0 !important; right: 0; position: absolute; z-index: 99; /*max-width: 1820px; */ margin: auto; display: flex; flex-wrap: wrap; opacity: 0; visibility: hidden; justify-content: center; }
        #cssmenu > ul > li:hover > ul, #cssmenu > ul > li > ul:hover { opacity: 1; visibility: visible; }
        #cssmenu ul ul:before { content: ''; position: absolute; top: -1px; bottom: -2px; left: 0; right: 0; width: 100vw; background: rgba(0,0,0,0.9); margin: auto; margin-left: 50%; transform: translateX(-50%); border-bottom: solid 2px #00aeef; border-top: 1px solid #353535; }
        /*#cssmenu ul ul:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; margin: auto;   width: 100%; border-bottom: solid 2px #00aeef; pointer-events: none; z-index: 2; }*/
        #cssmenu ul li:hover > ul > li { height: auto; }
        #cssmenu ul ul li { height: auto; z-index: 3; }
            #cssmenu ul ul li:hover { height: auto; }
            #cssmenu ul ul li a { width: auto; background-color: transparent; display: flex; justify-content: center; align-items: center; }
            #cssmenu ul ul li:hover > a { background: #191919; }
}

@media (max-width:1023px) {
    #menuContainer, #cssmenu { background: #191919; }
    #menuContainer { max-width: 280px; margin: 0; margin-left: auto; height: 100%; }
    .menubanner img { width: 100%; }

    #cssmenu { padding: 10px; }

        #cssmenu > ul::after, #cssmenu::after { display: none; }
        #cssmenu > ul > li { border-bottom: 1px solid #525252; }
            #cssmenu > ul > li > a { font-weight: bold; text-transform: capitalize; }

    .menuhead { display: flex; align-items: center; justify-content: space-between; background: #00aeef; padding: 5px 10px; }
        .menuhead .close { position: static; color: #fff; font-size: 32px; }
        .menuhead .menutheme { margin-right: 38px; }

    .modal-menu .modal-dialog { transform: translateX(280px) !important; transition: 0.35s; }
    .modal-menu.in .modal-dialog { transform: translateX(0) !important; }
}

@media (max-width:1200px) and (min-width:1024px) {
    #cssmenu > ul > li > a { font-size: 12px; padding: 40px 10px !important; }
}


/***************************************************************************** HEADER */
.headertop-wrapper { display: flex; justify-content: space-between; align-items: center; max-width: 1440px; margin: auto;}

.mylogo { max-width: 175px; width: 40vw; }

.hrb-container { display: flex; align-items: center; justify-content: right; justify-content: flex-end; }
.div-auth { display: flex; align-items: center; }

.btn-lr { display: block; padding: 0.6em 1em; border-radius: 6px; text-align: center; font-size: 0.9em; }
.btn-login { background: #191919; border: 1px solid #fff; color: #fff; margin-right: 5px; }
    .btn-login:hover { border-color: #00aeef; color: #00aeef; }
    .btn-login:focus { color: #fff; }
.btn-register { background: #ff0000; border: 1px solid #ff0000; color: #000; margin-right: 5px; }
    .btn-register:hover { background: #191919; }

.time { font-size: 0.9em; padding: 0; padding-bottom: 5px; }
    .time .d-flex { justify-content: flex-end; }
.time-box { padding: 5px 10px; position: relative; }

.mytimeflash { animation: flashing 2s step-end infinite; }

@keyframes flashing {
    0% { opacity: 1; }
    50% { opacity: 0; }
}



@media (min-width:1024px) {
    .divHeader { position: sticky; top: 0; background: #191919; z-index: 999; }

    .header-menu { margin-left: 0; margin-right: auto; }

    .btn-lr { min-width: 100px; }
}

@media (max-width:1023px) {
    .divHeader { position: sticky; top: 0; background: #191919; z-index: 999; }
    .modal-open .divHeader { position: static; }

    .btn-menu { }
        .btn-menu img { width: 35px; margin-right: 3px; }
}

@media (max-width:600px) {
    .btn-lr { padding: 0.5em 0.5em; }
}

/**language box**/
.auth-box .lang-main { color: #fff; font-size: 0.7em; padding: 6px 6px; cursor: pointer; }
.dropdownLanguage:hover { }
.auth-box .lang-main:active { }
.auth-box .lang-main img { width: 30px; }
.auth-box .lang-main .caret { margin-left: 5px; }
.language .dropdown-menu { background: rgba(0,0,0,0.8); min-width: 130px; color: #e49e24; }
.language .country { display: flex; align-content: center; padding: 5px 0; }
    .language .country img { width: 25px; margin-right: 10px; border-radius: 50%; }
    .language .country a:hover { color: #00aeef; }
    .language .country a { color: #fff; border-left: 2px solid rgba(0,0,0,0); display: block; padding: 5px; padding-left: 10px; }
        .language .country a.active { border-color: #00aeef; }

@media (max-width:1023px) {
    .auth-language { /* visibility: hidden; */ }
    body.modal-open .auth-language { /*opacity: 1; */ /*visibility: visible;*/ }
    .dropdown.language { /*position: fixed;*/ /* top: 0;*/ /*right: 0px;*/ /* z-index: 1051;*/ /* transform: translateX(280px);*/ /* transition: transform .35s ease; */ /*opacity: 1;*/ }
    .dropdownLanguage { /*float: right;*/ }
    .dropdown-menu { /* left: auto;*/ /* right: 0;*/ margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
    body.modal-open .dropdownLanguage:hover { background: #1a1a1b; }
    body.modal-open .dropdown.language { /*opacity: 1; */ /*transform: translateX(0);*/ }
}

#header-lang { padding: 6px; cursor: pointer; transition: transform 0.25s ease-in-out; }
    #header-lang:hover { transform: scale(1.1); }
    #header-lang img { width: 30px; }

.modal-lang .modal-dialog { background-color: #2a2a2a; border-radius: 20px; padding: 15px; max-width: 400px; }
.lang-title { text-align: center; margin-top: 15px; padding-top: 10px; }
    .lang-title h3 { margin-top: 0; }

.lang-area { margin-top: 40px; padding: 0 40px; }
.lang-box { display: flex; align-items: center; margin-bottom: 20px; }
    .lang-box .lang-img { margin-right: 10px; }
        .lang-box .lang-img img { width: 35px; border-radius: 50%; border: 1px solid #fff; padding: 2px; }
    .lang-box a { font-size: 18px; cursor: pointer; }
        .lang-box a.active { color: #00aeef; text-decoration: underline; }
        .lang-box a:hover { text-decoration: underline; }

/***************************************************************************** FOOTER */
.footer-container { background: #2a2a2a; font-size: 0.9em; padding-top: 10px; }


.fb-top { display: flex; justify-content: space-between; align-items: center; }
.footer-wrapper { padding: 20px 0; color: #fff; }
    .footer-wrapper img { margin-right: 10px; margin-bottom: 10px; height: 30px; /*filter: grayscale(2);*/ /*transition: filter 0.2s ease-in-out;*/ /* opacity: 0.5; */ }
        .footer-wrapper img:hover { /*filter: grayscale(0); */ /*opacity: 1; */ }
    .footer-wrapper p { margin-bottom: 20px; margin-top: 10px; }

.footer-bottom { border-top: 1px solid #444; margin-top: 30px; }

.fb-qlink ul { display: flex; margin: 0; }
.fb-qlink li { list-style-type: none; }
.fb-qlink a { display: block; padding: 10px; color: #666; }
    .fb-qlink a:hover { color: #aaa; }
.fb-qlink > ul > li:first-child > a { padding-left: 0; }

.fb-copyright { color: #555; }

.fb-content { padding: 20px 0 10px; color: #555; }
    .fb-content b { color: #555; font-size: 1.1em; }
    .fb-content p { margin-top: 0.5em; margin-bottom: 1em; text-align: justify; }
.fbc-top { }
.fbc-text { display: none; }
.btn-fc { background-color: transparent; padding: 8px 15px; color: #ffd800; padding-left: 0; text-decoration: underline; }

.fbc-text { line-height: 1.2em; }
    .fbc-text ul { margin: 0; width: 20%; padding: 0 10px; }
        .fbc-text ul:first-child { padding-left: 0; }
        .fbc-text ul:last-child { padding-right: 0; }
        .fbc-text ul li { list-style-type: none; }
    .fbc-text b { }
.fbctwrapper { display: flex; }


@media (min-width:768px) {
    .footer-wrapper { display: flex; }
        .footer-wrapper .f-flex { width: 33.33%; }
            .footer-wrapper .f-flex:first-child { padding-right: 20px; padding-left: 10px; }
            .footer-wrapper .f-flex:nth-child(2) { padding: 0 20px; }
            .footer-wrapper .f-flex:last-child { padding-left: 20px; padding-right: 10px; }

    .footer-bottom { padding: 20px 0 40px; }

    .footer-wrapper img { height: 40px; }
}

@media (max-width:1023px) {

    .footer-wrapper { padding: 0 15px; }
}

@media (max-width:767px) {
    .fb-qlink, .fb-content { display: none; }
    .fb-copyright { text-align: center; font-size: 10px; padding: 20px 0 40px; width: 100%; }
}


/***************************************************************************** LOGIN */
.mlr-top { text-align: center; margin-top: 15px; }
.modal-login button.close, .modal-lang button.close { background: #00aeef; width: 40px; height: 40px; border-radius: 50%; font-size: 32px; line-height: 0px; font-weight: bold; margin-right: 5px; }
.customform { padding: 10px; max-width: 450px; margin: 30px auto 0; }
    .customform dl { margin-bottom: 10px; }
    .customform dd { text-align: center; display: flex; align-items: center; }
    .customform i { padding-left: 15px; padding-right: 15px; position: relative; }
        .customform i:after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 40px; height: 40px; margin: auto; background: #525252; border-radius: 50%; }
        .customform i img { width: 22px; position: relative; z-index: 2; }
    .customform input { width: 100%; text-align: left; padding: 10px 15px; margin: 5px 0; color: #fff; border: 1px solid rgba(0,0,0,0.2); border-radius: 6px; background: #525252; font-size: 1em; }
#customform_UserName { }
#customform_Password { }
#customform_UserName, #customform_Password { }
#customform_submit { background: #00aeef; color: #000; display: table; margin-left: auto; margin-right: 0; width: auto; text-transform: uppercase; font-weight: bold; }
    #customform_submit:hover { background: #0d92c3; }
    #customform_submit:active { }
.customform dl:nth-child(7) dd { display: flex; border: 0; }

.modal-login .modal-dialog { background-color: #2a2a2a; border-radius: 20px; padding: 15px; }
.login-title { text-align: center; }


.login-bottom { margin-top: 25px; text-align: center; color: #757575; }
body #divBody .login-bottom a { color: #00aeef !important; }
.login-bottom a:hover { text-decoration: underline; }

.login-cs { border-top: 3px solid #444; margin: 20px; padding-top: 20px; }

.modal-login .modal-dialog { transform: translateY(-100px) !important; transition: 0.35s; }
.modal-login.in .modal-dialog { transform: translateY(0) !important; }


@media (max-width:699px) {
    .modal-login .modal-dialog { border-radius: 0; padding: 0; margin: 0; height: 100%; background-color: #191919; }
    .modal-login button.close { float: none; width: 100%; height: auto; border-radius: 0; line-height: normal; text-align: right; padding: 5px; }
        .modal-login button.close span { color: #00aeef; background: #2a2a2a; border-radius: 50%; width: 40px; height: 40px; display: table; text-align: center; margin-left: auto; }
    .customform i { display: none; }

    .customform { width: 80%; }
    #customform_submit { width: 100%; text-align: center; margin-top: 40px; }
}

#theme-contain-login .div-login { max-width: 500px; width: 90%; margin: 30px auto; background-color: rgba(50,50,50,0.5); border: 2px solid #2c2c2c; border-radius: 15px; padding: 15px; }

#theme-contain-login { background-image: url('/data/2096/uploads/bg-01.png'); overflow: hidden; }

/***************************************************************************** REGISTER */
#theme-contain-registration { background-image: url('/data/2096/uploads/bg-01.png'); overflow: hidden; }

.modal-register .modal-dialog { max-width: 800px; width: 100%; }
.register { max-width: 1000px; margin: 30px auto; background-color: rgba(50,50,50,0.5); border: 2px solid #2c2c2c; border-radius: 15px; padding: 15px; }

.register-form { }

#registerform { width: 100%; padding: 0px 40px; display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; }
    #registerform dl { margin: 15px auto; width: 100%; flex: 1 1 100%; }
    #registerform dt { width: 100%; color: #808a9e; font-size: 12px; margin-bottom: 5px; font-weight: normal; }
    #registerform dd { position: relative; }
    #registerform textarea, #registerform input[type=text], #registerform input[type=password], #registerform input[type=email], #registerform select { width: 100%; color: #000; font-size: 14px; padding: 10px 10px; background-color: #fff; padding-left: 20px; border: 1px solid #aaa; border-radius: 6px; }
        #registerform textarea:focus, #registerform input[type=text]:focus, #registerform input[type=password]:focus { border-color: #e5ba5d; }

#groupUsername dd { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
    #groupUsername dd #registerform_UserName { width: auto; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
    #groupUsername dd #registerform_UserNameMsg { width: 100%; color: #e5ba5d; }
#groupUsername .icnR { top: 5px; }
#registerform input.btnCheckUser { margin-top: 0; margin-bottom: 0; /*margin-left: 15px;*/ padding: 10px 20px; /*max-width: calc(40% - 15px);*/ font-size: 12px; cursor: pointer; margin-left: 10px; background: transparent; border-radius: 50px; background: #00aeef; }
#registerform #registerform_varifycode { width: calc(100% - 115px); float: left; }
#registerform .btnCheckUser, #registerform_btnSubmit { }
    #registerform .btnCheckUser:hover, #registerform_btnSubmit:hover { }
    #registerform .btnCheckUser:active, #registerform_btnSubmit:active { }
#groupSubmit { text-align: center; }
#registerform_btnSubmit { padding: 15px 75px; cursor: pointer; border-radius: 15px; background: #00aeef; }
#registerform:after { font-size: 10px; color: #fff; }
#groupVerifyCode dd:last-child { position: static; }
#groupVerifyCode img { margin-left: 15px; }


.small { font-size: 12px; }
.w3-text-red { color: #ff5858; }
.divRegister-box { background-color: #fff; }

.img-register { overflow: hidden; }
.register-box-wrapper > .right { }
.register-logo { position: absolute; bottom: 15px; left: 0; right: 0; margin: auto; z-index: 9; }
    .register-logo img { height: 100px; display: block; margin: auto; }

#registerform_FullNameDescription { color: #ff5858; padding-top: 5px; }

@media screen and (max-width: 1024px) {
    #registerform { padding: 0 25px 25px; }
}

@media screen and (min-width: 768px) {
    #groupPassword, #groupComfirmPassword, #groupMobileNumber, #groupCurrency, #groupVerifyCode, #groupReferralCode, #groupAffiliate { flex: 1 1 50%; max-width: 50%; }
    #groupPassword, #groupCurrency, #groupAffiliate { padding-right: 15px; }
    #groupComfirmPassword, #groupMobileNumber, #groupReferralCode, #groupVerifyCode { padding-left: 15px; }
}

@media screen and (min-width: 767px) {
    .imgRegister-window { margin-left: 50%; transform: translateX(-50%); }
    .note { font-size: 11px; width: 550px; }
    .small { font-size: 11px; }
}

@media screen and (max-width: 766px) {
    .modal-register .modal-content { border: 0; border-radius: 0; }
    .registration-wrapper { padding: 0; }
    .divRegister-box { padding: 0; }
    .register-box-wrapper { border-radius: 0; }
    .register-logo { top: auto; left: 10px; right: auto; }
        .register-logo img { height: 50px; }
    .div-register { border-radius: 0; margin: 0; }
}

@media screen and (max-width: 768px) and (min-width:608px) {
    #registerform { flex-wrap: wrap; flex-direction: row; }
    #registerform_btnSubmit { padding: 15px 35px; }
    .note { position: absolute; width: 535px; font-size: 11px; }
    .small { font-size: 11px; }
}

@media screen and (max-width: 766px) {
    #registerform { }
        #registerform .btnCheckUser { font-size: 3vw; }
    #registerform_btnSubmit { margin: 25px auto 0; width: 100%; padding-left: 0; padding-right: 0; }
    #groupUsername dd #registerform_UserName { width: 100%; }
    #groupPassword { position: relative; }
    #registerform_Password:focus { margin-bottom: 37px; }
        #registerform_Password:focus + .note { display: block; margin-top: -37px; }
    #registerform input.btnCheckUser { font-size: 10px; }
    .register-logo { display: none; }
}

/***************************************************************************** PROMOTION */
#promotion-filter { background-color: #2a2a2a; padding: 20px 0; }
#myBtnContainer { max-width: 1200px; border-radius: 50px; background: #777; margin: auto; display: flex; align-items: center; justify-content: space-around; }
    #myBtnContainer a { width: 100%; border-radius: 50px; color: #fff !important; }
        #myBtnContainer a:not(.active):hover { color: #00aeef; }
        #myBtnContainer a.active { background: #00aeef; }

@media (max-width:767px) {
    #myBtnContainer { overflow-x: auto; justify-content: initial; border-radius: 0; background: #3a3a3a; }
        #myBtnContainer::-webkit-scrollbar { height: 0; }
}

#prmotion-faq { max-width: 1440px; margin: auto; padding: 20px 0; }
#faq_modal { margin: 0; }
    #faq_modal li { list-style-type: none; margin-bottom: 20px; }
    #faq_modal > li { padding: 0; overflow: hidden; }
.filterDiv { display: none; overflow: hidden; padding-bottom: 20px; }
    .filterDiv img { width: 100%; border-radius: 10px; }
    .filterDiv .promo-tit { font-size: 1.1em; font-weight: bold; margin-bottom: 10px; }
    .filterDiv p { font-size: 0.85em; }
    .filterDiv a { color: #fff !important; }
    .filterDiv .col-sm-4 { }
    .filterDiv > .contentpromo { }

.promo-bluebut, .promo-orenbut { margin: 5px 10px 5px 0px; padding: 5px 12px; text-transform: uppercase; border-radius: 3px; font-weight: bold; font-size: 0.8em; display: inline-block; margin-top: 2em; }
.promo-bluebut { border: 1px solid #fff; color: #fff; }
.promo-orenbut { border: 1px solid #00aeef; color: #2a2a2a; background: #00aeef; }

@media (min-width:768px) and (max-width:1023px) {
    .filterDiv .col-sm-4 { width: 60%; }
    .filterDiv .col-sm-8 { width: 40%; }
}

@media (max-width:767px) {
    .filterDiv { background: #525252; border-radius: 10px; }
    #faq_modal li { padding-top: 0; padding-left: 15px; padding-right: 15px; }
    .filterDiv .col-sm-4 { padding: 0; }
    .filterDiv .col-sm-8 { padding-bottom: 15px; padding-top: 15px; }
}

#faq_fbinner { background: #2a2a2a; color: #fff !important; padding: 0 15px 30px; max-width: 1200px; }
    #faq_fbinner > div { padding: 0 15px 30px; }
    #faq_fbinner .filterDiv { margin: 0 auto; overflow: hidden; max-width: 400px; }
        #faq_fbinner .filterDiv .col-sm-4, #faq_fbinner .filterDiv .col-sm-8 { width: 100%; }

    #faq_fbinner .promo-tit, #faq_fbinner .sDetail { display: none; }

    #faq_fbinner h1 { padding-top: 15px; font-size: 28px; }
    #faq_fbinner h3 { font-size: 16px; color: #fff; font-weight: normal; }
    #faq_fbinner h4 { font-size: 18px; font-weight: normal; }

@media (max-width:767px) {
    #faq_fbinner { padding: 0; }
        #faq_fbinner .filterDiv { padding-bottom: 0; }
            #faq_fbinner .filterDiv .col-sm-8 { display: none; }
    #faq_modal > li .filterDiv .col-sm-4 { padding: 10px; }
    #faq_modal > li { padding-bottom: 20px; }
}

/***************************************************************************** BODY */
.divBanner img { width: 100%; }
.flexslider { margin: 0; border: 0; }
.flex-direction-nav { height: 0; }


.title-box { display: flex; justify-content: space-between; align-items: center; }
.title-box .title img { max-height:50px; margin-left: 10px; }

@media (min-width:1024px) {
    .title-box .title {  }
}


.announce-box { background-color: #2a2a2a; }
.announce-container { font-size: 0.8em; display: flex; align-items: center; justify-content: center; max-width: 1440px; width: 100%; margin: auto; }
.announce-icn { padding: 5px 10px; white-space: nowrap; }
    .announce-icn img { width: 20px; margin-right: 5px; }
.announce-scroll { display: flex; align-items: center; width: 100%; }
#horizontal-scrolling-msg { }
    #horizontal-scrolling-msg ul { margin: 0; }
        #horizontal-scrolling-msg ul li { margin-right: 20px; list-style-type: none; color: #fff; }

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

@media screen and (max-width:600px) {
    .announce-icn { min-width: 50px; }
    .announce-scroll { width: calc(100% - 50px); }
    .home-box.announce-box { margin-left: 0; margin-right: 0; }
    .announce-container { border-radius: 0; overflow: hidden; width: 100%; }
}

/**************************************************************************** home */
.hvideo-container { padding: 10px; }
.hv-bg { position: relative; overflow: hidden; width: 100%; padding-bottom: 56.13%; }
    .hv-bg iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100%; height: 100%; border-radius: 15px; }
.hv-img { position: relative; width: 100%; }
    .hv-img img { width: 100%; border-radius: 10px; }

.home-contact { padding: 10px; color: #fff !important; }
    .home-contact a { color: #fff !important; }
.hcontact-box { background-color: #2a2a2a; border-radius: 15px; padding: 15px 10px; display: flex; align-items: center; white-space: nowrap; font-size: 0.8em; }
.cdcontainer { padding: 10px; }

.hc-list { width: 100%; }
    .hc-list ul { margin: 0; display: flex; justify-content: space-around; align-items: center; }
    .hc-list li { list-style-type: none; padding: 0; }
        .hc-list li a { display: flex; justify-content: center; align-items: center; }
    .hc-list .hc-img { border-radius: 50px; background-color: #3f3f3f; padding: 10px; margin-right: 10px; }
    .hc-list img { width: 20px; }
    .hc-list span { display: block; color: #fff !important; }
    .hc-list b { color: #fff !important; }

.hcontact-title { padding: 0 10px; }
    .hcontact-title b { font-size: 1.5em; }
    .hcontact-title span { display: block; font-size: 0.9em; }

@media (max-width:1023px) {
    .hvideo-container { padding: 0; }
        .hvideo-container .title { padding-left: 10px; margin-top: 20px; }
    .hv-bg { background-color: #2a2a2a; }
        .hv-bg iframe { width: 95%; height: 95%; }
    .hv-img { background-color: #2a2a2a; padding: 10px; }
    .home-contact { padding: 0; }
    .hcontact-box { border-radius: 0; padding-bottom: 20px; padding-top: 10px; }
    .hcontact-title { display: none; }
}

@media (max-width:699px) {
    .hv-bg iframe { width: 90%; height: 90%; }
    .hc-list { font-size: 10px; }
        .hc-list .hc-img { padding: 7px; margin-right: 7px; }
}


@media (min-width:1200px) {
    .home-coll { display: block; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(5, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; max-width: 1440px; margin: 20px auto; width: 100%; }

    .home-top {grid-area: 1 / 7 / 3 / 13;}
    .home-cat {grid-area: 4 / 1 / 6 / 13;margin: auto;}
    .home-video {grid-area: 1 / 1 / 4 / 7;}
    .home-contact {grid-area: 3 / 7 / 4 / 13;}
}

@media (max-width:1200px) and (min-width:1024px) {
    .home-coll {display: grid;grid-template-columns: repeat(12, 1fr);grid-template-rows: repeat(6, 1fr);grid-column-gap: 0px;grid-row-gap: 0px;max-width: 1440px;margin: 20px auto;width: 100%;}



    .home-top {grid-area: 1 / 7 / 3 / 13;}
    .home-cat {grid-area: 4 / 1 / 7 / 13;margin: auto;}
    .home-video {grid-area: 1 / 1 / 4 / 7;}
    .home-contact {grid-area: 3 / 7 / 4 / 13;}
}

.home-ad-container { position: relative; }
.img-ad { width: 100%; }
.ad-cover { position: absolute; left: 8%; bottom: 15%; width: 55%; right: 0; display: flex; align-items: center; }
.btn-ad { display: block; overflow: hidden; border-radius: 10px; margin: 10px; border: 1px solid #efefef; cursor: pointer; transition: transform 0.2s ease-in-out; }
    .btn-ad:hover { transform: scale(0.95); }
    .btn-ad img { width: 100%; }

@media (max-width:600px) {
    .btn-ad { border-radius: 5px; margin: 3px; }
}

/**************************************************************************** home sport list */
@media (min-width:1024px) {
    .hglist-containter { /* overflow-x: auto;*/ /* height: 95%; */ /*overflow-y: hidden; */ margin-top: 0; margin-bottom: 20px; margin-left: 10px; margin-right: 10px; position: relative; }
        .hglist-containter::-webkit-scrollbar-track { background: transparent; }

        .hglist-containter ul { margin: 0; display: flex; flex-wrap: nowrap; height: 98%; }
        .hglist-containter li { list-style-type: none; min-width: 50%; height: 100%; padding: 10px; }
        .hglist-containter a { display: block; background-position: center; background-size: 100% 100%; position: relative; background-repeat: no-repeat; background-color: #1a1a1a; height: 100%; border-radius: 10px; overflow: hidden; }
            .hglist-containter a img { width: 100%; }
        .hglist-containter .catdetail h5 { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to bottom, rgba(255,255,255,0), #00aeef); margin: 0; padding: 15px; color: #fff; text-align: left; font-weight: bold; transition: 0.15s ease-in-out; font-size: 20px; }
}

.s-btn.swiper-button-prev { left: 0px; bottom: 0; }
.s-btn.swiper-button-next { right: 0px; bottom: 0; }

@media (max-width:1023px) {
    .home-top { display: none !important; }
}

/**************************************************************************** home category */
.homelivetv .btn-blue { font-size: 14px; }

.cat-tabs ul { margin: 0; padding-bottom: 10px; }
.cat-tabs li { list-style-type: none; padding: 6px 10px; }
.btn-cat { background: #2a2a2a00; border-radius: 8px; display: block; padding: 12px 5px; text-align: center; color: #fff; width: 100%;background-image: url();background-position: center;background-size: cover;background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #00aeef); }
    .btn-cat.active { color: #ffffff;; background: #ff000000;font-weight: bold; background-image: url();background-position: center;background-size: cover; }

.cat-box .catlist { overflow-x: auto; scroll-snap-type: x mandatory; }
    .cat-box .catlist::-webkit-scrollbar { height: 0; }
    .cat-box .catlist ul { margin: 0; display: flex; flex-wrap: wrap; flex-direction: column; height: 280px; padding-right: 10px; }
    .cat-box .catlist li { list-style-type: none; width: 60vw; flex: 1 1 50%; padding: 5px; min-width: 250px; }
.cat-box .catl-box { background-size: auto 100%; background-position: center; background-repeat: no-repeat; height: 130px; overflow: hidden; }
.catl-box { position: relative; border-radius: 8px; }
.catdetail { }
.catl-box img { width: 100%; }
.catdetail h5 {text-align: left; font-family: 'Montserrat', sans-serif; font-size: medium; font-weight: 800; background: linear-gradient(to bottom, rgba(0,0,0,0), #00aeef); position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 10px 10px; color: #fff; margin: 0;}
.cl-logo { position: absolute; bottom: 5px; right: 5px; padding: 5px; border-radius: 100px; background-color: #2a2a2a; z-index: 3; display: none; }
    .cl-logo img { width: 30px; }

[data-cat="sport"] .catlist ul { height: 140px; }
[data-cat="sport"] .catlist li { flex: auto; }
[data-cat="sport"] .catlist .catl-box { height: 130px; display: block; }

@media (min-width:1024px) {
    .home-cat .cat-tabs { display: none !important; }
    .home-cat [data-cat="sport"].catboxes { display: block !important; }
    .home-cat .catboxes { display: none !important; }
    .home-cat .cat-sport-top { display: none !important; }
    .home-cat .homelivetv { display: block !important; }
}

@media (max-width:1023px) and (min-width:768px) {
    .cat-box .catlist li { width: 45vw; max-width: 310px; }

    .home-cat #api-leaguefeed .brick { padding-top: 0 !important; padding-bottom: 10px !important; }
}

@media (max-width:1023px) {
    .home-cat { margin: 20px 0 0; }
    .homec-wrapper {display: flex;
        align-items: stretch;
        background-image: url();
        background-size: cover;}
    .cat-tabs { flex-basis: 20%; }
    .cat-container { flex-basis: 80%; overflow: hidden; position: relative; }

    .homelivetv #api-leaguefeed .brick { margin: 0; margin-right: 10px; padding-top: 0; }
    .homelivetv #api-leaguefeed #versus { padding: 10px 0; margin-bottom: 5px; }


    .title-box .title h5 { font-size: 11px; }
    .homelivetv .btn-blue { font-size: 11px; display: block; padding-right: 10px; }

    .catboxes { display: none; }
        .catboxes.active { display: block; }
}

@media (min-width:1024px) {
    .btn-catmin { display: none; }
}

@media (max-width:1023px) {
    .tabs-hide { display: none !important; }

    .cate-box { padding-right: 5px; padding-bottom: 20px; }
        .cate-box .catlist ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-item: center; }
        .cate-box .catlist li { list-style-type: none; width: 25%; padding: 3px 0px; max-width: 25%; }
        .cate-box .catlist .catl-box { margin: 3px; border-radius: 6px; border: 1px solid #666; background: #2a2a2a; text-align: center; padding-top: 5px; height: 100%; display: block; }
            .cate-box .catlist .catl-box img { width: 80%; }
            .cate-box .catlist .catl-box h5 { color: #fff !important; font-size: 7px; margin-top: 0px; padding: 0 5px; }

        .cate-box.min { height: 340px; overflow: hidden; padding-bottom: 0; }

    .btn-catmin { background: linear-gradient(to bottom, rgba(0,0,0,0),#191717); padding: 15px; text-align: center; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; z-index: 2; }
        .btn-catmin img { width: 20px; }
}

@media (max-width:400px) {
    .cate-box .catlist .catl-box h5 { font-size: 2.5vw; }
}

/**************************************************************************** home games swiper */
.game-swip { margin-bottom: 30px; margin-top: 30px; }
    .game-swip .title-box h5 { padding-left: 10px; }
.gameswip-cont { position: relative; }
.games-swiper { }
    .games-swiper img { border-radius: 10px; margin-bottom: 10px; width: 100%; }
    .games-swiper p { color: #666; margin-top: 5px; margin-bottom: 20px; }
    .games-swiper .swiper-slide { padding: 5px; }

.swiper-button-prev, .swiper-button-next { position: absolute; top: 0; bottom: 40px; margin: auto; width: 40px; height: 40px; border-radius: 50%; padding: 10px; background: #444; cursor: pointer; background-size: auto 20px; background-repeat: no-repeat; background-position: center; }
.games-btn.swiper-button-prev { left: -40px; }
.games-btn.swiper-button-next { right: -40px; }

@media (min-width:1024px) {
    .games-swiper { width: 98%; margin: auto; }

    .game-swip .title-box h5 { font-size: 22px; font-weight: bold; }
}

@media (max-width: 1550px) and (min-width: 1024px) {
    .gameswip-cont { max-width: 90vw; margin: auto; }
}

@media (max-width:1023px) {
    .games-btn { display: none; }
}

@media (max-width:550px) {
    .gameswip-cont { padding: 10px; padding-right: 0; }
}
/**************************************************************************** live tv */
.homelivetv .btn-blue { margin-left: auto; }
.homelivetv .container { width: auto !important; padding: 0; }
.homelivetv #api-leaguefeed .brick:nth-child(n+10) { display: none !important; }

#api-leaguefeed { display: flex !important; flex-wrap: wrap; height: auto !important; }
    #api-leaguefeed ul { margin: 0; }
        #api-leaguefeed ul li { list-style-type: none; }

    #api-leaguefeed .brick { width: 31.33% !important; margin: 1%; position: static !important; height: auto !important; background-image: url(); border-radius: 10px; padding: 0.9em 1.2em 1.5em; background-color: darkslategray;background-position: center; background-size: cover;}
        #api-leaguefeed .brick > ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; height: 100%; width: 100%; }
            #api-leaguefeed .brick > ul > li:nth-child(1) { order: 2; }
            #api-leaguefeed .brick > ul > li:nth-child(2) { order: 1; }
            #api-leaguefeed .brick > ul > li:nth-child(3) { order: 3; }

    #api-leaguefeed #playtime { font-size: 0.8em; background: rgba(255,255,255,0.1) !important; border-radius: 50px; padding: 10px 12px !important; margin-right: 10px; white-space: nowrap; color: #fff; }
        #api-leaguefeed #playtime br { content: ' '; padding-left: 10px; }

    #api-leaguefeed #versus { display: flex; align-items: center; justify-content: space-between; margin-left: 15px !important; margin-right: 15px !important; border-bottom: 1px solid rgba(255,255,255,0.2); width: 100%; margin-bottom: 1em; font-size: 1em !important; padding-bottom: 20px; text-align: center; margin-top: 0.5em; }
        #api-leaguefeed #versus div { padding-left: 10px; padding-right: 10px; color: #fff !important; }
            #api-leaguefeed #versus div:nth-child(2) { position: relative; font-size: 0.9em !important; color: #000 !important; z-index: 2; }
                #api-leaguefeed #versus div:nth-child(2):after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 30px; height: 30px; background: #f8da64; z-index: -1; border-radius: 50%; }

    #api-leaguefeed #livetv { padding: 0; font-size: 0.8em; }
        #api-leaguefeed #livetv a { text-transform: uppercase; border-radius: 50px !important; background: #00aeef !important; padding: 8px 15px !important; display: block; }
            #api-leaguefeed #livetv a:visited { background: #ff0000 !important; }


/*.homelivetv { overflow-x: scroll; }*/
.homelivetv .lvscr::-webkit-scrollbar { height: 0; }

@media (min-width:1024px) {
    .btn-hltv { position: absolute; top: 0; bottom: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%; padding: 10px; background: #444; cursor: pointer; }
        .btn-hltv img { width: 20px; }
    .hltvleft { left: -40px; }
    .htvright { right: -40px; }
    .hltv-container { position: relative; }
    .homelivetv .lvscr { margin: 0; overflow-x: scroll; }
    .homelivetv #api-leaguefeed { display: flex !important; flex-wrap: nowrap; }
        .homelivetv #api-leaguefeed .brick { min-width: 31.33% !important; }

    #api-leaguefeed #livetv a, #api-leaguefeed #livetv a:visited { background: #ff0000 !important; color: #fff !important; }
        #api-leaguefeed #livetv a:hover { background: #ff4a4a !important; color: #fff !important; }
}

@media (max-width:1550px) and (min-width:1024px) {
    .homelivetv { max-width: 90vw; margin: auto; }
}

@media (max-width:1023px) {
    #theme-contain-live-tv #api-leaguefeed .brick { width: 48% !important; }

    .homelivetv #api-leaguefeed .brick { font-size: 12px; }


    .homelivetv #api-leaguefeed { display: flex !important; flex-wrap: nowrap; }
        .homelivetv #api-leaguefeed .brick { min-width: 300px !important; width: 80%; }

    .btn-hltv { display: none; }
    .homelivetv .lvscr { margin: 0; overflow-x: scroll; scroll-snap-type: x mandatory; }
}

@media (max-width:600px) {

    .homelivetv #api-leaguefeed .brick { font-size: 10px; }
    #api-leaguefeed #playtime, #api-leaguefeed #livetv { font-size: 0.8em; }
        #api-leaguefeed #playtime, #api-leaguefeed #livetv a { padding: 0.8em 1.2em !important; }
    .homelivetv #api-leaguefeed .brick { min-width: 25em !important; }
}

@media (max-width:550px) {
    #theme-contain-live-tv #api-leaguefeed .brick { width: 98% !important; }
}
/**************************************************************************** gamelist */
.gamelist-box { max-width: 1200px; margin: auto; padding: 20px 10px; }
.gamelist { margin: 0; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; }



.btn-plogo { background: linear-gradient(to bottom, #181818, #202020); border-radius: 10px; border: 1px solid #3a3a3a; margin: 10px; max-width: 100px; transition: max-width 0.3s ease-in-out; max-width: 100px; min-width: 60px; min-height: 60px; }
    .btn-plogo .plogo { display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; }
    .btn-plogo .plogo-fav { /*filter: grayscale(2);*/ height: 100px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; opacity: 0.7; max-height: 100px; min-height: 60px; transition: 0.35s ease-in; transition-delay: 0.1s; }
    .btn-plogo .plogo-o { height: 100px; max-height: 100px; min-height: 60px; transition: 0.35s ease-in; margin: auto; opacity: 0; }


    .btn-plogo.active { border-color: #00aeef; background: linear-gradient(to bottom, #202020, #3a3a3a); }
        .btn-plogo.active .plogo-fav { filter: none; opacity: 1; }


.breaker { display: none; }

@media (min-width:1024px) {
    .btn-plogo:hover { max-width: 200px; }
        .btn-plogo:hover .plogo-fav { opacity: 0; transition-delay: 0s; transition: 0s; }
        .btn-plogo:hover .plogo { background-image: none !important; }
        .btn-plogo:hover .plogo-o { opacity: 1; }
}

@media (min-width:1200px) {
    .breaker:nth-child(9n) { display: block; width: 100%; height: 0; margin: 0; }
}

@media (max-width:1200px) and (min-width:1024px) {
    .breaker:nth-child(7n) { display: block; width: 100%; height: 0; margin: 0; }
}


@media (max-width:1023px) {
    .mydivBanner { overflow: hidden; }
    .myBanner { width: auto !important; height: 40vw; min-height: 150px; max-height: 400px; margin-left: 50%; transform: translateX(-50%); }


    .btn-plogo { width: 10vw; margin: 5px; }
        .btn-plogo .plogo-fav { height: 10vw; }
        .btn-plogo .plogo-o { height: 10vw; }
}
/**************************************************************************** sportsbook */
@media (min-width:1024px) {
    .sport-col { display: flex; }
    .sport-video { width: 45%; order: 1; }
    .sport-top { width: 55%; order: 2; }
}

@media (max-width:1023px) {
    .sportlivetv { padding: 10px; }
    .sport-top { display: none; }
}

.sportlivetv { margin-top: 10px; margin-bottom: 30px; }

/**************************************************************************** lottery */
.lottotable-wrapper { max-width: 1440px; margin: auto; display: flex; }
.lotto-table { padding: 15px; }
    .lotto-table h5 { text-align: center; color: #fff; font-weight: bold; }
    .lotto-table table { text-align: center; }
    .lotto-table thead tr { background: #00aeef; color: #fff; font-weight: bold; }
        .lotto-table thead tr td { padding: 12px; }
        .lotto-table thead tr > td:first-child { border-radius: 10px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
        .lotto-table thead tr > td:last-child { border-radius: 10px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
    .lotto-table tbody tr { border-bottom: 1px solid #666; }
        .lotto-table tbody tr > td:first-child { color: #00aeef; }
    .lotto-table tbody td { padding: 25px 12px; }


@media (min-width:768px) {

    .lotto-table { width: 100%; }
}

@media (max-width:1023px) {

    .lottotable-container { overflow-x: auto; margin-bottom: 20px; font-size: 12px; }
    .lottotable-wrapper { flex-wrap: nowrap; }
    .lotto-table h5 { height: 30px; text-align: center;}


    .lotto-table thead tr td { padding: 8px; }
    .lotto-table tbody td { padding: 15px 8px; }
}

.lottery-new .btn { padding: 0px; }

.lottery-new .btn-primary:hover { color: #fff; background-color: #2caffc; border-color: #24b9fc; }
.lottery-new .btn:hover { box-shadow: 0px 3px 5px rgb(46 46 46); transform: translateY(-3px); }

.lottery-new button { margin: 17px; background-color: #1ac8fd; text-transform: uppercase; }

.panel-heading { font-size: 15px; }
.lottery-new .panel-heading { color: #fff; border: 0px solid red; }

.panel-body { padding: 0; color: #fff; font-size: 15px; min-height: 425px; }
    .panel-body .logo { padding: 10px 0; }
        .panel-body .logo .col-sm-4 { margin-left: 9px; width: 29%; border: 0px solid red; }

#Magnumimg { background: url(/data/1782/uploads/4D_magnum.png) left no-repeat #383838; height: 50px; width: 85px; }
#PMPimg { background: url(/data/1782/uploads/4D_damacai.png) left no-repeat; height: 50px; width: 85px; }
#Totoimg { background: url(/data/1782/uploads/4D_toto.png) left no-repeat; height: 50px; width: 85px; }
#Singaporeimg { background: url(/data/1782/uploads/4D_sgpool.png) left no-repeat; height: 50px; width: 85px; }
#Sabahimg { background: url(/data/1782/uploads/4D_sabah88.png) left no-repeat; height: 50px; width: 85px; }
#Sandakanimg { background: url(/data/1782/uploads/4D_stc.png) left no-repeat; height: 50px; width: 85px; }
#Sarawakimg { background: url(/data/1782/uploads/4D_cashsweep.png) left no-repeat; height: 50px; width: 85px; }
#GDLottoimg { background: url(/data/1782/uploads/4D_gdlotto.png) left no-repeat; height: 50px; width: 85px; }
#Perdanaimg { background: url(/data/1782/uploads/4D_perdana.png) left no-repeat; height: 50px; width: 85px; }
#LuckyHari-Hariimg { background: url(/data/1782/uploads/4D_luckyharihari.png) left no-repeat; height: 50px; width: 85px; }
#GOOD4Dimg { background: url(/data/1782/uploads/4D_good4d.png) left no-repeat; height: 50px; width: 85px; }

#THV88 { display: none; }

#Magnum .panel-heading,
#Magnum .logo { background: #f2bc00; color: #000 !important; }
#PMP .panel-heading,
#PMP .logo { background: #148ea4; }
#Toto .panel-heading,
#Toto .logo { background: #dd0000; }
#Singapore .panel-heading,
#Singapore .logo { background: #12689a; }
#Sabah .panel-heading,
#Sabah .logo { background: #eee; color: #000 !important; }
#Sandakan .panel-heading,
#Sandakan .logo { background: #2f9405; }
#Sarawak .panel-heading,
#Sarawak .logo { background: #094405; }
#GDLotto .panel-heading,
#GDLotto .logo { background: #95650a; }
#Perdana .panel-heading,
#Perdana .logo { background: #777; }
#LuckyHari-Hari .panel-heading,
#LuckyHari-Hari .logo { background: #00aced; }
#GOOD4D .panel-heading,
#GOOD4D .logo { background: #ffd45e; color: #000 !important; }
#Toto-5D .panel-heading,
#Toto-5D .logo { background: #dd0000; }
#Toto-6D .panel-heading,
#Toto-6D .logo { background: #dd0000; }
#Perdana-3D .panel-heading,
#Perdana-3D .logo { background: #777; }

#Magnum .panel-default { border: 3px solid #f2bc00; border-radius: 10px; overflow: hidden; }
#PMP .panel-default { border: 3px solid #148ea4; border-radius: 10px; overflow: hidden; }
#Toto .panel-default { border: 3px solid #dd0000; border-radius: 10px; overflow: hidden; }
#Singapore .panel-default { border: 3px solid #12689a; border-radius: 10px; overflow: hidden; }
#Sabah .panel-default { border: 3px solid #eee; border-radius: 10px; overflow: hidden; }
#Sandakan .panel-default { border: 3px solid #2f9405; border-radius: 10px; overflow: hidden; }
#Sarawak .panel-default { border: 3px solid #094405; border-radius: 10px; overflow: hidden; }
#GDLotto .panel-default { border: 3px solid #95650a; border-radius: 10px; overflow: hidden; }
#Perdana .panel-default { border: 3px solid #777; border-radius: 10px; overflow: hidden; }
#LuckyHari-Hari .panel-default { border: 3px solid #00aced; border-radius: 10px; overflow: hidden; }
#GOOD4D .panel-default { border: 3px solid #ffd45e; border-radius: 10px; overflow: hidden; }
#Toto-5D .panel-default { border: 3px solid #dd0000; border-radius: 10px; overflow: hidden; }
#Toto-6D .panel-default { border: 3px solid #dd0000; border-radius: 10px; overflow: hidden; }
#Perdana-3D .panel-default { border: 3px solid #777; border-radius: 10px; overflow: hidden; }


#LuckyHari-Hari .col-sm-9 { font-size: 14px; }
#Magnum #datetime label,
#GOOD4D #datetime label,
#Sabah #datetime label { color: #000; }

#datetime { text-align: right; }
    #datetime label { background: transparent; }
    #datetime .col-sm-12 { padding: 0; }

.panel.panel-default { background-color: #2e2e2e; }
.panel-body label { color: #fff; background: #000; padding: 4px; width: 100%; }

.panel-body #TopThree .col-sm-4 { padding: 1px; }

#TopThree,
#Special,
#Consolation { padding: 10px 20px; }

.popwin { color: #fff !important; display: block; padding: 5px; }
#faq_fbinner #TopThree { padding-top: 20px; }
#Consolation { padding-bottom: 20px; }

/*--------------------------------------------------------------------------------------------------------------------------------*/
/*===========================MOBILE SCREEN===========================*/
/*--------------------------------------------------------------------------------------------------------------------------------*/

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    .panel-body #TopThree .col-sm-4 { padding: 1px; width: 32%; display: inline-block; }
    .panel-body .col-sm-3 { width: 33%; display: inline-block; margin: 5px auto; }
    .panel-body .logo .col-sm-4 { margin-left: 0; width: 29%; border: 0px solid red; float: left; }
    .panel-body .logo #datetime { width: 47%; float: right; }
}

/*=============================================================*/
/*---------------------------------------      MOBILE VIEW  LANDSCAPE   ---------------------------------------*/
/*=============================================================*/
@media only screen and (min-device-width: 375px) and (max-device-width: 1020px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .lottery-new .col-sm-4 { width: 50%; display: inline-block; }
}

/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    .lottery-new .col-sm-4 { width: 50%; }
}
/**************************************************************************** lottery END */