@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
}
html,body{
    background: url(../images/ruay-bg.jpg) #000 top center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.goldpattern{
    background: url(../images/gold-pattern.jpg) top center;
    background-size: 100%;
}
.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 #000;
    display: block;
    float: left;
    line-height: 0;
}
.topbar>.container{
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: SukhumvitReg;
}
.topbar .logo img{
    vertical-align: text-top;
    display: inline-block;
}
.topbar .logo a{
    vertical-align: middle;
    color: black;
    text-decoration: none;
    font-size: 25px;
    line-height: 0;
    text-shadow: goldenrod 0px 1px 0;
    font-family: SukhumvitBold;
}
.topbar a.btn{
    line-height: auto;
    vertical-align: middle;
    padding-bottom: 0px;
}
.topbar .logo a:hover{
    color: brown;
}
.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;
    z-index: 1;
    position: relative;
    margin-bottom: 80px;
    margin-top: 55px;
}
@media screen and (max-width: 991.98px) {
    .contentbody{
        /* margin-top: 90px; */
        margin-top: 45px;
    }
}


/* gold btn */
.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, 0.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: none;
    /* font-family: inherit; */
    font-family: SukhumvitBold;
    font-size: 1em;
    box-sizing: border-box;
    border: none;
    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,0.19), 0 6px 6px rgba(0,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);
}
/* end gold btn */

.silver-btn {
    display: inline-block;
    outline: none;
    /* font-family: inherit; */
    font-family: SukhumvitBold;
    font-size: 1em;
    box-sizing: border-box;
    border: none;
    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,0.19), 0 6px 6px rgba(0,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, 0.6);
    color: rgba(54, 53, 53, 0.8);
}
.silver-btn:active {
    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(77, 71, 59, 0.4),
    inset 0 -2px 5px 1px #5e5c58,
    inset 0 -1px 1px 3px rgb(207, 207, 207);
}
/* end silver btn */

.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: 0px;
}
.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{
    /* margin-bottom: -5px; */
    line-height: 1.2;
}
.twbox{
    border: 1px #333 solid;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background:#eee;
    display: block;
    padding: 5px 5px;
    margin-bottom: 10px;
    /* min-height: 70vh; */
}
.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%;
    }
    /* .twbox{
        min-height: 55vh;
    } */
}
/* @media screen and (max-width:375px){
    .twbox{
        min-height: 62vh;
    }
} */
.titleresult{
    font-family: SukhumvitReg;
    font-size: 150%;
    line-height: 1;
}
.titleresult i{
    font-family: initial;
}
.gold-text {
    color: #D5AD6D;
    /*if no support for background-clip*/
    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;
}
/* box jackpot */
.boxjackpot{
    border: rgba(213, 173, 109, 1) 1px solid;
    box-shadow: rgba(213, 173, 109, 1) 0 0 3px;
    animation:myfirst 0.5s;
    -moz-animation:myfirst 0.5s infinite; /* Firefox */
    -webkit-animation:myfirst 0.5s infinite; /* Safari and Chrome */
    color: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: none;
    background: #343a40;
}

@-moz-keyframes myfirst /* Firefox */ {
    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 /* Safari and Chrome */ {
    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;}
}
/* end box jackpot */
.boxjptop{
    border: rgba(213, 173, 109, 1) 1px solid;
    box-shadow: rgba(213, 173, 109, 1) 0 0 3px;
    animation:boxjp 0.5s;
    -moz-animation:boxjp 0.5s infinite; /* Firefox */
    -webkit-animation:boxjp 0.5s infinite; /* Safari and Chrome */
    color: white;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 10px;
    background: #343a40;
    font-size: 25px;
    margin-left: 5px;
    line-height: 1.5;
}

@-moz-keyframes boxjp /* Firefox */ {
    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 /* Safari and Chrome */ {
    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;}
}

/* end box top jackpot */
@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,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: fixed;
    bottom: 0;
    font-size: 80%;
}
.footerindex a{
    color: goldenrod;
}
.footerindex a:hover{
    color: gold;
    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;
    border: rgba(71, 69, 64, 0.815) 1px solid;
}
.pc-lang{
    margin-right: 20px;
}
.pc-lang .btn{
    padding: 3px 10px;
}
.mb-lang{
    display: none;
}
.txt-money{
    font-size: 110%;
    line-height: 1.2;
    margin-right: 5px;
    background: rgba(78, 75, 63, 0.9);
    /* border: goldenrod 1px solid; */
    border: rgba(71, 69, 64, 0.815) 1px solid;
    color: white;
    font-weight: normal;
    vertical-align: middle;
    padding-bottom: 1px;
}
.txt-money i{
    font-size: 90%;
    line-height: 1;
}
a.linkback{
    color: gray;
}
a:hover.linkback{
    color: goldenrod;
}
@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:rgb(77, 63, 44) 1px solid;
    border-radius: 5px;
    background: url(../images/bg-card-1.jpg) top center no-repeat;
    background-size: cover;
    width: 100%;
    padding:5px;
    margin: 10px 0;
    box-shadow: rgba(213, 173, 109, 0.3) 0 0 5px;
}
.inmain-card{
    background: url(../images/bg-card-3.jpg) center center no-repeat;
    background-size: cover;
    border-radius: 5px;
    border:rgba(75, 75, 75, 0.5) 1px solid;
}
.main-credit{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    font-weight: bold;
}
.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: #111;
    text-align: center;
    padding: 10px 0;
}
a:hover.menu-btn {
    text-decoration: none;
    /* color: rgb(167, 130, 36); */
    /* background: rgba(116, 114, 112, 0.6); */
    background:rgba(161, 159, 151, 0.2);
    color: rgba(145, 112, 59, 1);
    text-shadow: #fff 1px 1px 0;
}

.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;
    }
    /* .border-menu{
        border-bottom: none !important;
    } */
}
.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, 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:320px){
    .txt-labeled span{
        font-size: 14px;
        width: 100%;
    }
} */
@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;
    }
}
/**********************************/

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

.livebtnlist {
    width: 74px;
}

.offlinebtn {
    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: 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 0px 0px, rgb(0, 0, 0) 1.75517px 0.958851px 0px, rgb(0, 0, 0) 1.0806px 1.68294px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.81859px 0px, rgb(0, 0, 0) -1.60229px 1.19694px 0px, rgb(0, 0, 0) -1.97998px 0.28224px 0px, rgb(0, 0, 0) -1.87291px -0.701566px 0px, rgb(0, 0, 0) -1.30729px -1.5136px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.91785px 0px, rgb(0, 0, 0) 1.41734px -1.41108px 0px, rgb(0, 0, 0) 1.92034px -0.558831px 0px;
    letter-spacing: 0.04em;
}
.text-border-number{
    text-shadow: #fff 2px 0px 0px, #fff 1.75517px 0.958851px 0px, #fff 1.0806px 1.68294px 0px, #fff 0.141474px 1.99499px 0px, #fff -0.832294px 1.81859px 0px, #fff -1.60229px 1.19694px 0px, #fff -1.97998px 0.28224px 0px, #fff -1.87291px -0.701566px 0px, #fff -1.30729px -1.5136px 0px, #fff -0.421592px -1.95506px 0px, #fff 0.567324px -1.91785px 0px, #fff 1.41734px -1.41108px 0px, #fff 1.92034px -0.558831px 0px;
    letter-spacing: 0.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: 0px;
    padding-right: 0px;
    background: white;
    border-radius: 0.25rem;
}
@media screen and (max-width:321px){
    .btn-af{
        font-size: 90%;
    }
}
.marqueemain{
    background-color: #111;
    border: #555 1px solid;
    padding: 5px 10px;
    margin-bottom: 0px;
}

.main-credit::after{
    content: attr(data-end);
    text-shadow: black 0px 0px 5px;
    -webkit-text-stroke-width: 0px;
    /*if no support for background-clip*/
    background: -webkit-linear-gradient(transparent, transparent),
    -webkit-linear-gradient(top,  #D5AD6D 0%,  #D5AD6D 100%);
    background: -o-linear-gradient(transparent, transparent);
    -webkit-background-clip: text;
    -webkit-text-fill-color:  white;
    font-size: 80%;
    font-weight: normal;
}