@import url('https://fonts.googleapis.com/css?family=Mitr:200,300,400,500&subset=latin-ext,thai,vietnamese'); @font-face { font-family: NotoserifThai; font-display: swap; src: url(../static/font/Notoserif/NotoSerifThai-Regular.eot); src: url(../static/font/Notoserif/NotoSerifThai-Regular.woff2) format("woff2"), url(../static/font/Notoserif/NotoSerifThai-Regular.woff) format("woff"), url(../static/font/Notoserif/NotoSerifThai-Regular.ttf) format("truetype"), url(../static/font/Notoserif/NotoSerifThai-Regular.svg#NotoSerifThai-Regular) format("svg"); font-weight: 400; font-style: normal; } @font-face { font-family: NotoserifThai-bold; font-display: swap; src: url(../static/font/Notoserif/NotoSerifThai-Bold.eot); src: url(../static/font/Notoserif/NotoSerifThai-Bold.woff2) format("woff2"), url(../static/font/Notoserif/NotoSerifThai-Bold.woff) format("woff"), url(../static/font/Notoserif/NotoSerifThai-Bold.ttf) format("truetype"), url(../static/font/Notoserif/NotoSerifThai-Bold.svg#NotoSerifThai-Bold) format("svg"); font-weight: 700; font-style: normal; } @font-face { font-family: NotosansThai; font-display: swap; src: url(../static/font/Notosans/NotoSansThai-Regular.eot); src: url(../static/font/Notosans/NotoSansThai-Regular.woff2) format("woff2"), url(../static/font/Notosans/NotoSansThai-Regular.woff) format("woff"), url(../static/font/Notosans/NotoSansThai-Regular.ttf) format("truetype"), url(../static/font/Notosans/NotoSansThai-Regular.svg#NotoSansThai-Regular) format("svg"); font-weight: 400; font-style: normal; } @font-face { font-family: NotosansThai-Medium; font-display: swap; src: url(../static/font/Notosans/NotoSansThai-Medium.eot); src: url(../static/font/Notosans/NotoSansThai-Medium.woff2) format("woff2"), url(../static/font/Notosans/NotoSansThai-Medium.woff) format("woff"), url(../static/font/Notosans/NotoSansThai-Medium.ttf) format("truetype"), url(../static/font/Notosans/NotoSansThai-Medium.svg#NotoSansThai-Medium) format("svg"); font-weight: 400; font-style: normal; } @font-face { font-family: NotosansThai-bold; font-display: swap; src: url(../static/font/Notosans/NotoSansThai-Bold.eot); src: url(../static/font/Notosans/NotoSansThai-Bold.woff2) format("woff2"), url(../static/font/Notosans/NotoSansThai-Bold.woff) format("woff"), url(../static/font/Notosans/NotoSansThai-Bold.ttf) format("truetype"), url(../static/font/Notosans/NotoSansThai-Bold.svg#NotoSansThai-Bold) format("svg"); font-weight: 700; font-style: normal; } /* width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; } /* test */ /* Handle */ ::-webkit-scrollbar-thumb { background: #888; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; min-height: 100%; position: relative; } html, body { font-family: 'NotosansThai', sans-serif; letter-spacing: 1; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; height: 100%; padding: 0; margin: 0; } .fixed-bg { position: fixed; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; background: url(../images/bg-black.jpg) no-repeat top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg-black.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg-black.jpg', sizingMethod='scale')"; } @media screen and (max-width:768px) { .fixed-bg { width: 100vw; } } /* body:before { content: ""; display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -10; background: url(../images/bg-black.jpg) repeat-x top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } */ h1, h2, h3, h4, h5, h6 { font-family: 'Mitr', sans-serif; } .navbar { width: 100%; height: auto; /* background: #970215; */ background-color: #790000; color: white; padding: 8px 0; } /* notice bar */ /* .notice-bar { border-radius: 10px; padding: 2px; background: #b90504; height: 24px; width: 100%; } .label-notice { border-radius: 9px; background: white; height: 20px; color: #28a745; font-size: 14px; line-height: 20px; padding: 0px 8px; width: auto; white-space: nowrap } */ .notice-bar { border-radius: 20px; padding: 2px; background: #b90504; height: 24px; width: auto; display: inline-flex; } .label-notice { /* border-radius: 20px; */ /* background: white; */ height: 24px; /* color: #970215; */ color: #28a745; font-size: 14px; line-height: 24px; /* padding: 0px 8px; */ width: auto; white-space: nowrap; display: flex; flex-direction: row; margin-right: 5px; } .label-notice .online { width: auto; border-radius: 20px; background: #28a745; height: 24px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; color: white; padding: 8px 2px 8px 8px; display: inline-flex; margin-right: 0px; line-height: 1; align-items: center; font-size: 12px; } .label-notice .numonline { width: auto; border-radius: 20px; background: white; height: 24px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; color: #28a745; padding: 8px 8px 8px 5px; display: inline-flex; font-weight: bold; white-space: nowrap; margin-left: 0px; text-align: center; line-height: 1; align-items: center; border: #28a745 2px solid; } @media screen and (max-width: 376px) { .label-notice i { display: none !important; } } .txt-notice { line-height: 20px; font-size: 16px; color: #fff; width: 100%; display: inline-flex; } /* notice bar */ /* error form */ .has-error { text-align: left; } .has-error input, .has-error select, .has-error textarea, .has-error small { color: red !important; } .has-error input, .has-error select, .has-error textarea { border: 1px solid red !important; color: red !important; } .has-success input, .has-success select, .has-success textarea, .has-success small { color: green !important; } .has-success input, .has-success select, .has-success textarea { border: 1px solid green !important; color: green !important; } /* error form */ .indexlogo { width: 100%; text-align: left; } /* .logoindex{ background: url(../images/lottery.svg) no-repeat top center; background-size: cover; width: 40px; height: 40px; margin: 0 auto; position: relative; display: inline-block; vertical-align: middle; } */ .logoindex { /* background: url(../images/logo-fifalotto-white.png) no-repeat top center; */ background-size: cover; width: 208px; height: 40px; margin: 0 auto; position: relative; display: inline-block; vertical-align: middle; } .logoindex img { width: 100%; } .txtindex { display: inline-block; vertical-align: middle; color: #790000; font-size: 2em; text-shadow: #fff 1px 1px 0px; } .bgwhitealpha { /* background: rgba(179, 227, 236, 0.6); */ background: rgba(255, 255, 255, 0.9); margin-bottom: 10px; border: rgba(255, 255, 255, 1) 2px solid; } .bgwhitealpha h6 { /* color: #970215; */ margin: 5px; margin-bottom: 10px; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); font-size: 110%; } .bgwhitealpha h6.text-danger { color: #970215 !important; margin: 5px; margin-bottom: 10px; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); font-size: 110%; } .bgwhitealpha h6 span { text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); font-weight: 400; font-size: 14px; } .bgwhitealpha .card-header { font-weight: 400; font-family: 'Mitr', sans-serif; } .bgwhitealpha .border-card-right { border-right: 1px solid rgba(0, 0, 0, 0.125); border-top: none; border-bottom: none; border-left: none; border-top-right-radius: 0px; border-bottom-right-radius: 0px; /* border-radius: 0px; */ } .bgwhitealpha .border-card-right:last-child { border-right: none !important; border-top: none; border-bottom: none; border-left: none; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; /* border-radius: 0px; */ } .bgwhitealpha .sub-card-header { font-size: 80%; /* line-height: 25px; */ line-height: 1; padding: 5px 0px!important; vertical-align: middle; min-height: 25px; /* font-family: 'NotosansThai', sans-serif !important; */ } .bgwhitealpha .bg-danger { border-radius: 3px; } .border-active { border: #970215 2px solid; /* background: rgba(38, 166, 91, 0.6); */ background: rgba(151, 2, 21, 0.5); /* transition: border 0.5s linear; */ transition: border 0.5s, opacity 0.8s linear; } .border-active h6 { color: #fff; ; margin: 5px; margin-bottom: 10px; text-shadow: 1px 1px 1px #790000; font-size: 110%; font-weight: 400; } .border-active h6 span.badge-dark { text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.0); /* color: #970215; */ /* color: #049372; */ /* background: white; */ color: #fff; background-color: #dc3545; font-weight: 400; font-size: 14px; } .border-active .btn-dark { color: #fff; background-color: #dc3545; border-color: #dc3545; } .border-active .bg-danger { background-color: rgba(255, 255, 255, 1.0) !important; border-radius: 3px; color: #970215 !important; } .bglogin { background: #e8e8e8; border-radius: 5px; border: #790000 2px solid; border-bottom: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; box-shadow: #d53529 0 0 3px; margin-top: 10px; } .subbglogin { background: #970215; border-radius: 5px; border: #790000 2px solid; border-top: #790000 1px solid; border-top-left-radius: 0px; border-top-right-radius: 0px; box-shadow: #d53529 0 0 3px; margin-bottom: 10px; vertical-align: middle; } .subbglogin .rule a { /* color: aqua; */ color: lightcoral; text-decoration: none; line-height: 30px; } .subbglogin .rule a:hover { color: white; text-shadow: #970215 1px 1px 0px; } .subbglogin .rule { text-align: right; } .subbglogin .submenulogin { text-align: right; } .subbglogin .submenulogin .btoutline { background: white; border-radius: 5px; } .form-middle { vertical-align: middle; font-size: 12px; line-height: 10px; } .form-middle label { font-size: 13px; vertical-align: -webkit-baseline-middle; /*font-family: tahoma;*/ font-family: Mitr; line-height: 0px; } .form-middle .remember { text-align: right; color: #051f34; line-height: 20px; margin-bottom: 2px; /*text-shadow: #dbf7ff 1px 1px 0px;*/ } .form-middle .forgot { font-size: 13px; text-align: right; /*font-family: tahoma;*/ font-family: Mitr; line-height: 0px; margin-top: -5px; } .form-middle .forgot a { color: #970215; /* text-shadow: #07396f 1px 1px 0px; */ text-decoration: none; } .form-middle .forgot a:hover { color: #051f34; text-shadow: #dbf7ff 1px 1px 0px; } footer.bg-danger div.footer-copyright a { color: lightcoral; text-decoration: none; } footer.bg-danger div.footer-copyright a:hover { color: lightcyan; text-decoration: none; } footer.bg-danger div.footer-copyright { color: white; text-shadow: 1px 1px 0 #970215; } footer.bg-danger { background: #790000 !important; } #footer-member.bg-danger div.footer-copyright a { color: #b90504; text-decoration: none; } #footer-member.bg-danger div.footer-copyright a:hover { color: lightcyan; text-decoration: none; } #footer-member.bg-danger div.footer-copyright { color: white; text-shadow: 1px 1px 0 #000; } #footer-member.bg-danger { background: #101010 !important; } @media (hover: none) { body { background-attachment: initial; } } @media screen and (max-width:768px) { .indexlogo { text-align: center; } .form-middle .remember { text-align: left; line-height: 12px; vertical-align: middle; } .form-middle label { font-size: 14px; } .form-middle .forgot { line-height: 20px; font-size: 14px; margin-top: 0; } .subbglogin .rule { text-align: center; } } @media (min-width: 576px) { .bgwhitealpha .card-columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 0.5em !important; -moz-column-gap: 0.5em !important; column-gap: 0.5em !important; orphans: 1; widows: 1; } .bgwhitealpha .sub-card-header { font-family: 'NotosansThai', sans-serif !important; } } @media (min-width: 768px) { .bgwhitealpha .card-columns { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 0.5em !important; -moz-column-gap: 0.5em !important; column-gap: 0.5em !important; orphans: 1; widows: 1; } .bgwhitealpha .sub-card-header { font-family: 'Mitr', sans-serif !important; } } /************* button-select-category ***********/ .button-select-category .dropdown-menu .dropdown-item { padding: 5px 10px; border-top: 1px solid #d7eff3; } .button-select-category .dropdown-menu .dropdown-item:first-child { border-top: 1px solid white; } .button-select-category .dropdown-toggle::before, .button-select-category .dropdown-toggle::after { /* display: none; */ visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; } .button-select-category { /* display: none; */ visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; position: fixed; right: 10px; bottom: 10px; z-index: 15; text-align: center; } .button-select-category i.fa-times { display: none; font-style: normal; } .button-select-category a { color: #970215 !important; display: block; cursor: pointer; font-size: 14px; } .button-select-category a.text-dark { color: #fff !important; background: #970215 !important; display: block; cursor: pointer; font-size: 14px; } .button-select-category a.text-dark:active { color: #fff !important; /*background: #b90504 !important;*/ background: #b90504 !important; display: block; cursor: pointer; font-size: 14px; } .button-select-category a:active { color: #fff !important; /* background: #970215 !important; */ background: #b90504 !important; display: block; cursor: pointer; font-size: 14px; } .button-select-category.show i.fa-times { display: block; } .button-select-category.show i.fa-search { display: none; } .button-select-category button { width: 47px; height: 47px; line-height: 24px; padding: 9px 10px; text-align: center; /* color: #fff; */ color: #970215; border-radius: 47px; /* background-color: #970215; */ background-color: #fff; border: 3px solid #b90504; -webkit-box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2); } .button-select-category button i { /* color: #fff; */ color: #970215; font-size: 24px; vertical-align: middle; text-align: center; } /************* end button-select-category ***********/ /********************** carousel slide ****************/ .carousel-inner { height: auto; width: 100%; } /* Count nav-pills */ .nav-slide { position: relative; right: 0; bottom: 0; left: 0; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; padding-left: 0; margin-right: 0; margin-left: 0; list-style: none; } .nav-slide { width: 100%; counter-reset: number; } .nav-slide>li>span:before { content: counter(number); counter-increment: number; display: inline-block; } #nav1.nav-slide>li>span:before { content: counter(number); counter-increment: none; display: inline-block; visibility: hidden; } #nav1.nav-slide>li>.flag-icon { box-shadow: 0 0 1px rgba(0, 0, 0, .3); vertical-align: middle; float: left; margin-left: 5px !important; margin-top: 3px !important; } .card-header .flag-icon { box-shadow: 0 0 1px rgba(0, 0, 0, .3); vertical-align: middle; float: left; margin-left: 5px !important; margin-top: 3px !important; } .nav-slide .active { background-color: #fff; -webkit-box-shadow: inset 0px 0px 0px 2px #970215; -moz-box-shadow: inset 0px 0px 0px 2px #970215; box-shadow: inset 0px 0px 0px 2px #970215; } .nav-slide li { position: relative; -ms-flex: 0 1 auto; flex: 0 1 auto; width: auto !important; height: auto !important; padding: 5px; text-align: center; margin-right: 2px; margin-left: 2px; margin-bottom: 3px; text-indent: 0px !important; cursor: pointer; } .nav-slide-yeekee li { position: relative; -ms-flex: 0 1 auto; flex: 0 1 auto; width: auto !important; min-width: 30px; height: auto !important; padding: 5px; text-align: center; margin-right: 2px; margin-left: 2px; margin-bottom: 3px; text-indent: 0px !important; cursor: pointer; } .nav-slide-yeekee { width: 100%; flex-wrap: wrap; position: relative; right: 0; bottom: 0; left: 0; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; padding-left: 0; margin-right: 0; margin-left: 0; list-style: none; } .nav-slide-yeekee { width: 100%; counter-reset: number; } .nav-slide-yeekee>li>span:before { content: counter(number); counter-increment: number; display: inline-block; } .nav-slide-yeekee .active { background-color: #fff; -webkit-box-shadow: inset 0px 0px 0px 2px #970215; -moz-box-shadow: inset 0px 0px 0px 2px #970215; box-shadow: inset 0px 0px 0px 2px #970215; font-weight: bold; } /************************/ .nav-slide li, .nav-slide-yeekee li { background-color: rgba(255, 255, 255, 0.5); font-size: 12px; color: black !important; text-shadow: #fff 1px 1px 0px; } /************************/ .border-active .nav-slide .active, .border-active .nav-slide-yeekee .active { background-color: #fff; -webkit-box-shadow: inset 0px 0px 0px 2px #d53529; -moz-box-shadow: inset 0px 0px 0px 2px #d53529; box-shadow: inset 0px 0px 0px 2px #d53529; } .border-active .nav-slide li, .border-active .nav-slide-yeekee li { color: white !important; text-shadow: black 1px 1px 0px; background-color: rgba(0, 0, 0, 0.5); } .border-active .nav-slide li.active, .border-active .nav-slide-yeekee li.active { color: #790000 !important; text-shadow: #fff 1px 1px 0px; background-color: #fff; } /*************************/ .carousel-view ol { margin-top: 0; margin-bottom: 0rem; } .carousel-view { display: none; margin-bottom: 0rem; position: relative; } @media screen and (max-width:768px) { .carousel-view { display: block; } .pc-view { display: none !important; } .nav-slide li { position: relative; -ms-flex: 0 1 auto; flex: 0 1 auto; /* display: inline-block; */ /* width: 24% !important; */ width: 32.4% !important; height: auto !important; padding: 3px 0; text-align: center; vertical-align: top; margin-right: 1.5px; margin-left: 1.5px; text-indent: 0px !important; } .nav-slide { position: relative; flex-wrap: wrap; right: 0; bottom: 0; left: 0; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; /* display: inline-block; */ padding-left: 0; margin-right: 0; margin-left: 0; list-style: none; } .nav-slide-yeekee li { position: relative; -ms-flex: none; flex: none; /* display: inline-block; */ width: 11.3% !important; height: auto !important; padding: 3px 0; text-align: center; vertical-align: top; margin-right: 1.5px; margin-left: 1.5px; margin-bottom: 3px; text-indent: 0px; } .nav-slide-yeekee { position: relative; right: 0; bottom: 0; left: 0; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; /* display: inline-block; */ padding-left: 0; margin-right: 0; margin-left: 0; list-style: none; } .nav-slide li, .nav-slide-yeekee li { cursor: pointer; background-color: rgba(108, 117, 125, 0.2); font-size: 14px; font-weight: 400; text-shadow: none; border-radius: 2px; } } @media screen and (max-width:321px){ .nav-slide li { width: 32.0% !important; font-size: 11.5px; } } /********************** end carousel slide ****************/ /********* end index **********/ /********* member ************/ .topnavbar { width: 100%; height: auto; background: #b90504; color: white; padding: 8px 0; border-bottom: #500202 3px solid; } .topnavbar.sticky-top { z-index: 998; } .botnavbar { width: 100%; height: auto; /*background: #b90504; color: white;*/ /* background: #f8f9fa; */ /* background:#ccc; */ background: #ececec; /* border-top: 1px #fcfcfc solid; */ /* padding: 8px 0; */ } .botnavbar.fixed-bottom { z-index: 998; } .memberlogo { width: auto; text-align: left; } .logomember { /* background: url(../images/lottery.svg) no-repeat top center; */ background-size: cover; width: 125px; height: 24px; margin: 0 auto; position: relative; display: inline-block; vertical-align: middle; } #logosymbol{ display: none; } @media screen and (max-width:765px) { .logomember { margin-left: 0px; } } @media screen and (max-width:321px){ .logomember{ width: 35px; height: 35px; margin-top: 0px; } #logosymbol{ display: inline-block; width: 100%; border-radius: 2px; box-shadow: #333 0px 0px 1px; } #logofull{ display: none; } } .logomember img { width: 100%; } .txtlogomember { display: inline-block; vertical-align: middle; color: #fff; font-size: 1em; text-shadow: #790000 1px 1px 0px; } #menu-profile { margin-left: 5px; padding-right: 20px; display: inline-block; cursor: pointer; } #menu-profile.dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 0px; transform: translateY(-50%); } /* #MenuProfile.dropdown-toggle:hover > .dropdown-menu{ display: block !important; } */ #menu-profile-dropdown>.dropdown-item:hover { background-color: #eee !important; } /* menu-pc */ #menu-pc { vertical-align: middle; } #menu-pc a { color: #500202; text-decoration: none; display: inline-block; margin-top: 2px; padding: 0 10px; font-size: 24px; vertical-align: middle; text-shadow: 1px 1px 0 #d80505; } #menu-pc a:hover, #menu-pc a:active, #menu-pc a.active { color: rgba(0, 0, 0, 1); text-shadow: 1px 1px 1px red; } .pc-view .bootstrap-select a, .mobile-view .bootstrap-select a { font-size: initial; text-shadow: initial; color: initial; } .pc-view .bootstrap-select, .mobile-view .bootstrap-select { background: transparent; height: auto; } .pc-view .bootstrap-select .btn-sm { background: rgba(0, 0, 0, .2); } .mobile-view .bootstrap-select .btn-block { background: rgba(0, 0, 0, .0); } .pc-view .bootstrap-select .filter-option-inner { min-width: 20px; max-width: 20px; } .pc-view .bootstrap-select .filter-option-inner span, .mobile-view .bootstrap-select .filter-option-inner span { border-radius: 1px; } .pc-view .bootstrap-select>.dropdown-toggle, .mobile-view .bootstrap-select>.dropdown-toggle { padding-right: 22px; } /* menu-mobile */ #menu-mobile { vertical-align: middle; } #menu-mobile a { text-decoration: none; display: inline-block; /* margin-top:2px; padding: 0 10px; */ font-size: 24px; vertical-align: middle; padding: 8px 0; text-align: center; border-left: 1px #ececec solid; border-right: 1px #ececec solid; border-top: #cecece 1px solid; } #menu-mobile a:hover, #menu-mobile a:active, #menu-mobile a.active { background: rgba(0, 0, 0, 0.1); border-left: rgba(0, 0, 0, 0.1) 1px solid; border-right: rgba(255, 255, 255, 0.9) 1px solid; box-shadow: inset 0 -5px 0 #500202; border-top: #aeaeae 1px solid; } #menu-mobile a:hover:last-child, #menu-mobile a:active:last-child { background: rgba(0, 0, 0, 0.1); border-left: rgba(0, 0, 0, 0.1) 1px solid; border-right: rgba(0, 0, 0, 0.05) 1px solid; /* border-right: rgba(255,255,255,0.6) 1px solid; */ } #menu-mobile i { text-decoration: none; display: inline-block; /* margin-top:2px; padding: 0 10px; */ font-size: 24px; vertical-align: middle; /* text-shadow: 1px 1px 0 #fff; */ background-color: #565656; color: transparent; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; } #menu-mobile a:hover i, #menu-mobile a:active i, #menu-mobile a.active i { color: #500202; text-shadow: #fff 1px 1px 0px; } #menu-mobile ul li { background: #ccc; display: inline-block; } /* #menu-mobile .support { background: #343a40; color: #fff; box-shadow: inset 0px 5px 0px #555; } #menu-mobile .support i { text-decoration: none; display: inline-block; font-size: 24px; vertical-align: middle; background-color: #222; color: transparent; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; } */ #menu-mobile .support { background: #28a745; color: #fff; box-shadow: inset 0px 5px 0px #555; } #menu-mobile .support i { text-decoration: none; display: inline-block; /* margin-top:2px; padding: 0 10px; */ font-size: 24px; vertical-align: middle; /* text-shadow: 1px 1px 0 #fff; */ background-color: #222; color: transparent; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; } #menu-mobile a.support.active i, #menu-mobile a.support:active i, #menu-mobile a.support:hover i { color: #28a745; text-shadow: #fff 1px 1px 0px; } #menu-mobile a.support:hover, #menu-mobile a.support:active, #menu-mobile a.support.active { background: rgba(0, 0, 0, 0.1); border-left: rgba(0, 0, 0, 0.1) 1px solid; border-right: rgba(255, 255, 255, 0.9) 1px solid; box-shadow: inset 0 -5px 0 #28a745; border-top: #aeaeae 1px solid; } /* Sidebar */ .linemenu-x { border-right: 1px solid rgba(0, 0, 0, 0.2); font-size: 24px; min-height: 24px; height: auto; display: inline-block; margin-left: 5px; margin-right: 15px; margin-top: 0; } .line { width: 100%; height: 1px; border-bottom: 1px dashed #ddd; /* margin: 40px 0; */ } /* --------------------------------------------------- SIDEBAR STYLE ----------------------------------------------------- */ #sidebarCollapsePC { cursor: pointer; vertical-align: middle; display: inline-block; padding: 0px; } #sidebarCollapse { cursor: pointer; vertical-align: middle; display: inline-block; font-size: 24px; line-height: 24px; } #sidebarCollapse i { line-height: 24px; margin-top: 2.5px; padding-right: 0px; } #sidebar { width: 250px; position: fixed; top: 0; right: -257px; height: 100vh; z-index: 1023; background: #f8f9fa; color: #888; transition: all 0.3s; overflow-y: scroll; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); } #sidebar.active { right: 0; } .mobile-view { display: none !important; } /* this for circle dismiss */ /* #dismiss { width: 35px; height: 35px; line-height: 35px; border-radius:35px; text-align: center; background: #f8f9fa; -webkit-box-shadow:inset 0px 0px 0px 2px #970215; -moz-box-shadow:inset 0px 0px 0px 2px #970215; box-shadow:inset 0px 0px 0px 2px #970215; color: #dc3545; position: absolute; top: 10px; left: 10px; cursor: pointer; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; font-size: 36px; z-index: 999; } */ #dismiss { color: #dc3545; text-align: center; position: absolute; top: 0px; left: 10px; cursor: pointer; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; font-size: 36px; z-index: 999; } #dismiss:hover { color: #f8f9fa; } .overlay { display: none; position: fixed; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); z-index: 998; opacity: 0; transition: all 0.5s ease-in-out; } .overlay.active { display: block; opacity: 1; } #sidebar .sidebar-header { padding: 20px; /* background: #f6f6f6; */ background: #970215; font-size: 16px !important; box-shadow: #c1c1c1 0 1px 3px; z-index: 998; position: relative; color: #fff; } #sidebar .sidebar-header img { border: 3px solid white; background: white; box-shadow: #500202 0px 2px 1px; } #sidebar ul.components { padding: 0px 0; border-bottom: 1px solid #ddd; background: #ececec; z-index: 997; position: relative; } #sidebar ul p { color: #f8f9fa; padding: 10px; } #sidebar ul li a { padding: 10px; font-size: 1.1em; display: block; text-decoration: none; color: #555; text-shadow: #fff 1px 1px 0; border-bottom: #fff 1px dashed; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } #sidebar ul li a:hover { color: #970215; /* background: #f8f9fa; */ background: white; border-bottom: #f8f9fa 1px dashed; } #sidebar ul li:last-child a { border-bottom: #fff 1px solid; } #sidebar ul li.active>a, #sidebar a[aria-expanded="true"] { color: #b90504; /* background: #f8f9fa; */ background: white; } #sidebar a[data-toggle="collapse"] { position: relative; } /* .dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } */ #sidebar ul ul a { font-size: 0.9em !important; padding-left: 30px !important; background: #f8f9fa; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } #sidebar ul.CTAs { padding: 10px 20px; } #sidebar ul.CTAs a { text-align: center; font-size: 0.9em !important; display: block; border-radius: 5px; margin-bottom: 5px; border: #b90504 solid 1px; } #sidebar ul.CTAs a:hover { border: #b90504 solid 1px; } a.download { background: #f8f9fa; color: #970215; } a.article, a.article:hover { background: #970215 !important; color: #fff !important; } a.logout { background: #970215 !important; color: #fff !important; border: #b90504 solid 1px; text-shadow: #500202 1px 1px 0 !important; } a.logout:hover { background: #fff !important; color: #970215 !important; border: #b90504 solid 1px; text-shadow: #fff 1px 1px 0 !important; } #re-credit { display: inline-block; cursor: pointer !important; font-size: 18px; vertical-align: middle; padding: 0; } #re-credit span { border: 2px solid #b90504; transition: all 0.5s; color: #790000 !important; background: #fff !important; transition: all 0.5s linear, color 0.1s linear; } #re-credit:hover span { transition: all 0.5s; border: 2px solid #970215; cursor: pointer; background: #500202; color: #fff; transition: all 0.5s linear, color 0.1s linear; } #re-credit.active span { /* color: #fff; background-color: #970215; */ transition: all 0.5s; border: 2px solid #970215; cursor: pointer; background: #500202 !important; color: #fff !important; transition: all 0.5s linear, color 0.1s linear; } #re-credit i, #re-credit span { display: inline-block; vertical-align: middle; line-height: 18px; margin-left: 0; } #re-credit i { font-size: 18px; background: #b90504; border-radius: 18px; } .refresh-icon.fa-spin { color: #500202; /* transform: rotate(180deg); transition: transform 0.5s linear, color 0.1s linear; */ transition: all 0.5s linear, color 0.1s linear; } .refresh-icon { transition: color 0.1s linear; } /* --------------------------------------------------- CARD STYLE ----------------------------------------------------- */ .card-main { border-radius: 10px; margin: 10px; background: rgba(121, 0, 0, 0.5); border: #790000 1px solid; height: auto; } .card-main h2 { margin-bottom: -7px; /* font-family: 'NotosansThai', sans-serif; */ font-weight: 300; text-shadow: #500202 1px 1px 0; transform: scaleX(0.85); } .card-sub { border-radius: 50px; margin: 20px; margin-top: 5px; background: rgba(255, 255, 255, 1); border: #fff 1px solid; height: auto; margin-bottom: -20px; z-index: 100; position: relative; } .btn-credit { border-radius: 50px; } .text-black { color: black; } .menu-grid { overflow: hidden; } a.menu-grid.disabled{ /* Make the disabled links grayish*/ color: gray; /* And disable the pointer events */ pointer-events: none; } .btn-red { color: #fff; background-color: #790000 !important; border-color: #970215 !important; } .btn-red:hover, .btn-red:active { color: #fff; background-color: #970215 !important; border-color: #790000 !important; } a.menu-grid.hothot { overflow: hidden; border: 1px solid #e9dbdb; color: #970215; box-shadow: inset 0 -0px 10px rgba(255, 155, 155, 0.2); animation: hotPulse 1s infinite ease-in-out; } @keyframes hotPulse { 0%, 100% { box-shadow: inset 0 -0px 10px rgba(255, 102, 102, 0.2); } 50% { box-shadow: inset 0 -0px 15px rgba(252, 82, 82, 0.4); } } a.menu-grid.hot { overflow: hidden; /* border: 1px solid #dab3b0; */ border: 1px solid #e9dbdb; color: #970215; box-shadow: inset 0 -0px 10px rgba(255, 155, 155, 0.2); } a.menu-grid { padding: 10px; display: inline-block; text-align: center; min-width: 100px; width: 100%; border-radius: 3px; border: 1px solid #eee; margin-top: 5px; /*margin-bottom: 5px;*/ color: #555; text-decoration: none; text-shadow: #fff 1px 1px 0; line-height: 1.2; } .menu-grid i { font-size: 30px; } a.menu-grid:hover, a.menu-grid:active { color: #500202; background: #eee; border: 1px solid #e5e5e5; } .row .col-3 a.menu-grid, .row .col-md-1 a.menu-grid, .row .col-lg-1 a.menu-grid { padding: 0px; padding-top: 10px; padding-bottom: 8px; width: 100%; font-size: 14px; min-width: 50px; line-height: 1.5; } .row .col-3 .menu-grid i, .row .col-md-1 .menu-grid i { font-size: 30px; } .row .col-4 .menu-grid i.sn-icon, .row .col-md-1 .menu-grid i.sn-icon { font-size: 35px !important; line-height: 0.9 !important } a.menu-grid.powerball { line-height: 1.2 !important; } .row-menu-grid .row .col-4, .row-menu-grid .row .col-6, .row-menu-grid .row .col-3 { /* padding-right:0px !important; */ padding-right: 8px; padding-left: 8px; } .main-content { margin-top: 0px; border-radius: 0px; /* margin-bottom: 60px; */ } .row-menu-grid { border-radius: 5px; margin-bottom: 60px; } .menu-grid.menu-money { background: #343a40; color: #fff; text-shadow: #222 1px 1px 0; border-radius: 0px; box-shadow: inset 10px -0px 0px #790000; min-height: 60px; padding: 15px; padding-right: 5px; } .menu-grid.menu-money i { color: #dc3545; text-shadow: #222 1px 1px 0; } .menu-grid.menu-money:hover, .menu-grid.menu-money:active { background: #151515; color: #fff; text-shadow: #222 1px 1px 0; border-radius: 0px; box-shadow: inset 10px -0px 0px #d80505; } .menu-grid.menu-money:hover i, .menu-grid.menu-money:active i { color: #d80505; text-shadow: #222 1px 1px 0; } /************ribbon****************/ @import url(https://fonts.googleapis.com/css?family=Lato:700); /* common */ .ribbon { width: 50px; height: 50px; overflow: hidden; position: absolute; } .ribbon::before, .ribbon::after { position: absolute; z-index: -1; content: ''; display: block; border: 5px solid #790000; } .ribbon span { position: absolute; display: block; width: 80px; padding: 2px 0; background-color: #970215; box-shadow: 0 5px 10px rgba(0, 0, 0, .1); color: #fff; font: 500 10px/1 'Lato', sans-serif !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .2); text-transform: uppercase; text-align: center; } /* soon ribbon */ .ribbon-soon { width: 50px; height: 50px; overflow: hidden; position: absolute; } .ribbon-soon::before, .ribbon-soon::after { position: absolute; z-index: -1; content: ''; display: block; border: 5px solid #333; } .ribbon-soon span { position: absolute; display: block; width: 80px; padding: 2px 0; background-color: #555; box-shadow: 0 5px 10px rgba(0, 0, 0, .1); color: #fff; font: 500 8px/1 'NotosansThai', sans-serif !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .2); text-transform: uppercase; text-align: center; } /* top left*/ .ribbon-top-left { top: 5px; left: 8px; } .ribbon-top-left::before, .ribbon-top-left::after { border-top-color: transparent; border-left-color: transparent; } .ribbon-top-left::before { top: 0; right: 0; } .ribbon-top-left::after { bottom: 0; left: 0; } .ribbon-top-left span { right: -3px; top: 6px; transform: rotate(-45deg); } /************ribbon****************/ .box-news { width: 100%; display: flex; } .h-box-news { line-height: 0.9; background: #500202; color: #fff; border-top-left-radius: 8px; border-top-right-radius: 8px; padding: 10px 15px; width: 100%; display: flex; } .h-box-news span b { font-family: Mitr; font-weight: 400; } .h-box-news .icon-news { display: inline-block; padding-left: 20px; padding-right: 10px; box-shadow: inset 7px 0px 0px #970215; height: 100%; min-height: 35px; } .h-box-news .icon-news i { font-size: 35px; color: #dc3545; } .h-box-news .txt-h { display: inline-block; } .txt-box-news { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; padding: 10px; background: #fff; border: #e0e0e0 1px solid; width: 100%; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; align-items: stretch; } .txt-box-news a { color: #343a40; text-decoration: none; display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; } .txt-box-news a:hover { color: #000; } .txt-box-news a img { border-radius: 5px; margin-right: 10px; width: 120px; object-fit: contain; align-self: center; flex: 0 0 auto; transition: all 0.3s; } .txt-box-news a:hover img, .txt-box-news a:focus img { object-position: 50% 50%; transform: scale(1.1); transition: all 0.3s; } .txt-box-news .text-news { display: flex; flex-direction: column; margin-bottom: 0; overflow: hidden; height: auto; align-self: center; width: 100%; word-wrap: break-word; } .txt-box-news a .text-news p { line-height: 1.3; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; margin-bottom: 0; word-wrap: break-word; font-size: 14px; } .txt-box-news a .text-news span { font-family: tahoma; font-size: 12px; font-weight: 400; background: #aaa; width: auto; flex: 0 0 auto; } .txt-box-news a:hover .text-news span { background: #555; } .txt-box-news a .text-news h1 { line-height: 1.5; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; margin-bottom: 0; font-size: 14px; word-wrap: break-word; } .txt-box-news a:hover .text-news h1 { color: #970215; } /****************************/ .txt-box-news1 a { color: #343a40; text-decoration: none; display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; } .txt-box-news1 a:hover { color: #000; } .txt-box-news1 a img { border-radius: 5px; margin: 5px; margin-top:0px; object-fit: contain; align-self: center; flex: 0 0 auto; transition: all 0.3s; } .txt-box-news1 a:hover img, .txt-box-news1 a:focus img { object-position: 50% 50%; transform: scale(0.95); transition: all 0.3s; } .txt-box-news1 .text-news { display: flex; flex-direction: column; margin-bottom: 0; overflow: hidden; height: auto; align-self: center; width: 100%; word-wrap: break-word; } .txt-box-news1 a .text-news p { line-height: 1.3; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; margin-bottom: 0; word-wrap: break-word; font-size: 14px; } .txt-box-news1 a .text-news span { font-family: tahoma; font-size: 12px; font-weight: 400; background: #aaa; width: auto; flex: 0 0 auto; } .txt-box-news1 a:hover .text-news span { background: #555; } .txt-box-news1 a .text-news h6 { line-height: 1.5; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; margin-bottom: 0; font-size: 14px; word-wrap: break-word; } .txt-box-news1s a:hover .text-news h6 { color: #970215; } /* .img-news{ width: 100%; max-width: 600px; margin: 10px; float: left; } .news-detail{ float: left; } */ .title-news-hilight{ font-size: 130%; display: block; width: 100%; text-align: center; position: relative; margin-bottom: 10px; background: white; } .title-news-hilight span{ background-color: #fff; padding: 0 10px; position: relative; z-index: 1; } .title-news-hilight::before{ content: ''; display: block; height: 4px; background: #ddd; position: absolute; top: 50%; margin-top: -2px; left: 10px; right: 10px; } /*--------------bubble-------------------*/ /* remimder bubble styling */ .bubblechat blockquote { margin: 10px 10px 0; background: #efefef; padding: 20px 60px; position: relative; border: none; border-radius: 8px; text-align: center; } .bubblechat blockquote:before, .bubblechat blockquote:after { content: "\201C"; position: absolute; font-size: 80px; line-height: 1; /* color: #757f9a; */ color: lightcoral; font-style: normal; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } .bubblechat blockquote:before { top: -8px; left: 3px; } .bubblechat blockquote:after { content: "\201D"; right: 0px; bottom: -0.5em; } .bubblechat div.bubble-arrow { width: 0; height: 0; border-left: 0 solid transparent; border-right: 20px solid transparent; border-top: 20px solid #efefef; margin: 0 0 0 60px; } .bubblechat { position: fixed; left: 5px; bottom: 10px; max-width: 250px; z-index: 1031; } .bubblechat p { margin: 8px 0 0 20px; text-align: left; color: #fff; } .bubblechat .boxclose { background: #fff !important; border: none; position: absolute; z-index: 1032; text-align: center; right: 15px; top: 15px; border-radius: 20px; border: 5px solid #fff; display: block; width: 25px; height: 25px; line-height: 0.8 !important; padding: 0px 0px; font-size: 15px; cursor: pointer; color: lightcoral; } .bubblechat a { color: #500202; text-decoration: none; } .bubblechat a:hover { color: #b90504; } .bar-powerball { width: 100%; background-color: #151515; color: white; display: inline-block; padding: 5px 0; line-height: 20px; font-size: 20px; text-align: center; border-bottom: #970215 2px solid; display: none; } .bar-powerball i { font-size: 28px; line-height: 20px; vertical-align: middle; } .bar-powerball-pc { width: auto; /* background-color: #151515; */ color: white; display: inline-block; padding: 5px 0; line-height: 20px; font-size: 20px; text-align: center; margin-left: 10px; } .bar-powerball-pc i { font-size: 28px; line-height: 20px; vertical-align: middle; } /*****************************/ .ribbonbar { font-weight: 600; color: #fff; background: #dc3545; padding-top: 0px; font-size: 18px; line-height: 20px; /* width: max-content; */ width: auto; position: relative; text-align: center; height: 27px; /* margin: 3em auto 0 auto; */ filter: drop-shadow(0 6px 3px rgba(0, 0, 0, 0.1)); border-right: 3px solid #dc3545; border-left: 3px solid #dc3545; margin-left: 20px; text-shadow: #500202 1px 1px 0; text-align: center; display: inline-block; vertical-align: middle; } .ribbonbar:after, .ribbonbar:before { content: ""; position: relative; display: inline-block; border: 13.5px solid #dc3545; height: 27px; } .ribbonbar:before { left: -20px; border-right-width: 5px; border-left-color: transparent; filter: drop-shadow(-6px 6px 3px rgba(0, 0, 0, 0.04)); position: relative; } .ribbonbar:after { right: -20px; border-left-width: 5px; border-right-color: transparent; filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.04)); position: relative; } .ribbonbar .odometer { line-height: 1; margin-top: -15px; margin-left: -20px; margin-right: -20px; min-width: 50px; } /* end bubble chat */ /* -----------------------lotto card-------------------- */ .ribbon-lotto { background: rgba(0, 0, 0, .3); height: 30px; width: auto; display: inline-block; position: absolute; color: #FFF; line-height: 30px; padding: 0px 10px; margin-top: 5px; border-left: rgba(0, 0, 0, .3) 1px solid; } .ribbon-lotto:after { content: ""; position: absolute; display: inline-block; bottom: 0; border: 15px solid rgba(0, 0, 0, .3); right: -15px; height: 30px; border-left-width: 0px; border-right-color: transparent; filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.04)); } ul.countdown { list-style: none; margin: 0px 0; padding: 0px 0px; text-align: center; position: relative; display: flex; overflow: hidden; height: 30px; align-items: center; } ul.countdown li { display: inline-flex; margin: 0px; } ul.countdown li span { font-size: 30px; font-weight: 300; line-height: 30px; } ul.countdown li.seperator { font-size: 20px; line-height: 30px; vertical-align: middle; } ul.countdown li p { color: #a7abb1; font-size: 14px; } .lotto-card { width: 100%; display: inline-block; } a .lotto-card { border: 2px solid white; border-radius: 8px; overflow: hidden; box-shadow: rgba(255, 255, 255, 0.5) 0 0 10px; } a .lotto-card:hover, a.lotto-card:focus { box-shadow: #555 0px 0px 10px; /* border: 2px solid rgba(0,0,0,0.5); */ } .lotto-head { width: 100%; display: block; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 5px; color: white; text-align: right; text-shadow: rgba(0, 0, 0, .3) 1px 1px 0; } .lotto-head>h5 { font-weight: 400 !important; text-align: right; margin-bottom: 0px; } .lotto-head span { font-weight: 400; } .ribbon-lotto span.round { font-size: 10px; line-height: 10px; display: inline-block; text-align: center; vertical-align: middle; background: rgba(0, 0, 0, .5); color: rgba(255, 255, 255, 0.8); border-radius: 2px; padding: 1px 2px; padding-bottom: 3px; margin-top: -2px; margin-right: 2px; font-family: tahoma; transform: scaleX(0.90); } .lotto-head.lotto-government { background-color: #17a2b8; border: #108496 1px solid; } .lotto-head.lotto-thaistock { background-color: #007bff; border: #0364cc 1px solid; } .lotto-head.lotto-foreignstock { background-color: #6610f2; border: #4f06c5 1px solid; } .lotto-head.lotto-yeekee { background-color: #dc3545; border: #aa1423 1px solid; } /* .lotto-head.lotto-jetsadabet { background-color: #fd7e14; border: #c45b06 1px solid; } .lotto-head.lotto-jetsadavip { background-color: #e83e8c; border: #b1185f 1px solid; } */ .lotto-head.lotto-la { background-color: #fd7e14; border: #c45b06 1px solid; } .lotto-head.lotto-vn { background-color: #e83e8c; border: #b1185f 1px solid; } .lotto-head.lotto-my { background-color: #28a745; border: #1c8b36 1px solid; } .lotto-head.lotto-gsb { background-color: #f90a86; border: #ff1d92 1px solid; } .ribbon-lotto-img{ display: inline-block; position: absolute; color: #FFF; line-height: 20px; padding: 0px 5px; margin-top: 5px; } .ribbon-lotto-img img{ height: 50px; } .ribbon-lotto-img span{ height:50px; font-size: 50px; background-size: cover; margin-left: -5px; } @media screen and (max-width:420px) { .ribbon-lotto-img{ display: inline-block; position: absolute; color: #FFF; line-height: 20px; padding: 0px 5px; margin-top: 5px; } .ribbon-lotto-img img{ height: 40px !important; } .ribbon-lotto-img span{ height: 40px; font-size: 40px !important; background-size: cover; } } .lotto-head.lotto-baac { background-color: #13007d; border: #0e005c 1px solid; } .lotto-time { width: 100%; display: flex; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding: 5px; background: white; border: #ccc 1px solid; border-top: none; text-align: right; font-size: 27px; line-height: 30px; color: #bbb; flex-direction: row; justify-content: space-between; } .lotto-time i { /* float: left; */ display: inline-flex; } .tanghuay-time { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 5px; padding-bottom: 0px; background: rgba(0, 0, 0, .1); border: #ccc 1px solid; text-align: right; font-size: 18px; line-height: 20px; /* color: #dc3545; */ color: #aa1423; text-shadow: #fff 1px 1px 0; border-radius: 5px; overflow: hidden; } .tanghuay-time_day { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 5px; padding-bottom: 0px; background: rgba(0, 0, 0, .1); border: #ccc 1px solid; text-align: right; font-size: 15px; line-height: 20px; /* color: #dc3545; */ color: #aa1423; text-shadow: #fff 1px 1px 0; border-radius: 5px; overflow: hidden; } .lotto-time span { font-size: 75%; } @media screen and (max-width:376px) { .time-government i { display: none; } .time-government span { text-align: center !important; width: 100% !important; } .time-government { vertical-align: middle; height: 100%; } } @media screen and (max-width:321px) { .time-government span { font-size:70%; } } .tanghuay-time i { margin-right: 5px; display: inline-flex; } .tanghuay-time ul li span { font-weight: bold !important; } .tanghuay-time ul li.seperator { font-weight: bold !important; } .tanghuay-time_day i { margin-right: 5px; display: inline-flex; } .tanghuay-time_day ul li span { font-weight: bold !important; } .tanghuay-time_day ul li.seperator { font-weight: bold !important; } @media screen and (max-width:376px) { .tanghuay-time i { display: none; } .tanghuay-time span { font-size:75%; } } @media screen and (max-width:321px) { .tanghuay-time span { font-size:75%; } } @media screen and (max-width:321px) { .tanghuay-time_day i { display: none; } .tanghuay-time_day { font-size: 10px; } .tanghuay-h4{ font-size:80%; } } @media screen and (min-width:321px) and (max-width:430px) { .tanghuay-time_day i { display: none; } .tanghuay-time_day { font-size: 15px; } .tanghuay-h4{ font-size:100%; } } @media only screen and (min-width: 480px){ .tanghuay-time_day { font-size: 20px; } } .bar-back { border-top: #ddd 1px solid; border-bottom: #ddd 1px solid; line-height: 20px; padding: 10px; background: white; font-size: 20px; } .bar-back a { color: #aaa; text-decoration: none; } .bar-back a.btn { color: white; } .bar-back a.btn:hover, .bar-back a.btn:focus { color: white; } .bar-back a.btn-outline-secondary { color: #555; } .bar-back a.btn-outline-secondary:hover, .bar-back a.btn-outline-secondary:focus { color: #fff; } .bar-back a:hover, .bar-back a:focus { color: #970215; } .col-lotto .row .col-6, .col-lotto .row .col-4, .col-lotto .row .col-3 { margin-bottom: 5px; padding: 0 5px; } /* .col-lotto .row .col-4 .btn,.col-lotto .row .col-6 .btn{ line-height: 1.2; overflow: hidden; } */ .col-lotto .bg-btn { background: white; border-radius: 5px; border: 1px solid white; box-shadow: rgba(255, 255, 255, 0.5) 0 0 3px; width: auto; } .bg-option { background: rgba(0, 0, 0, .2); color: #151515; text-shadow: #eee 1px 1px 0px; } .flex-fill .bg-btn { margin: 2.5px; } .btn-tanghuay { line-height: 1; } .btn-panghuay { line-height: 1; } .row-btn-tanghuay .btn.active .badge { background: rgba(0, 0, 0, .5) !important; } .row-btn-tanghuay .btn div:first-child { margin-left: -8px; margin-top: -5px; margin-bottom: -5px; padding: 5px; padding-top: 8px; border-radius: 0px; vertical-align: middle; } .row-btn-tanghuay .col-6 button div:first-child{ width:80%; } .row-btn-tanghuay .btn span { font-family: Arial, Helvetica, sans-serif; /* font-weight: 400; */ } .row-btn-tanghuay .btn div:first-child i { font-size: 22px; font-style: normal; text-align: center; } .row-btn-tanghuay .btn div:last-child { font-style: normal; text-align: center; width: 20%; } .row-btn-tanghuay .flex-fill { margin: 2.5px; width: auto; } .row-btn-tanghuay .btn.active div:first-child { background: rgba(0, 0, 0, .5) !important; } .row-btn-tanghuay .btn.active{ /* box-shadow: black 1px 1px 8px; */ outline: 1px dashed black; outline-offset: 2px; } .btn-outline-red { color: #dc3545; /* background-color: transparent; */ background-color: rgba(255, 0, 0, 0.1); background-image: none; border-color: #dc3545; } .btn-outline-red.active { color: #fff; background-color: #dc3545; border-color: #dc3545; } .btn-outline-blue { color: #007bff; /* background-color: transparent; */ background-color: rgba(0, 89, 255, 0.05); background-image: none; border-color: #007bff; } .btn-outline-blue.active { color: #fff; background-color: #007bff; border-color: #007bff; } .btn-outline-green { color: #28a745; /* background-color: transparent; */ background-color: rgba(0, 255, 106, 0.1); background-image: none; border-color: #28a745; } .btn-outline-green.active { color: #fff; background-color: #28a745; border-color: #28a745; } /* .col-lotto .row .col-4 .btn:hover .badge,.col-lotto .row .col-6 .btn:hover .badge, .col-lotto .row .col-4 .btn.active .badge,.col-lotto .row .col-6 .btn.active .badge{ background: rgba(0, 0, 0, .5) !important; } */ /* .col-lotto .row .col-4 .btn div:first-child,.col-lotto .row .col-6 .btn div:first-child{ margin-left:-8px; margin-top:-5px; margin-bottom: -5px; padding: 0 5px; padding-top: 8px; border-radius: 0px; vertical-align: middle; } */ /* .col-lotto .row .col-4 .btn div:first-child i,.col-lotto .row .col-6 .btn div:first-child i{ line-height: 1; } */ /* .col-lotto .row .col-4 .btn:hover div:first-child,.col-lotto .row .col-6 .btn:hover div:first-child, .col-lotto .row .col-4 .btn.active div:first-child,.col-lotto .row .col-6 .btn.active div:first-child{ background: rgba(0, 0, 0, .5) !important; } */ /* .col-lotto .row .col-4 .btn span,.col-lotto .row .col-6 .btn span{ font-family: tahoma; font-weight: 400; } */ /* .col-lotto .row .col-4 .btn i,.col-lotto .row .col-6 .btn i{ font-size: 25px; font-style: normal; } */ .lotto-title h4 { font-family: inherit !important; /* color: #dc3545; */ /* color: #aa1423; */ color: #343a40; line-height: 1; margin-bottom: 0px; } .lotto-close { -webkit-filter: opacity(70%) grayscale(100%); /* Safari */ filter: opacity(70%) grayscale(100%); } .lotto-close .ribbon-lotto { background: rgba(0, 0, 0, 1); border-left: rgba(0, 0, 0, 1) 1px solid; vertical-align: top; } .lotto-close .ribbon-lotto:after { content: ""; position: absolute; display: block; bottom: 0; border: 15px solid rgba(0, 0, 0, 1); right: -15px; height: 30px; border-left-width: 0px; border-right-color: transparent; filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.04)); } /**********************************************/ .btn-move { padding: 0px; /* border: #970215 1px solid; */ background: #970215; font-size: 16px; line-height: 30px; height: 30px !important; margin-bottom: 0px; color: white; cursor: pointer; vertical-align: middle; display: flex; flex-direction: row; justify-content: space-between; align-items: center; transition: 1s; } .btn-move a { color: white; transition: 1s; } #hide-list-huay, #show-list-huay { overflow: hidden; width: 100%; margin-bottom: 2px; } #hide-list-huay { transition: all 1s; } #show-list-huay { transition: all 1s; } .btn-move span { display: inline-block; width: 100%; text-align: center; overflow: hidden; transition: all 1s; height: 100%; vertical-align: middle; } span.btn-move { display: inline-flex; width: 100%; text-align: center; overflow: hidden; height: 100%; transition: all 1s; vertical-align: middle; margin-bottom: 0px; margin-right: 2px; white-space: nowrap; } .btn-move-left:before, .btn-move-right:after { content: ""; position: relative; height: 30px; display: flex; } .btn-move-left { color: #fff !important; background: #333; margin-left: 15px !important; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .btn-move-right { color: #fff !important; background: #333; margin-right: 15px !important; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .btn-move-left:before { border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 15px solid #333; margin-left: -15px; } .btn-move-right:after { border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #333; margin-right: -15px; } .sidebar-tanghuay { width: 100%; padding-left: 7px; } #sidebar-huay { display: flex; flex-flow: column; justify-content: start; align-items: stretch; overflow: hidden; transition: all 1s; } #show_poy_list { opacity: 1; width: 30%; transition: all 1s; } #numpage_2 h3.mb-0 { font-family: inherit; font-size: 125%; } #numpage_1, #numpage_2 { transition: all 1s; } .sidebar-huay { /* min-width: 300px; */ width: 100%; background: #111; border-radius: 3px; padding: 3px; height: 80vmin; transition: 1s; } .sidebar-huay .btn { margin-bottom: -5px; } .sidebar-huay .title-huay { color: #dc3545; font-family: inherit; /* background: #790000; */ height: 25px; line-height: 1; width: 100%; padding-left: 5px; border-bottom: #333 1px dashed; } .sidebar-huay .title-huay i { font-size: 16px; } .sidebar-huay .list-huay { overflow-y: scroll; overflow-x: hidden; background: transparent; color: white; height: 100vmin; } .sidebar-huay .list-huay ol.num-huay { list-style: none; counter-reset: number; border-radius: 5px; overflow: hidden; } ol.num-huay li { counter-increment: number; } ol.num-huay li::before { content: counter(number) ". "; font-weight: bold; width: 1.2em; text-align: left; display: inline-block; margin-right: 10px; color: #555; padding-left: 3px; font-size: 80%; } ol.num-huay li:nth-child(odd) { background: rgba(255, 255, 255, .07); } .list-huay::-webkit-scrollbar { width: 8px; background: transparent; margin-left: 3px; } .list-huay::-webkit-scrollbar-track { border-radius: 6px; background: #52000b; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } .list-huay::-webkit-scrollbar-thumb { border-radius: 6px; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); background: #c72d3c; } .num-pad { width: 100%; } .num-pad h4 { font-family: inherit; color: #aa1423; } .label-number { text-align: center; width: 100%; } label.number { display: inline-block; width: 50px; height: 50px; margin: 0px 5px; font-size: 40px; font-weight: 500; text-align: center; line-height: 50px; background-color: rgba(0, 0, 0, 0.2); border: solid 1px #000000; color: #970215; border-radius: 2px; background-color: rgba(229, 229, 229, 0.2); border: solid 1px #970215; position: relative; vertical-align: middle; } label.number span { background: rgba(152, 59, 59, 0.8); width: 2px; height: 70%; position: absolute; top: 15%; left: 50%; animation-name: blink; animation-duration: 800ms; animation-iteration-count: infinite; opacity: 1; } .key-pad>.row>.col-3 { padding-left: 2px; padding-right: 2px; padding-bottom: 4px; } .key-pad>.row>.col-3 .btn { font-size: 20px; padding-left: 0px; padding-right: 0px; } .key-pad>.row>.col-3 .btn-blank { color: #fff; background-color: #ccc; background-image: none; border-color: #bbb; width: 100%; height: 100%; } .key-pad>.row>.col-3 .btn-reset, .key-pad>.row>.col-3 .btn-cancel { font-size: 16px; line-height: 1; height: 100%; word-break: break-all; } .box__condition-info h3 { font-size: 18px; border-radius: 5px; background: #dc3545; padding: 5px 10px; color: white; font-weight: normal; } .box__condition-info h2 { font-family: inherit; color: #dc3545; border-bottom: #ccc 1px dashed; font-size: 22px; } .box__condition-info { background: rgba(0, 0, 0, .05); border-radius: 5px; border: #ccc 1px solid; padding: 5px; line-height: 1.2; } .box__condition-info p { padding: 0 5px; margin-bottom: 0px; } .bet_num_count { font-size: 90%; text-align: center; line-height: 1; margin-bottom: 5px; font-weight: 500; text-shadow: #000 1px 1px 0px; color: #fff; } .g3-huay { width: auto !important; } @keyframes blink { from { opacity: 1; } to { opacity: 0; } } @media screen and (max-width:992px) { .sidebar-huay { width: auto; /* min-width: 300px; */ min-width: 20%; height: 100vmin; } } @media screen and (max-width:768px) { .g3-huay { width: 100% !important; } .sidebar-tanghuay>.d-flex>.flex-fill { display: inline-flex; flex: 1 0 26% !important; } .sidebar-huay .title-huay { font-size: 14px; height: 20px; } .sidebar-huay .title-huay i { font-size: 12px !important; } .sidebar-huay { width: auto; min-width: 20%; } #show_poy_list { opacity: 1; width: 28%; transition: all 1s; } } @media screen and (max-width:415px) { .sidebar-huay { width: auto; min-width: 80px; height: 100%; } .sidebar-huay .title-huay { font-size: 14px; } .sidebar-huay .title-huay i { font-size: 10px !important; display: none; } .num-huay { font-size: 14px; } .key-pad>.row>.col-3 .btn-reset, .key-pad>.row>.col-3 .btn-cancel { font-size: 14px; line-height: 1; height: 100%; word-break: break-all; } } @media screen and (max-width:376px) { .btn-tanghuay { font-size: 10px; } .row .col-3 a.menu-grid, .row .col-md-1 a.menu-grid, .row .col-lg-1 a.menu-grid, .row .col-4 a.menu-grid { padding: 0px; padding-top: 10px; padding-bottom: 3px; width: 100%; font-size: 12px; min-width: 50px; line-height: 1.5; } .sidebar-huay { height: 80%; } .key-pad>.row>.col-3 .btn-reset, .key-pad>.row>.col-3 .btn-cancel { font-size: 12px; line-height: 1; height: 100%; } } @media screen and (max-width:321px) { .key-pad>.row>.col-3 .btn-reset, .key-pad>.row>.col-3 .btn-cancel { /* font-size: 10px; */ line-height: 1; height: 100%; /* word-break: break-all; */ } .key-pad>.row>.col-3 .btn-reset span, .key-pad>.row>.col-3 .btn-cancel span { display: block } .lotto-title>h4 { font-size: 18px; } ul.countdown { font-size: 18px !important; } .row-btn-tanghuay .btn div:first-child i { font-size: 14px; font-style: normal; height: 100%; } .row-btn-tanghuay .btn div:last-child { font-style: normal; text-align: center; width: 27%; } .row-btn-tanghuay .btn span { font-family: Arial, Helvetica, sans-serif; /* font-weight: 400; */ font-size: 10px; } .btn-tanghuay { font-size: 12px !important; padding-right: 2px !important; } .btn-panghuay { font-size: 12px !important; padding-right: 2px !important; } } label.number { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /**********************************************/ .txt-24 { color: #28a745; animation: text-flicker 3s linear infinite; display: flex; width: 100%; flex-direction: row; justify-content: space-between; } #offset { animation: letter-flicker 2s linear infinite; } @keyframes text-flicker { 0% { opacity: 0.1; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } 2% { opacity: 1; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } 8% { opacity: 0.1; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } 9% { opacity: 1; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } 12% { opacity: 0.1; text-shadow: 0px 0px rgba(22, 242, 59, 1); } 20% { opacity: 1; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } 25% { opacity: 0.3; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } 30% { opacity: 1; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } 70% { opacity: 0.7; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } 72% { opacity: 0.2; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } 77% { opacity: .9; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } 100% { opacity: .9; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } } @keyframes border-flicker { 0% { opacity: 0.1; -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73); -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73); box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73); } 2% { opacity: 1; -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73); -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73); box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73); } 4% { opacity: 0.1; -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73); -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73); box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73); } 8% { opacity: 1; -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73); -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73); box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73); } 70% { opacity: 0.7; -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73); -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73); box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73); } 100% { opacity: 1; -webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73); -moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73); box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73); } } @keyframes letter-flicker { 0% { opacity: 0.1; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } 2% { opacity: 0.1; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } 4% { opacity: 1; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } 19% { opacity: 1; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } 21% { opacity: 0.1; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } 23% { opacity: 1; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } 80% { opacity: 1; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } 83% { opacity: 0.4; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } 87% { opacity: 1; text-shadow: 0px 0px 29px rgba(22, 242, 59, 1); } } .js-odoo { text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); fill: #fff; transform: scaleX(0.85); } span.js-odoo g { font-weight: 300; font-family: 'Mitr', sans-serif; } span.js-odoo g text { margin-right: 10px; } .js-odoo svg { transform: scaleX(0.85); } /* --------------------------------------------------- CONTENT STYLE ----------------------------------------------------- */ #content { width: 100%; padding: 0px; min-height: 100vh; transition: all 0.3s; position: absolute; top: 0; right: 0; /* padding-bottom: 56px; */ } @media screen and (max-width:992px) { .row-menu-grid { border-radius: 0px; margin-bottom: 50px; } .main-content { border-radius: 0px; /* margin-bottom: 50px; */ } .txt-box-news { flex-wrap: nowrap; flex-direction: column; } .txt-box-news .d-flex { margin-bottom: 8px; padding-bottom: 10px !important; border-bottom: #ccc dashed 1px; } .bar-powerball { display: block !important; } .bar-powerball-pc { display: none; } .ribbonbar .odometer { line-height: 1; margin-top: -20px; margin-left: -20px; margin-right: -20px; min-width: 50px; } } @media screen and (max-width:768px) { .mobile-view { display: block !important; } .container-fluid { padding: 0px; height: auto; /* margin-bottom: 52px; */ z-index: 1; } .row-menu-grid { border-radius: 0px; /* margin-bottom: 50px; */ } .main-content { border-radius: 0px; /* margin-bottom: 50px; */ } .txt-box-news { flex-wrap: nowrap; flex-direction: column; } .txt-box-news .d-flex { margin-bottom: 8px; padding-bottom: 10px !important; border-bottom: #ccc dashed 1px; } .bubblechat { display: none; } ul.countdown { list-style: none; margin: 0px 0; padding: 0; display: flex; text-align: right; overflow: hidden; height: 25px; } ul.countdown li { display: inline-block; } ul.countdown li span { font-size: 25px; font-weight: 300; line-height: 25px; } ul.countdown li.seperator { font-size: 15px; line-height: 30px; vertical-align: middle; } ul.countdown li p { color: #a7abb1; font-size: 14px; } .lotto-head>h5 { font-weight: 400 !important; text-align: right; margin-bottom: 0px; font-size: 14px; } .ribbon-lotto { background: rgba(0, 0, 0, .3); height: 20px; width: auto; display: inline-block; position: absolute; color: #FFF; line-height: 20px; padding: 0px 5px; margin-top: 5px; border-left: rgba(0, 0, 0, .3) 1px solid; font-size: 16px; } .ribbon-lotto i { font-size: 14px; } .ribbon-lotto:after { content: ""; position: absolute; display: block; bottom: 0; border: 10px solid rgba(0, 0, 0, .3); right: -10px; height: 20px; border-left-width: 0px; border-right-color: transparent; filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.04)); } .lotto-close .ribbon-lotto:after { content: ""; position: absolute; display: block; bottom: 0; border: 10px solid rgba(0, 0, 0, 1); right: -10px; height: 20px; border-left-width: 0px; border-right-color: transparent; filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.04)); } .lotto-close .ribbon-lotto span.round { color: black; background: rgba(255, 255, 255, 0.5); padding: 0px 2px; padding-bottom: 2px; } .bg-option>.d-flex>.flex-fill { flex: 1 0 21% !important; } .bg-option .bg-btn button { padding: 5px; } .option2btn:active, .option2btn.active, .option2btn.focus{ background: black !important; outline: #000 1px dashed !important; outline-offset: 1px !important; } .bar-powerball { display: block; } .bar-powerball-pc { display: none; } .btn-tanghuay { font-size: 12px !important; padding-right: 4px; } .btn-panghuay { font-size: 12px !important; padding-right: 4px; } } /********* end member ********/ /*************page loading *****************/ #app { position: relative; opacity: 1; transition: all 0.3s; } #loading { background: url("../images/loading-dots.gif") no-repeat center center rgba(0,0,0,0.5); background-size: 100px; position: fixed; height: 100vh; width: 100%; z-index: 9999; } /* Animation */ @-webkit-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } /******************bank***********************/ .icon-bank { padding: 10px 40px; border-radius: 5px; width: 100%; } img.icon-bank { width: 100%; height: auto; min-height: 50px; min-width: 50px; } .icon-kbank { background: #138f2d; } .icon-scb { background: #4e2e7f; } .icon-ktb { background: #1ba5e1; } .icon-bbl { background: #1e4598; } /* #firsttime label::before, #secondtime label::before{ content:"\f22d"; font-family: "Font Awesome 5 Pro"; position: relative; margin-right: 5px; } */ .input-hidden { position: absolute; left: -9999px; } input[type=radio]:checked+label>img { border: 1px solid #fff; box-shadow: 0 0 3px 3px #090; } input[type=radio]:checked+label { background: #090; color: white; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } input[type=radio]+label { margin-bottom: 15px !important; } input[type=radio]+label>span { font-weight: normal; text-align: center; margin: 0 5px; font-weight: normal; display: flex; flex-direction: column; justify-content: center; transition: all 0.3s; } input[type=radio]+label>span.badge { margin: 0 5px 5px 5px; } input[type=radio]:checked+label>span.badge { margin: 0 5px 5px 5px; } input[type=radio]:checked+label>span { margin: 0 5px; font-weight: normal; display: flex; flex-direction: column; justify-content: flex-end; text-align: right; transition: all 0.3s; } input[type=radio]:checked+label::after { content: "\f058"; font-family: "Font Awesome 5 Pro"; position: relative; display: flex; flex-direction: row; justify-content: flex-start; margin-top: -20px; margin-left: -5px; color: green; background: white; padding: 1px; width: 22px; height: 22px; border-radius: 50%; line-height: 1; font-weight: bold; font-size: 16px; border: #090 2px solid; text-align: center; } input[type=radio]+label::before { content: ""; display: none; } /* Stuff after this is only to make things more pretty */ input[type=radio]+label>img { border: 1px solid #444; width: 100%; transition: 500ms all; } input[type=radio]:checked+label>img { transform: none; /* rotateZ(-10deg) rotateX(10deg); */ } .detail-bank { padding: 10px 10px; } @media screen and (max-width:768px) { .icon-bank { padding: 5px 20px; } .detail-bank { padding: 5px 5px; } input[type=radio]+label { font-size: 85%; } input[type=radio]+label>span.badge { margin: 0 3px 2px 3px; } input[type=radio]:checked+label>span.badge { margin: 0 3px 2px 3px; } input[type=radio]+label>span { margin: 0 3px 2px 3px; } input[type=radio]:checked+label>span { margin: 0 3px 2px 3px; } } .fromacc::after { content: ""; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #b8daff; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; font-size: 80px; color: #212529; position: absolute; top: 50%; margin-top: -25px; right: -15px; z-index: 10; color: lightseagreen; } .dataTables_wrapper.form-inline { display: flex; flex-direction: column; width: 100%; } .dataTables_wrapper { padding: 10px; } .dataTables_wrapper>.row { width: 100%; } .dataTables_wrapper>.row>.col-sm-12 { padding: 0 5px; } .dataTables_length label { display: inline-block; margin-bottom: 5px; width: auto; } .dataTables_length label span { display: inline-block; line-height: 1; vertical-align: middle; font-size: 90%; } .dataTables_filter label { display: inline-block; margin-bottom: 5px; width: auto; } .datatable th.datetime { width: 15%; text-align: center; } .datatable th.datetime span { display: inline-block; } .datatable th.option { width: 8%; text-align: center; } .datatable th.totalbet { width: 15%; text-align: center; } .datatable th.totalbet span { display: inline-block; } .datatable th, .datatable td { vertical-align: middle !important; } .datatable th:first-child, .datatable td:first-child { padding-left: 10px; } .dataTables_paginate .page-item.active .page-link { z-index: 1; color: #fff; background-color: #dc3545; border-color: #dc3545; } @media screen and (max-width:768px) { .fromacc::after { content: ""; /* display: flex; flex-direction: column; justify-content: flex-end; align-items: center; */ width: 0; height: 0; border-right: 30px solid transparent; border-top: 30px solid #b8daff; border-left: 30px solid transparent; display: block; text-align: center; position: relative; font-size: 80px; color: #212529; top: 0; left: 50%; bottom: 0; margin-top: -16px; right: 0; margin-left: -35px; z-index: 10; color: lightseagreen; margin-bottom: 0px !important } .toacc { margin-top: -40px; } .datatable th, .datatable td, .datatable .btn i { font-size: 12px; } .datatable .btn { padding: 0px 5px; } .dataTables_filter label input { width: 100% !important; } .dataTables_filter label { padding-right: 5px !important; } .dataTables_length { text-align: left !important; } .dataTables_length label { padding-left: 5px !important; vertical-align: middle; } .dataTables_wrapper { padding: 0px; } div.dataTables_wrapper div.dataTables_paginate ul.pagination { margin: 2px 0; white-space: nowrap; justify-content: center; } .datatable th.datetime { width: 33%; } .datatable th.option { width: 10%; } .datatable th.totalbet { width: 25%; } } ol.list-numsets { list-style: none; counter-reset: my-awesome-counter; } ol.list-numsets li { counter-increment: my-awesome-counter; position: relative; } ol.list-numsets li::before { position: absolute; content: counter(my-awesome-counter) ". "; background: #d6d8db; padding: 2px 5px; border-radius: 3px; font-weight: bold; margin-left: -60px; min-width: 50px; text-align: center; } /************ add bank status **************/ .addbankstatus { width: 100%; display: block; margin: 10px 0; } .addbankstatus .status { display: flex; flex-direction: column; text-align: center; padding: 5px 0px; min-width: 140px; } .addbankstatus .status small { color: black; font-weight: bold; } .addbankstatus .status.wait { background: #1ba5e1; color: white; } .addbankstatus .status.confirm { background: #28a745; color: white; } .addbankstatus .status.cancel { background: #dc3545; color: white; } /*******************poyyyyyyyyyyyyyyyy*******************/ .btn-poy { padding-top: 10px; padding-left: 5px; padding-right: 5px; display: flex; flex-direction: row; justify-content: center; align-items: center; transform: all 0.5s; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; width: 99%; margin-top: 2px; } .btn-poy.active, .btn-poy:hover { border-left: 1px solid rgba(255, 255, 255, 0.5) !important; border-right: 1px solid rgba(255, 255, 255, 0.5) !important; border-top: rgba(255, 255, 255, 0.5) 5px solid !important; transform: all 0.5s; } .btn-poy span { display: inline-block; line-height: 1.2; } .btn-poy div { height: 100%; text-align: left; } .btn-poy i { font-size: 120%; margin-right: 5px; vertical-align: middle; display: inline-block; line-height:1; margin-top:-8px; } @media screen and (max-width:992px) { .btn-poy { font-size: 75%; line-height: 1.2; vertical-align: middle; } .btn-poy span { display: block; } .btn-poy i { font-size: 180%; margin-right: 5px; vertical-align: middle; display: inline-block; } } @media screen and (max-width:320px){ .btn-poy i{ display:none; } } .poy-content{ height: 0px; width: 100%; opacity: 0; position: absolute; overflow: hidden; transition: all 0.0s; } .poy-content.active{ max-height: 100%; display: block; position: relative; padding: 10px !important; z-index: 1 !important; height: 100%; width: 100%; opacity: 1; transition: all 0.5s; } .poy-list{ width: 100%; height: auto; overflow: hidden; border-radius: 5px; border: #111 1px solid; margin-bottom: 5px; display: inline-block; margin-left: 2.5px; margin-right: 2.5px; } .poy-list{ width:32.6% !important; } @media screen and (max-width: 1199.98px){ .poy-list{ width:49% !important; } } @media screen and (max-width: 991.98px){ .poy-list{ width:48.8% !important; } } @media screen and (max-width: 767.98px) { .poy-list{ width:99% !important; } } .poy-list-content{ background: white; padding: 5px 10px; color: #6c757d; } .poy-list-content .row .col .ribbon-lotto i { font-size: 14px !important; } .poy-list-content .row .col .ribbon-lotto { background: rgba(0, 0, 0, .3); height: 20px; width: auto; display: inline-block; position: absolute; color: #FFF; line-height: 20px; padding: 0px 5px; margin-top: 5px; border-left: rgba(0, 0, 0, .3) 1px solid; font-size: 16px; } .poy-list-content .row .col .ribbon-lotto:after { content: ""; position: absolute; display: block; bottom: 0; border: 10px solid rgba(0, 0, 0, .3); right: -10px; height: 20px; border-left-width: 0px; border-right-color: transparent; filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.04)); } .poy-list-head{ width: 100%; min-height: 30px; line-height: 1; border-bottom: #111 1px solid; padding: 6px 10px 0px 10px; vertical-align: middle; background: #fff; overflow: hidden; } .poy-government small, .poy-thaistock small, .poy-foreignstock small, .poy-yeekee small{ font-weight: normal!important; } .poy-type{ font-weight: lighter; padding: 5px; border-radius: 3px; line-height: 1.2; text-align: right; background: #eee; color: #000; } .poy-type h3{ line-height: 1; margin-bottom: 0; } .number-win{ color: cadetblue; font-size: 170%; line-height: 1; } .poy-government{ background: #17a2b8; } .poy-thaistock{ background: #007bff; } .poy-foreignstock{ background:#6610f2; } .poy-yeekee{ background: #dc3545; } .poy-list-head .poy-status{ display: block; float: right; margin-top: -6px; margin-right: -10px; width:auto; min-height: 30px; /* box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 4px solid rgba(255, 255, 255, 0.5); */ color: #000; font-size: 80%; /* padding-top: 12px; */ padding-top: 8px; overflow: hidden; padding-left: 5px; padding-right: 5px; } /* .poy-status::before{ content: "Status"; font-size: 50% !important; line-height: 1; display: block; position: relative; margin-top: -9px; color: rgba(0, 0, 0, 0.4); border-bottom: rgba(0, 0, 0, 0.1) 1px solid; } */ .poy-list-head .poy-status.notyet{ background: #ffc107; } .poy-list-head .poy-status.success{ background: #3ac028; color: white; } .poy-list-head .poy-status.win{ background: #3ac028; color: white; } .poy-list-head .poy-status.lost{ background:#dc3545; color: white; } /*******************accordion********************/ .accordion .card{ margin:5px 0 0; } .accordion .card-header{ font-family: inherit; font-weight:normal; color: #111; background:#fff; outline: 0; cursor:pointer; padding: 0; } .accordion .card-header h4{ font-family: inherit; } .accordion .card-header:hover { background:#eee; } .accordion .card-body { position:relative; margin:0 0 0; padding:10px; color:#fff; background:#333; } .accordion .card-body a{ color: lightcoral; } .accordion .card-body:after { position: absolute; top: -14px; left: 25px; display: block; width: 0; height: 0; margin-left: -7px; border-width: 7px; border-style: solid; border-color: transparent transparent #333 transparent; content: ''; } /************* tab ***************/ #menucredit .nav-tabs { border-bottom: 1px solid white; } #menucredit .nav-link{ color: #000; background: #dee2e6; border: white 1px solid; } #menucredit .nav-link.active{ color: white; background: #b90504; border: indianred 1px solid; } /*****************profile setting***************/ .button-upload-file { overflow: hidden; position: relative; width: 80px; height: 80px; cursor: pointer; } .button-upload-file input { width: 2000px; height: 2000px; display: block; position: absolute; top: -100%; left: -100%; } .button-upload-file .preview { position: relative; z-index: 2; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 80px; height: 80px; display: block; overflow: hidden; } .button-upload-file img { position: absolute; top: 50%; left: 50%; margin-right: -50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .button-upload-file .icon { height: 32px; width: 32px; background: #3b5898; position: absolute; z-index: 2; bottom: 0px; right: 0px; text-align: center; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; padding: 5px 0px 0px 1px; } .button-upload-file .icon i { color: #fff; } .profilesetting .col-12{ margin-bottom: 10px; } /***************** btn-af ***************/ .btn-af i { font-size: 150%; line-height: 1; } .btn-af { padding-left: 0px; padding-right: 0px; background: white; border-radius: 0.25rem; } @media screen and (max-width:321px){ .btn-af{ font-size: 90%; } } /********** btn-hand ***************/ .btn-hand{ padding: 5px 25px; } .text-user{ width: 100%; word-wrap: none; padding: 0 2px; } @media screen and (max-width:321px){ .btn-hand{ font-size: 80%; padding: 5px 20px; padding-bottom: 0px; } .text-user{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 60px; font-size: 80%; padding: 0 2px; } } #contentbox{ -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .box-list-jackpot{ width: 100%; height: 140px; overflow-y: scroll; overflow-x: hidden; padding-right: 5px; } .btn-line{ background: url(../images/line-contact-icon-white.png) center center no-repeat; background-size: cover; height: 32px; width: 32px; line-height: 0; border-radius: 5px; vertical-align: middle; margin-top:3px; margin-left: 5px; margin-right: 5px; } /***********************************/ .btn:focus, .btn.focus { outline: 0; box-shadow: 0 0 0 0.0rem rgba(0, 123, 255, 0.25); } .box__keyboard .btn-outline-primary.active, .box__keyboard .btn-outline-primary:active{ color:#fff; background-color:#007bff; border-color:#007bff; text-decoration: none !important } .btn-outline-primary:hover{ color:#007bff; background-color:unset; border-color:#007bff; text-decoration: none !important } .mobileHoverFix:hover, .mobileHoverFix.hover { color:#fff; background-color:#007bff; border-color:#007bff; } /************************************/ .spinner { margin: 0 auto; margin-top: 100px; width: 100px; height: 100px; text-align: center; font-size: 10px; z-index: 88; } .spinner > div { background-color: #a0171d; height: 100%; width: 10px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; margin-left: 4px; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; margin-left: 4px; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; margin-left: 4px; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; margin-left: 4px; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } } /***************************/ small.smallspan{ display: flex; flex-direction: column; } @media screen and (max-width:575px){ small.smallspan{ display: flex; flex-direction: row; justify-content: flex-end; } small.smallspan span:first-child{ margin-right:5px; } } @media screen and (min-width:1012px){ small.smallspan{ display: flex; flex-direction: row; justify-content: flex-end; margin-top:3px; } small.smallspan span:first-child{ margin-right:5px; } } .txt-app span{ display:inline-block; } .btn-app{ width:100%; max-width: 200px; } .img-app{ width:100%; max-width: 600px; } .bt-room input[type="radio"]{ visibility: hidden; height: 0; width: 0; } .bt-room label { display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; background-color: #454545; color: white; /* padding: 5px 10px; */ padding: 5px 5px; border-radius: 3px; width:100%; margin-bottom: 0px !important; } .bt-room input[type="radio"] + .bt-room label{ margin-bottom: 0px !important; display: inline-block; } .bt-room input[type="radio"]:checked + label.bt-diamond span, .bt-room input[type="radio"]:checked + label.bt-platinum span, .bt-room input[type="radio"]:checked + label.bt-vip span{ text-align: right; } .bt-room input[type="radio"]:checked + label.bt-diamond span.badge, .bt-room input[type="radio"]:checked + label.bt-platinum span.badge, .bt-room input[type="radio"]:checked + label.bt-vip span.badge{ text-align: center; } .bt-room input[type="radio"]:checked + label.bt-diamond{ background: url(../images/diamond-bg.gif) center center; text-align: right; } .bt-room input[type="radio"]:checked + label.bt-platinum{ background: url(../images/diamond-bg.gif) top center; text-align: right; } .bt-room input[type="radio"]:checked + label.bt-vip{ background-color: #790000; text-align: right; } .bt-room input[type=radio]:checked+label.bt-vip::after ,.bt-room input[type=radio]:checked+label.bt-diamond::after , .bt-room input[type=radio]:checked+label.bt-platinum::after { content: ""; border: none; background: none; } .bt-room input[type=radio]:checked+label.bt-vip::before { content: "\f587"; font-family: "Font Awesome 5 Pro"; position: absolute; display: flex; flex-direction: row; justify-content: flex-start; margin-top: -15px; margin-left: 0px; color: #C70039; background: white; padding: 1px; padding-left:2px; padding-top:2px; width: 22px; height: 22px; border-radius: 50%; line-height: 1; font-weight: bold; font-size: 14px; border: #C70039 2px solid; /* text-align: center; */ /* text-align: right; */ } .bt-room input[type=radio]:checked+label.bt-diamond::before { content: "\f3a5"; font-family: "Font Awesome 5 Pro"; position: absolute; display: flex; flex-direction: row; justify-content: flex-start; margin-top: -15px; margin-left: 0px; color: #006EE3; background: white; padding: 1px; padding-top: 4px; width: 22px; height: 22px; border-radius: 50%; line-height: 1; font-weight: bold; font-size: 14px; border: #006EE3 2px solid; /* text-align: center; */ /* text-align: right; */ } .bt-room input[type=radio]:checked+label.bt-platinum::before { content: "\f6cf"; font-family: "Font Awesome 5 Pro"; position: absolute; display: flex; flex-direction: row; justify-content: flex-start; margin-top: -15px; margin-left: 0px; color: #A000DC; background: white; padding: 1px; padding-top: 2px; padding-left: 2.5px; width: 22px; height: 22px; border-radius: 50%; line-height: 1; font-weight: bold; font-size: 14px; border: #A000DC 2px solid; /* text-align: center; */ /* text-align: right; */ } .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #accordionExample .card-header button.btn-link{ color: darkred; white-space: normal; width: 100%; text-align: left; } #accordionExample.accordion .card-header:hover { background: darkred; color: #fff; } #accordionExample .card-header:hover button.btn-link{ color: #fff; } .btn-contactbox{ width:100%; text-align: center; max-height:100px; } .btn-contactbox i{ font-size: 50px; } .btn-contactbox span{ display: block; } .dd-box{ /* width:256px; */ width: auto; height: auto; } .dd-gold{ /* font: bold 16px/36px sans-serif; */ font-family: inherit; font-size: 16px; font-weight: 400; line-height: 40px; text-align:center; /* color:#3c2e09; */ color: lightgoldenrodyellow; text-shadow:0 1px #000; /* text-shadow:0 1px #fe98; */ border-radius:4px; box-sizing: border-box; border: 1px solid #ffa3; background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); box-shadow:0 0 0 1px #0003, 0 2px 2px #0003; } .dd-box .badge{ text-shadow: #000 1px 1px 0px; background: #6A2E04; color: lightgoldenrodyellow; font-size:100%; border: yellow 2px dotted; border-radius:50px; padding-left: 20px; padding-right: 20px; } .dd-box img{ height:30px; margin-bottom:5px; } .dd-box b{ display: inline; color: orange; text-shadow: block 1px 1px 0px; } @media screen and (max-width:766px){ .dd-gold{ line-height: 24px; padding-top:5px; } } h1.circular { -webkit-text-stroke: 1px black; color: white; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } .imgCnt{ position:relative; width: 40px; top: -16px; } .imgtop, .imgbelow { position: absolute; } .imgtop { z-index: 1;} .imgbelow { z-index: 0;} +.dd-box{ /* width:256px; */ width: auto; height: auto; } .dd-gold{ /* font: bold 16px/36px sans-serif; */ font-family: inherit; font-size: 16px; font-weight: 400; line-height: 40px; text-align:center; /* color:#3c2e09; */ color: lightgoldenrodyellow; text-shadow:0 1px #000; /* text-shadow:0 1px #fe98; */ border-radius:4px; box-sizing: border-box; border: 1px solid #ffa3; background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); box-shadow:0 0 0 1px #0003, 0 2px 2px #0003; } .dd-box .badge{ text-shadow: #000 1px 1px 0px; background: #6A2E04; color: lightgoldenrodyellow; font-size:100%; border: yellow 2px dotted; border-radius:50px; padding-left: 20px; padding-right: 20px; } .dd-box img{ height:30px; margin-bottom:5px; } .dd-box b{ display: inline; color: orange; text-shadow: block 1px 1px 0px; } @media screen and (max-width:766px){ .dd-gold{ line-height: 24px; padding-top:5px; } } .recommendnumber { display: block; text-align: center; font-size: 1.5em; margin: 5px auto; padding: 10px; width: 100%; color: #fff !important; text-shadow: 0px 0px 5px black; border-radius: 5px; text-decoration: none; border:2px gray solid; height: auto; background-color: #E74C3C; position: relative; -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */ animation-name: example; animation-duration: 4s; animation-iteration-count: infinite; line-height: 1.2; } .recommendnumber span, .recommendnumber small{ display: inline-flex; } .recommendnumber:hover{ border-color: crimson; } a.recomnum{ text-decoration: none !important; } .returnbtn{ display: block; text-align: center; font-size: 1.5em; margin: 5px auto; padding: 10px; width: 100%; text-decoration: none; border:2px black solid; background: gray; color: white; line-height: 1.2; border-radius: 5px; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes example { 0% {background-color:#C0392B; } 25% {background-color:#F1C40F; } 50% {background-color:#5DADE2; } 75% {background-color:#27AE60; } 100% {background-color:#C0392B; } } /* Standard syntax */ @keyframes example { 0% {background-color:#C0392B;} 25% {background-color:#F1C40F; } 50% {background-color:#5DADE2; } 75% {background-color:#27AE60; } 100% {background-color:#C0392B; } } /************ button recom ***************/ .tab-recom{ display: flex; flex-wrap: wrap; justify-content: center; } .btn-recom{ text-align: center; color: white; margin: 2px; flex: 0 0 48%; max-width: 50%; position: relative; } .btn-recom a{ color: white; } .twonum{ border: #006EE3 2px solid; background: #3498DB; } .twonum.active{ background: #0D41FF !important; border: white 2px dashed !important; } .threenum{ border: #C0392B 2px solid; background: #EC7063; } .threenum.active{ background: #C0392B !important; border: white 2px dashed !important; } .livebtn { display: block; text-align: center; font-size: 1em; margin: 0px auto; padding: 5px; width: 100%; color: #fff !important; text-shadow: 0px 0px 5px black; border-radius: 5px; text-decoration: none; border:1px #555 solid; height: auto; background-color: #E74C3C; position: relative; -webkit-animation-name: examplez; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */ -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */ animation-name: examplez; animation-duration: 1s; animation-iteration-count: infinite; line-height: 1; text-decoration: none; } .livebtn small{ display: flex; justify-content: center; align-items: center; color: lightgoldenrodyellow; } .livebtn i{ font-size: 0.9em; vertical-align: top; } .livebtn span{ display: inline-flex; justify-content: center; align-items: center; color: lightgoldenrodyellow; } .livebtn:hover{ border-color: crimson; text-decoration: none !important; } a:hover .livebtn{ text-decoration: none !important; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes examplez { 0% {background-color:#C0392B; } 50% {background-color:#641E16; } 100% {background-color:#C0392B; } } /* Standard syntax */ @keyframes examplez { 0% {background-color:#C0392B; } 50% {background-color:#641E16; } 100% {background-color:#C0392B; } } .lotto-head.lotto-vn-vip { background-color: rgb(150,99,196); border: rgb(109,40,170) 1px solid; } .lotto-head.lotto-vn-vip2 { background-color: rgb(61, 88, 196); border: rgb(38, 0, 232) 1px solid; } /* ****************************** */ .btn-outline-danger:not(:disabled):not(.disabled).active{ color: #fff !important; background-color: #dc3545 !important; border-color: #dc3545 !important; } .btn-outline-danger { color: #dc3545 !important; background-color: white !important; background-image: none; border-color:#dc3545 !important; word-wrap: break-word; overflow: hidden; } @media screen and (max-width:320px){ .btn-af.btn-outline-danger{ font-size: 80%; } } .btn-outline-danger:hover{ color: white !important; background-color: #dc3545 !important; background-image: none; border-color: #dc3545 !important; } .page-link:hover { z-index: 2; color: #dca235; text-decoration: none; background-color: #e9ecef; border-color: #dee2e6; } .page-link { z-index: 2; color: #333; text-decoration: none; } .btn-rood{ padding: 5px; border-radius: 0; border-right: 0; width: 100%; } .btn-group-toggle:last-child>.btn-rood{ border-right: solid 1px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .btn-group-toggle:first-child>.btn-rood{ border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .txt-num{ font-family: 'Mitr', cursive; } .btn-group-toggle>.btn-outline-danger.focus,.btn-group-toggle>.btn-outline-danger:hover{ background: none !important; color: #dc3545 !important; } .btn-group-toggle>.btn-outline-danger.focus.active, .btn-group-toggle>.btn-outline-danger.active{ color: white !important; background: #dc3545 !important; } .btn-limitnum{ border: #FFCC00 1px solid; color: #FFCC00; font-weight: bold; } .btn-group-toggle>.btn-limitnum.focus,.btn-group-toggle>.btn-limitnum:hover{ background: none !important; color: #FFCC00 !important; } .btn-group-toggle>.btn-limitnum.focus.active, .btn-group-toggle>.btn-limitnum.active{ color: white !important; background: #FFCC00 !important; } .btn-group-toggle>.btn-outline-secondary.focus,.btn-group-toggle>.btn-outline-secondary:hover{ background: none !important; color: #6c757d !important; } .btn-group-toggle>.btn-outline-secondary.focus.active, .btn-group-toggle>.btn-outline-secondary.active{ color: white !important; background: #6c757d !important; } #nav-tab1.nav-pills .nav-link.active{ color: #fff; text-shadow: rgb(105, 21, 21) 1px 1px 0; background-color: #dc3545; border-bottom-left-radius: 0; border-bottom-right-radius: 0; line-height: 1; display: flex; justify-content: center; align-items: center; font-weight: 600; padding: 20px 0 !important; border-bottom-width: 8px; } #nav-tab1.nav-pills .nav-link{ display: flex; justify-content: center; align-items: center; border: #95111e 1px solid; border-radius: 10px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; font-weight: 600; text-shadow: rgb(255, 255, 255) 1px 1px; background-color: rgb(199, 199, 199); color: #dc3545; } #samtua{ position: relative; } /* #ninetybtn,#roodfrontbtn,#roodbackbtn{ margin-left: -8px; } @media screen and (max-width:767.98px){ #ninetybtn,#roodfrontbtn,#roodbackbtn{ margin-left: 0px; } } */ .overlay-disable { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background: black; opacity: .5; z-index: 10; } /* animated button */ .animated-button1 { background: linear-gradient(-30deg, #3d0b0b 50%, #2b0808 50%); padding: 8px 15px; margin: 5px; display: inline-block; -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); overflow: hidden; color: #f7d4d4; font-size: 16px; letter-spacing: 2.5px; text-align: center; text-transform: uppercase; text-decoration: none; -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); } .animated-button1::before { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #ad8585; opacity: 0; -webkit-transition: .2s opacity ease-in-out; transition: .2s opacity ease-in-out; } .animated-button1:hover::before { opacity: 0.2; } .animated-button1 span { position: absolute; } .animated-button1 span:nth-child(1) { top: 0px; left: 0px; width: 100%; height: 2px; background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 8, 0)), to(#d92626)); background: linear-gradient(to left, rgba(43, 8, 8, 0), #d92626); -webkit-animation: 2s animateTop linear infinite; animation: 2s animateTop linear infinite; } @keyframes animateTop { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } .animated-button1 span:nth-child(2) { top: 0px; right: 0px; height: 100%; width: 2px; background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 8, 0)), to(#d92626)); background: linear-gradient(to top, rgba(43, 8, 8, 0), #d92626); -webkit-animation: 2s animateRight linear -1s infinite; animation: 2s animateRight linear -1s infinite; } @keyframes animateRight { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } .animated-button1 span:nth-child(3) { bottom: 0px; left: 0px; width: 100%; height: 2px; background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 8, 0)), to(#d92626)); background: linear-gradient(to right, rgba(43, 8, 8, 0), #d92626); -webkit-animation: 2s animateBottom linear infinite; animation: 2s animateBottom linear infinite; } @keyframes animateBottom { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } } .animated-button1 span:nth-child(4) { top: 0px; left: 0px; height: 100%; width: 2px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 8, 0)), to(#d92626)); background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #d92626); -webkit-animation: 2s animateLeft linear -1s infinite; animation: 2s animateLeft linear -1s infinite; } @keyframes animateLeft { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); } } .animated-button1::before { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #ad8585; opacity: 0; -webkit-transition: .2s opacity ease-in-out; transition: .2s opacity ease-in-out; } .animated-button1:hover::before { opacity: 0.2; } .animated-button1 span { position: absolute; } .animated-button1 span:nth-child(1) { top: 0px; left: 0px; width: 100%; height: 2px; background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 8, 0)), to(#d92626)); background: linear-gradient(to left, rgba(43, 8, 8, 0), #d92626); -webkit-animation: 2s animateTop linear infinite; animation: 2s animateTop linear infinite; } @keyframes animateTop { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } .animated-button1 span:nth-child(2) { top: 0px; right: 0px; height: 100%; width: 2px; background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 8, 0)), to(#d92626)); background: linear-gradient(to top, rgba(43, 8, 8, 0), #d92626); -webkit-animation: 2s animateRight linear -1s infinite; animation: 2s animateRight linear -1s infinite; } @keyframes animateRight { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } .animated-button1 span:nth-child(3) { bottom: 0px; left: 0px; width: 100%; height: 2px; background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 8, 0)), to(#d92626)); background: linear-gradient(to right, rgba(43, 8, 8, 0), #d92626); -webkit-animation: 2s animateBottom linear infinite; animation: 2s animateBottom linear infinite; } @keyframes animateBottom { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } } .animated-button1 span:nth-child(4) { top: 0px; left: 0px; height: 100%; width: 2px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 8, 0)), to(#d92626)); background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #d92626); -webkit-animation: 2s animateLeft linear -1s infinite; animation: 2s animateLeft linear -1s infinite; } @keyframes animateLeft { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); } } .animated-button1{ margin-top: -10px; width: 100%; } .animated-button1:hover{ text-decoration: none; color: gold; } .topbox { border: 1px #333 solid; border-radius: 5px; display: block; margin-top: 0px; padding: 10px 0; background: #343a40; /* color: lightgoldenrodyellow; */ line-height: 1; } .marqueemain { background-color: #fff; border: #555 1px solid; padding: 5px 10px; margin-bottom: 0px; } /********************upload file*****************/ .file-upload { background-color: #ffffff; width: 100%; margin: 0 auto; padding: 0 20px 20px 20px; } .file-upload-btn { width: 100%; margin: 0; color: #fff; background: rgb(31, 119, 178); border: none; padding: 10px; border-radius: 4px; border-bottom: 4px solid rgb(21, 96, 130); transition: all .2s ease; outline: none; text-transform: uppercase; font-weight: 700; } .file-upload-btn:hover { background: rgb(24, 137, 212); color: #ffffff; transition: all .2s ease; cursor: pointer; } .file-upload-btn:active { border: 0; transition: all .2s ease; } .file-upload-content { display: none; text-align: center; } .file-upload-input { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; outline: none; opacity: 0; cursor: pointer; } .image-upload-wrap { margin-top: 20px; border: 2px dashed rgb(31, 82, 178); position: relative; } .image-dropping, .image-upload-wrap:hover { background-color: rgb(64, 142, 216); border: 2px dashed #ffffff; } .image-title-wrap { padding: 0 15px 15px 15px; color: #222; } .drag-text { text-align: center; } .drag-text h3 { font-weight: 100; text-transform: uppercase; color: rgb(5, 37, 95); padding: 60px 0; } .file-upload-image { max-height: 200px; max-width: 200px; margin: auto; padding: 20px; } .remove-image { width: 200px; margin: 0; color: #fff; background: #cd4535; border: none; padding: 10px; border-radius: 4px; border-bottom: 4px solid #b02818; transition: all .2s ease; outline: none; text-transform: uppercase; font-weight: 700; } .remove-image:hover { background: #c13b2a; color: #ffffff; transition: all .2s ease; cursor: pointer; } .remove-image:active { border: 0; transition: all .2s ease; } /********************** carousel slide ****************/ .carousel-view>.bg-danger{ background-color: #d59929 !important; color: white !important; } .carousel-inner { height: auto; width: 100%; } /* Count nav-pills */ .nav-slide { position: relative; right: 0; bottom: 0; left: 0; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; padding-left: 0; margin-right: 0; margin-left: 0; list-style: none; } .nav-slide { width: 100%; counter-reset: number; } .nav-slide>li>span:before { content: counter(number); counter-increment: number; display: inline-block; } #nav1.nav-slide>li>span:before { content: counter(number); counter-increment: none; display: inline-block; visibility: hidden; } #nav1.nav-slide>li>.flag-icon { box-shadow: 0 0 1px rgba(0, 0, 0, .3); vertical-align: middle; float: left; margin-left: 5px !important; margin-top: 3px !important; } .card-header .flag-icon { box-shadow: 0 0 1px rgba(0, 0, 0, .3); vertical-align: middle; float: left; margin-left: 5px !important; margin-top: 3px !important; } .nav-slide .active { background-color: #fff; -webkit-box-shadow: inset 0px 0px 0px 2px #976f02; -moz-box-shadow: inset 0px 0px 0px 2px #976f02; box-shadow: inset 0px 0px 0px 2px #976f02; } .nav-slide li { position: relative; -ms-flex: 0 1 auto; flex: 0 1 auto; width: auto !important; height: auto !important; padding: 5px; text-align: center; margin-right: 2px; margin-left: 2px; margin-bottom: 3px; text-indent: 0px !important; cursor: pointer; } .nav-slide-yeekee li { position: relative; -ms-flex: 0 1 auto; flex: 0 1 auto; width: auto !important; min-width: 30px; height: auto !important; padding: 5px; text-align: center; margin-right: 2px; margin-left: 2px; margin-bottom: 3px; text-indent: 0px !important; cursor: pointer; } .nav-slide-yeekee { width: 100%; flex-wrap: wrap; position: relative; right: 0; bottom: 0; left: 0; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; padding-left: 0; margin-right: 0; margin-left: 0; list-style: none; } .nav-slide-yeekee { width: 100%; counter-reset: number; } .nav-slide-yeekee>li>span:before { content: counter(number); counter-increment: number; display: inline-block; } .nav-slide-yeekee .active { background-color: #fff; -webkit-box-shadow: inset 0px 0px 0px 2px #976f02; -moz-box-shadow: inset 0px 0px 0px 2px #976f02; box-shadow: inset 0px 0px 0px 2px #976f02; font-weight: bold; } /************************/ .nav-slide li, .nav-slide-yeekee li { background-color: rgba(255, 255, 255, 0.5); font-size: 12px; color: black !important; text-shadow: #fff 1px 1px 0px; } /************************/ .border-active .nav-slide .active, .border-active .nav-slide-yeekee .active { background-color: #fff; -webkit-box-shadow: inset 0px 0px 0px 2px #d59929; -moz-box-shadow: inset 0px 0px 0px 2px #d59929; box-shadow: inset 0px 0px 0px 2px #d59929; } .border-active .nav-slide li, .border-active .nav-slide-yeekee li { color: white !important; text-shadow: black 1px 1px 0px; background-color: rgba(0, 0, 0, 0.5); } .border-active .nav-slide li.active, .border-active .nav-slide-yeekee li.active { color: #444 !important; text-shadow: #fff 1px 1px 0px; background-color: #fff; } /*************************/ .carousel-view ol { margin-top: 0; margin-bottom: 0rem; } .carousel-view { display: none; margin-bottom: 0rem; position: relative; } @media screen and (max-width:768px) { .carousel-view { display: block; } .pc-view { display: none !important; } .nav-slide li { position: relative; -ms-flex: 0 1 auto; flex: 0 1 auto; /* display: inline-block; */ /* width: 24% !important; */ width: 32.4% !important; height: auto !important; padding: 3px 0; text-align: center; vertical-align: top; margin-right: 1.5px; margin-left: 1.5px; text-indent: 0px !important; } .nav-slide { position: relative; flex-wrap: wrap; right: 0; bottom: 0; left: 0; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; /* display: inline-block; */ padding-left: 0; margin-right: 0; margin-left: 0; list-style: none; } .nav-slide-yeekee li { position: relative; -ms-flex: none; flex: none; /* display: inline-block; */ width: 11.3% !important; height: auto !important; padding: 3px 0; text-align: center; vertical-align: top; margin-right: 1.5px; margin-left: 1.5px; margin-bottom: 3px; text-indent: 0px; } .nav-slide-yeekee { position: relative; right: 0; bottom: 0; left: 0; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; /* display: inline-block; */ padding-left: 0; margin-right: 0; margin-left: 0; list-style: none; } .nav-slide li, .nav-slide-yeekee li { cursor: pointer; background-color: rgba(108, 117, 125, 0.2); font-size: 14px; font-weight: 400; text-shadow: none; border-radius: 2px; } } @media screen and (max-width:321px){ .nav-slide li { width: 32.0% !important; font-size: 11.5px; } } /********************** end carousel slide ****************/ .text-danger { color: rgb(189, 132, 41) !important; } .border-danger{ border-color: #f5bd70 !important; } .bgwhitealpha .card-header { font-weight: 400; font-size: 100%; } .bgwhitealpha h6.text-danger { color: #976f02 !important; margin: 5px; margin-bottom: 10px; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); font-size: 110%; } .bgwhitealpha h6 { /* color: #976f02; */ margin: 5px; margin-bottom: 10px; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); font-size: 110%; } .bgwhitealpha h6 span { text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); font-weight: 400; font-size: 14px; } .bgwhitealpha h6 span.badge-danger{ background-color: #976f02; } .bgwhitealpha { /* background: rgba(179, 227, 236, 0.6); */ background: rgba(255, 255, 255, 0.9); margin-bottom: 10px; border: rgba(255, 255, 255, 1) 2px solid; } .bgwhitealpha h6 span.flag-icon{ font-size:40px; margin-top: -15px; margin-left: -15px; border-top-left-radius: 4px; border-bottom-right-radius: 8px; max-width: 50px; background-size: cover; border: #555 1px solid; border-top-color: #ccc; border-left-color: #ccc; } .card-header span.flag-icon{ font-size:30px; top: -8px; left: -10px; border-top-left-radius: 4px; border-bottom-right-radius: 8px; max-width: 50px; background-size: cover; display: flex; border: #555 1px solid; border-top-color: #333; border-left-color: #333; } .btn-contactbox-game{ width:100%; text-align: center; height: 100%; vertical-align: middle; display: flex; flex-direction: column; justify-content: center; align-items: center; } .btn-contactbox-game i{ font-size: 50px; } .btn-contactbox-game span{ display: block; white-space: pre-line; line-height: 1; margin-bottom: 5px; }