@import url(https://fonts.googleapis.com/css?family=Sriracha&display=swap);@import url(https://fonts.googleapis.com/css?family=Gugi&display=swap);@font-face {
    font-family: SukhumvitReg;
    src: url(../font/SukhumvitReg.woff2) format("woff2"),url(../font/SukhumvitReg.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: SukhumvitBold;
    src: url(../font/SukhumvitBold.woff2) format("woff2"),url(../font/SukhumvitBold.woff) format("woff");
    font-weight: 700;
    font-style: normal
}

*,*::before,*::after {
    box-sizing: border-box
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

.goldpattern {
    !i;!;!o;!;
    !i;!;
    background: #df0000 !important;
    border: 1px solid rgb(204,204,204)
}

.goldpattern2 {
    background: url(../images/gold-pattern2.jpg) top center;
    background-size: cover
}

.silverpattern {
    background: url(../images/silver-pattern.jpg) top center;
    background-size: 100%
}

.silverpattern2 {
    background: url(../images/silver-pattern2.jpg) top center;
    background-size: cover
}

.top-fix {
    width: 100%;
    position: fixed;
    z-index: 2
}

.topbar {
    width: 100%;
    min-height: 30px;
    padding: 5px 0;
    box-shadow: 0 1px #ffffff;
    display: block;
    float: left;
    line-height: 0;
    position: fixed;
    z-index: 1;
}

.topbar>.container {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: "Noto Sans Thai";
}

.topbar .logo img {
    vertical-align: text-top;
    display: inline-block
}

.topbar .logo a {
    vertical-align: middle;
    color: #fff;
    text-decoration: none;
    font-size: 25px;
    line-height: 0;
    text-shadow: black 0 1px 0;
    font-family: SukhumvitBold
}

.topbar a.btn {
    line-height: auto;
    vertical-align: middle;
    padding-bottom: 0
}

.topbar .logo a:hover {
    color: #ededed
}

.topbar a.iconmenu {
    font-size: 25px;
    margin: 0 5px;
    text-shadow: gold 1px 1px 0
}

.topbar a:hover.iconmenu {
    color: black
}

.icon-ruay {
    background: url(../images/ruay-icon-300.png) center center no-repeat;
    background: 100%;
    min-height: 20px
}

.contentbody {
    width: 100%;
    float: left;
    display: block;
    position: relative;
    margin-bottom: 80px
}

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

.gold-btn {
    font-family: SukhumvitBold;
    font-size: 18px;
    border: 1px solid #B39A49;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none;
    display: inline-block;
    text-shadow: 1px 1px 0 rgba(255,255,255,.3);
    color: black;
    background-color: #eab92d;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#eab92d),to(#c79810));
    background-image: -webkit-linear-gradient(top,#eab92d,#c79810);
    background-image: -moz-linear-gradient(top,#eab92d,#c79810);
    background-image: -ms-linear-gradient(top,#eab92d,#c79810);
    background-image: -o-linear-gradient(top,#eab92d,#c79810);
    background-image: linear-gradient(to bottom,#eab92d,#c79810);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#eab92d,endColorstr=#c79810)
}

.gold-btn:hover {
    border: 1px solid #AD9547;
    background-color: #cf9f15;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#cf9f15),to(#98740c));
    background-image: -webkit-linear-gradient(top,#cf9f15,#98740c);
    background-image: -moz-linear-gradient(top,#cf9f15,#98740c);
    background-image: -ms-linear-gradient(top,#cf9f15,#98740c);
    background-image: -o-linear-gradient(top,#cf9f15,#98740c);
    background-image: linear-gradient(to bottom,#cf9f15,#98740c);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#cf9f15,endColorstr=#98740c)
}

.golden-btn + .golden-btn {
    margin-top: 1em
}

.golden-btn {
    display: inline-block;
    outline: 0;
    font-family: SukhumvitBold;
    font-size: 1em;
    box-sizing: border-box;
    border: 0;
    border-radius: .2em;
    height: auto;
    line-height: 1.9em;
    text-transform: uppercase;
    padding: 3px 0;
    box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(110,80,20,.4),inset 0 -1px 2px 1px rgba(139,66,8,1),inset 0 -1px 1px 2px rgba(250,227,133,1);
    background-image: linear-gradient(160deg,#a54e07,#b47e11,#fef1a2,#bc881b,#a54e07);
    border: 1px solid #a55d07;
    color: rgb(120,50,5);
    text-shadow: 0 2px 2px rgba(250,227,133,1);
    cursor: pointer;
    transition: all .2s ease-in-out;
    background-size: 100% 100%;
    background-position: center
}

.golden-btn:focus,.golden-btn:hover {
    background-size: 150% 150%;
    box-shadow: 0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23),inset 0 -2px 5px 1px #b17d10,inset 0 -1px 1px 3px rgba(250,227,133,1);
    border: 1px solid rgba(165,93,7,.6);
    color: rgba(120,50,5,.8)
}

.golden-btn:active {
    box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(110,80,20,.4),inset 0 -2px 5px 1px #b17d10,inset 0 -1px 1px 3px rgba(250,227,133,1)
}

.silver-btn {
    display: inline-block;
    outline: 0;
    font-family: SukhumvitBold;
    font-size: 1em;
    box-sizing: border-box;
    border: 0;
    border-radius: .2em;
    height: auto;
    line-height: 1.9em;
    text-transform: uppercase;
    padding: 3px 0;
    box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(110,80,20,.4),inset 0 -1px 2px 1px rgb(73,73,73),inset 0 -1px 1px 2px rgba(190,190,190,1);
    background-image: linear-gradient(160deg,#525252,#8d8a83,#d8d8d6,#6b6b6b,#383838);
    border: 1px solid #69645d;
    color: rgb(48,48,48);
    text-shadow: 0 2px 2px rgba(190,190,190,1);
    cursor: pointer;
    transition: all .2s ease-in-out;
    background-size: 100% 100%;
    background-position: center
}

.silver-btn:focus,.silver-btn:hover {
    background-size: 150% 150%;
    box-shadow: 0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23),inset 0 -2px 5px 1px #88837a,inset 0 -1px 1px 3px rgb(230,226,210);
    border: 1px solid rgba(116,114,112,.6);
    color: rgba(54,53,53,.8)
}

.silver-btn:active {
    box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(77,71,59,.4),inset 0 -2px 5px 1px #5e5c58,inset 0 -1px 1px 3px rgb(207,207,207)
}

.topbox {
    border: 1px #333 solid;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: block;
    margin-top: 10px;
    padding: 10px 0;
    background: #222;
    color: lightgoldenrodyellow;
    font-family: SukhumvitReg;
    line-height: 1
}

.topbox a {
    color: blanchedalmond;
    text-decoration: none
}

.topbox a:hover {
    color: burlywood
}

.boxjackpot h2 {
    line-height: auto;
    margin-bottom: 0
}

.boxjackpot h2>small,.boxjptop small {
    font-size: 60%;
    vertical-align: middle;
    font-family: Sriracha,cursive;
    margin-right: 5px
}

.boxjptop small {
    margin: 0 5px
}

@media screen and (max-width: 350px) {
    .boxjackpot h2>small {
        font-size:50%
    }
}

.boxjackpot h2>span,.boxjptop span {
    font-family: SukhumvitBold;
    vertical-align: middle
}

.boxjptop span,.boxjptop a {
    line-height: 1.2
}

.twbox {
    border: 1px #ffffff solid;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: #eee;
    display: block;
    padding: 5px 5px;
    margin-bottom: 10px
}

.twbox .nav-pills .nav-link.active,.nav-pills .show>.nav-link {
    color: #fff;
    background-color: goldenrod
}

.twbox .nav-pills .nav-link {
    color: black;
    border: rgba(163,126,67,1) 1px solid;
    margin: 1px;
    padding: 5px;
    text-align: center
}

@media screen and (max-width: 350px) {
    .twbox .nav-pills .nav-link {
        font-size:80%
    }
}

.titleresult {
    font-family: SukhumvitReg;
    font-size: 150%;
    line-height: 1
}

.titleresult i {
    font-family: initial
}

.gold-text {
    color: #D5AD6D;
    background: -webkit-linear-gradient(transparent,transparent),-webkit-linear-gradient(top,rgba(213,173,109,1) 0,rgba(213,173,109,1) 26%,rgba(226,186,120,1) 35%,rgba(163,126,67,1) 45%,rgba(145,112,59,1) 61%,rgba(213,173,109,1) 100%);
    background: -o-linear-gradient(transparent,transparent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.boxjackpot {
    border: rgba(213,173,109,1) 1px solid;
    box-shadow: rgba(213,173,109,1) 0 0 3px;
    animation: myfirst .5s;
    -moz-animation: myfirst .5s infinite;
    -webkit-animation: myfirst .5s infinite;
    color: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: none;
    background: #343a40
}

@-moz-keyframes myfirst {
    0% {
        box-shadow: rgba(213,173,109,1) 0 0 8px
    }

    50% {
        box-shadow: rgba(213,173,109,0) 0 0 3px
    }

    100% {
        box-shadow: rgba(213,173,109,1) 0 0 8px
    }
}

@-webkit-keyframes myfirst {
    0% {
        box-shadow: rgba(213,173,109,1) 0 0 8px
    }

    50% {
        box-shadow: rgba(213,173,109,0) 0 0 3px
    }

    100% {
        box-shadow: rgba(213,173,109,1) 0 0 8px
    }
}

.boxjptop {
    border: rgba(213,173,109,1) 1px solid;
    box-shadow: rgba(213,173,109,1) 0 0 3px;
    animation: boxjp .5s;
    -moz-animation: boxjp .5s infinite;
    -webkit-animation: boxjp .5s infinite;
    color: white;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    background: #343a40;
    font-size: 25px;
    margin-left: 5px;
    line-height: 1.5
}

@-moz-keyframes boxjp {
    0% {
        box-shadow: rgba(213,173,109,1) 0 0 8px
    }

    50% {
        box-shadow: rgba(213,173,109,0) 0 0 3px
    }

    100% {
        box-shadow: rgba(213,173,109,1) 0 0 8px
    }
}

@-webkit-keyframes boxjp {
    0% {
        box-shadow: rgba(213,173,109,1) 0 0 8px
    }

    50% {
        box-shadow: rgba(213,173,109,0) 0 0 3px
    }

    100% {
        box-shadow: rgba(213,173,109,1) 0 0 8px
    }
}

@media screen and (max-width: 990px) {
    .boxjptop {
        display:none
    }

    .boxjackpot {
        display: flex;
        justify-content: center;
        align-items: center
    }
}

.titlestyle {
    font-family: SukhumvitReg;
    font-size: 120%;
    line-height: 1
}

.text-style-bold {
    font-family: SukhumvitBold
}

.text-style-reg {
    font-family: SukhumvitReg
}

.text-shadow {
    text-shadow: rgba(0,0,0,.5) 1px 1px 3px
}

.footerindex {
    background: #151515;
    border-top: #222 1px solid;
    color: lightgray;
    padding: 5px 5px 20px 5px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    position: inherit;
    bottom: 0;
    font-size: 80%
}

.footerindex a {
    color: #df0000;
}

.footerindex a:hover {
    color: #df0000;
    text-decoration: none
}

.txt-user {
    margin-right: 10px;
    font-size: 150%;
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    width: auto;
    padding-top: 10px;
    line-height: 1.2;
    color: white;
    text-shadow: hsl(50,87%,9%) 1px 1px 0
}

.txt-user small {
    font-size: 60%;
    display: block;
    line-height: 0;
    margin-top: 5px;
    color: black;
    text-shadow: none
}

.pic-user {
    margin-right: 5px;
    margin-left: 5px
}

.pc-lang {
    margin-right: 20px
}

.pc-lang .btn {
    padding: 3px 10px
}

.mb-lang {
    display: none
}

.txt-money {
    font-size: 100%;
    line-height: 1.2;
    margin-right: 5px;
    background: rgb(255 255 255 / 90%);
    border: #000000 2px solid;
    color: #ffffff;
    font-weight: normal;
    vertical-align: middle;
    padding-bottom: 1px;
    border-radius: 10rem
}

.txt-money i {
    font-size: 90%;
    line-height: 1
}

a.linkback {
    color: #f8f9fa
}

a:hover.linkback {
    color: #dae0e5
}

@media screen and (max-width: 768px) {
    .txt-user,.pc-lang {
        display:none!important
    }

    .mb-lang {
        display: block
    }

    .pic-user {
        margin-right: 20px
    }
}

@media screen and (max-width: 375px) {
    .txt-logo {
        display:none
    }

    .logo-poy span {
        display: none
    }
}

@media screen and (max-width: 320px) {
    .logo-poy span {
        display:none
    }
}

.main-card {
    border-radius: 5px;
    background-size: cover;
    width: 100%;
    padding: 5px;
    margin: 10px 0
}

.inmain-card {
    background: #ffffff;
    border: #000000 2px solid;
    border-radius: 10px!important
}

.main-credit {
    font-family: Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif
}

.credit-btn {
    font-size: 22px
}

.credit-btn i {
    font-size: 80%
}

.menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-family: SukhumvitBold;
    line-height: 1.3
}

a.menu-btn {
    text-decoration: none;
    color: #df0000;
    text-align: center;
    padding: 10px 0
}

a:hover.menu-btn {
    color: #fff !important;!i;!;
    background: #df0000;
    border-radius: 5px;
}

.menu-btn i {
    font-size: 30px;
    display: block;
    margin-bottom: 3px
}

.border-menu {
    border-color: #bbc6ce!important
}

@media screen and (min-width: 992px) {
    .border-last {
        border-right:#bbc6ce 1px solid
    }
}

.awesome {
    -webkit-animation: colorchange 3s infinite alternate
}

@-webkit-keyframes colorchange {
    0% {
        color: rgb(82,82,82)
    }

    20% {
        color: #9e8b1f
    }

    40% {
        color: #554512
    }

    60% {
        color: #7a7559
    }

    80% {
        color: rgb(189,171,12)
    }

    100% {
        color: #34495e
    }
}

.btn-label {
    position: relative;
    left: -12px;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: rgba(0,0,0,.15);
    border-radius: 3px 0 0 3px;
    font-size: 25px
}

.btn-labeled {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 50px
}

.btn.btn-labeled {
    display: inline-flex;
    align-items: center
}

.txt-labeled {
    width: 100%;
    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: -12px;
    margin-right: -12px
}

.txt-labeled span {
    display: block;
    font-family: SukhumvitReg
}

@media screen and (min-width: 992px) {
    .txt-labeled {
        display:inline-flex;
        flex-direction: row;
        justify-content: center;
        align-items: center
    }

    .txt-labeled span {
        text-align: center;
        margin: 0 2px;
        font-size: 20px
    }
}

.livebtn {
    display: block;
    text-align: center;
    font-size: 1em;
    margin: 0 auto;
    padding: 5px;
    width: 100%;
    color: #fff!important;
    text-shadow: 0 0 5px black;
    border-radius: 5px;
    text-decoration: none;
    border: 1px #555 solid;
    height: auto;
    background-color: #E74C3C;
    position: relative;
    -webkit-animation-name: examplez;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    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: .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
}

@-webkit-keyframes examplez {
    0% {
        background-color: #C0392B
    }

    50% {
        background-color: #641E16
    }

    100% {
        background-color: #C0392B
    }
}

@keyframes examplez {
    0% {
        background-color: #C0392B
    }

    50% {
        background-color: #641E16
    }

    100% {
        background-color: #C0392B
    }
}

.livebtnlist {
    width: 74px
}

.offlinebtn {
    display: block;
    text-align: center;
    font-size: 1em;
    margin: 0 auto;
    padding: 5px;
    width: 100%;
    color: #fff!important;
    text-shadow: 0 0 5px black;
    border-radius: 5px;
    text-decoration: none;
    border: 1px #555 solid;
    height: auto;
    background-color: rgb(95,95,95);
    position: relative;
    line-height: 1;
    text-decoration: none
}

.font-number {
    font-family: Gugi,cursive
}

.text-shadow-number {
    text-shadow: rgb(0,0,0) 2px 0 0,rgb(0,0,0) 1.75517px .958851px 0,rgb(0,0,0) 1.0806px 1.68294px 0,rgb(0,0,0) .141474px 1.99499px 0,rgb(0,0,0) -.832294px 1.81859px 0,rgb(0,0,0) -1.60229px 1.19694px 0,rgb(0,0,0) -1.97998px .28224px 0,rgb(0,0,0) -1.87291px -.701566px 0,rgb(0,0,0) -1.30729px -1.5136px 0,rgb(0,0,0) -.421592px -1.95506px 0,rgb(0,0,0) .567324px -1.91785px 0,rgb(0,0,0) 1.41734px -1.41108px 0,rgb(0,0,0) 1.92034px -.558831px 0;
    letter-spacing: .04em
}

.text-border-number {
    text-shadow: #fff 2px 0 0,#fff 1.75517px .958851px 0,#fff 1.0806px 1.68294px 0,#fff .141474px 1.99499px 0,#fff -.832294px 1.81859px 0,#fff -1.60229px 1.19694px 0,#fff -1.97998px .28224px 0,#fff -1.87291px -.701566px 0,#fff -1.30729px -1.5136px 0,#fff -.421592px -1.95506px 0,#fff .567324px -1.91785px 0,#fff 1.41734px -1.41108px 0,#fff 1.92034px -.558831px 0;
    letter-spacing: .04em
}

.btn-outline-menu,a.btn-outline-menu {
    border: #b47e18 1px solid;
    color: #b47e18
}

.btn-outline-menu.focus {
    background: none;
    color: #b47e18
}

.btn-outline-menu.focus.active,.btn-outline-menu.active {
    color: white;
    background: #b47e18
}

.btn-af i {
    font-size: 150%;
    line-height: 1
}

.btn-af {
    padding-left: 0;
    padding-right: 0;
    background: white;
    border-radius: .25rem
}

@media screen and (max-width: 321px) {
    .btn-af {
        font-size:90%
    }
}

.marqueemain {
    background-color: #2e2e2e;
    border: #555 1px solid;
    padding: 5px 10px;
    margin-bottom: 0
}

.bg-head {
    font-family: 'Kanit', sans-serif;
    background: #ffffff !important;
    color: #000000 !important;
}