body {
    font-family: 'IBM Plex Sans Thai', sans-serif;
    font-size: 0.875rem;
    /*background-color: #f8f8ff;*/
    background-image: url(../images/the-way-UFABET.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: repeat;
    color: #252525;
    /*width:auto;*/
    height:100vh;
}
html, body{
padding:0px;
margin:0px;
height:100%;
}

a:link,
a:visited {
    text-decoration: none;
}

a:visited {
    color: initial;
}

.h2rem {
    font-size: 2rem;
}

ul {
    list-style: square;
}

ul li {
    text-align: left;
}

ul li a {
    text-decoration: none;
    color: initial;
    font-size: 1rem;
    line-height: 2rem;
}

ul li a:hover {
    color: rgba(233, 17, 12, 1);
}

.bg-all{
    display:flex;
    flex-direction: column;
    border-radius: 30px;
    padding-bottom:10px;
    margin-top:50px;
    border : solid dimgrey;
    fill: rgba(217, 217, 217, 0.10);
    stroke-width: 2px;
    stroke: #FFF;
    box-shadow: -38.66667px 38.66667px 38.66667px 0px rgba(255, 255, 255, 0.10) inset, 38.66667px -38.66667px 38.66667px 0px rgba(165, 165, 165, 0.10) inset;
    backdrop-filter: blur(38.66666793823242px);
    -webkit-backdrop-filter: blur(38.66666793823242px);
}

.bg-black {
    background: rgb(51, 51, 51);
    background: -moz-linear-gradient(top, rgba(51, 51, 51, 1) 0%, rgb(0, 0, 0) 100%);
    background: -webkit-linear-gradient(top, rgba(51, 51, 51, 1) 0%, rgb(0, 0, 0) 100%);
    background: linear-gradient(to bottom, rgba(51, 51, 51, 1) 0%, rgba(0, 0, 0, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#090909', GradientType=0);
}

.bg-b10 {
    background-color: rgba(0, 0, 0, 0.1);
}

.bg-kbank {
    background-color: rgb(19, 143, 45);
}

.btn-black{
    color: #fff;
    background-color: #000000;
    border-color: #ffffff;
    width:150px;
    height:30px;
}

.btn-menu {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 10px;
    cursor: pointer;
    color: white;
}
.w-100{
    width:100%;
}
.btn-bw{
    border-radius: 10px;
    background: linear-gradient(180deg, #2A1D0D 0%, rgba(0, 0, 0, 0.50) 100%);
    color:#fff;
    border-color: #514e45;

}
.btn-bw:hover{
    color:#ffc107;
}
.btn-money {
    background-color: #f8f8ff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    padding: 5px;
    width: 100%;
}

.btn-play {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgb(51, 51, 51);
    color:#fff;
    margin: -35px auto;
    border: 1px solid #fff;
    padding-top: 0px;
}

.userbox {
    padding: 3px 5px 0px 5px;
    color: #252525;
    background-color: #f8f8ff;
    font-size: 1rem;
    text-align: center;
    border-radius: 15px;
}

.text-ufa {
    color: rgba(233, 17, 12, 1);
}

.text-white{
    color:#fff;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}


.text-grey {
    color: #6c757d;
}

.text-gold {
    color:#FDE08D;
    -webkit-text-fill-color: #FDE08D;
}
.text-green {
    color:green;
}
.text-red {
    color:red;
}
.offcanvas-start {
    width:350px;
}
.offcanvas-top ,.offcanvas-bottom {
    height: 100vh;
}

.offcanvas-header .btn-close {
    background-color:#fff;
}

.btn-line {
    background-color: #00b900;
    padding: 2px 8px;
    color: #f8f8ff;
    text-decoration: none;
    border-radius: 5px;
}

.form-control {
    border-radius: 5px;
    padding: 10px;

}

.modal-header {
    border-bottom: none;
    ;
}

.modal-footer {
    justify-content: center;
}

.stepkick {
    width:30px;
    height:30px;
    /*color:#555;*/
    background:#fff;
    text-align: center;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9110c', endColorstr='#aa0a00', GradientType=0);
    border-radius:50%;
    border:1px solid rgba(0,0,0,0.1);
    padding-top:3px;
    margin:0 auto;
}

.-m-stepkick-active { 
    color: white;
    background-color: rgba(233, 17, 12, 1);
}

.linestep {
    width:100%;
    height:2px;
    background-color:rgba(233, 17, 12, 1);
}