ul{
    list-style: none;
}
.bg-section{
    background-image: url('../images/LottoDashboardBackground.jpg');
    background-position: inherit;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
.navbar-custom{
    background-color: #1a02ab;
}

.navbar-expand-sm .navbar-nav .nav-item{
    background: linear-gradient(180deg, rgba(254,128,5,1) 17%, rgba(246,194,22,1) 100%);
    border-radius: 9px 9px 0px 0px;
    margin-right: 4px;
}
.navbar-expand-sm .navbar-nav .player-info{
    display: flex;
    align-items: center;
}
.navbar-expand-sm .navbar-nav .player-info h4{
    color:rgba(246,194,22,1);
    font-size: 1.3rem;
    margin-bottom: 0px;
    margin-right: 23px;
}
.navbar .navbar-nav:nth-child(2){
    padding-bottom: .5rem;
}
.navbar-expand-sm .navbar-nav .play-balance{
    color:rgba(246,194,22,1);
    font-size: 1.3rem;
    font-weight: 500;
    padding: 0px 15px;
    border: 2px solid rgba(246,194,22,1);;
}
.navbar-expand-sm .navbar-nav .nav-link{
    color: #601603;
    font-weight: 700;
    font-size: 1.3rem;
}
.navbar-expand-sm .navbar-nav .nav-link:hover{
    color: #462016ad;
}
.playarea-section{
    background-image: url('../images/playarea.png');
    background-position: center;
    background-size: 78%;
    background-repeat: no-repeat;
}
.play-section{
    height: 68vh;
}

.game-instruction{
    background: linear-gradient(180deg, rgba(254,128,5,1) 17%, rgba(246,194,22,1) 100%);
    border: 3px solid #650305;
    color: white;
    font-style: italic;
    font-weight: 600;
    height: 68px;
}


.chips-navigation{
    background: linear-gradient(180deg, rgba(254,128,5,1) 17%, rgba(246,194,22,1) 100%);
    border: 3px solid #1a02ab;
    color: white;
    font-style: italic;
    font-weight: 600;
    height: 68px;
    white-space: nowrap;
}
.chips-navigation:hover{
    color: white;
    text-decoration: unset;  
}
.chips-section{
    list-style: none;
    display: inline-flex;
    margin-left: 4%;
}
.chips-section li img{
    width: 54%;
}
.chips-section li{
    padding-right: 10px;
    position: relative;
}
.chip-number{
    color: white;
    font-weight: 500;
    font-size: 1.1rem;
    position: absolute;
    left: 23px;
    top: 24px;
    z-index: 99;
    text-align: center;
    font-style: italic;
    font-weight: 700;
}
.play-cards{
    display: flex;
    align-items: center;
    justify-content: start;
    margin: 0% 0% 0% 9%;
    margin-top: 4.6%;
    flex-wrap: wrap;
    
}
.play-cards li img:first-child{
    width: 40%;
    position: relative;
}
.play-cards li {
    width: 17%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.ribbon{
    position: absolute;
    width: 86%;
    top: 72.5%;
}
.play-text{
    color: black;
    font-weight: 700;
    font-size: 15px;
    position: absolute;
    top: 75%;
}
.all-cards-name{
    color: black;
    font-weight: 700;
    font-size: 13px;
    padding: 0px 10px;
    line-height: 18px;
    position: absolute;
    top: 84%;
    background: radial-gradient(circle, rgba(255,221,25,1) 65%, rgba(246,180,22,1) 96%);
}
.card-big{
    background-color: blue;
    width: 60px;

}
.card-big span{
    font-size: 21.5px;
    margin-right: 10px;

}
.card-big img{
    width: 44%;
    height: 42%;
}
.border-thin-yellow{
    border: 2px solid yellow;
    border-radius: 3px;
}
.card-power{
    border-top: 2px solid yellow;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-style: initial;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,255,1) 100%);
    color: #dc3545;
    font-weight: 900;
}

.mainwheel{
    position: relative;
  
}
.wheel-outer{
    width: 100%;
    overflow: hidden;
    transition: all ease 5s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wheel{
    width: 100%;
    position: absolute;
    overflow: hidden;
    transition: all ease 5s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wheel1{
    width: 100%;
    position: absolute;
    transition: all ease 5s;
    top: -100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.result_letter{
    top: 38%;
    position: relative;
    font-size: 60px;
    color: #fff;
    font-weight: 900;
    left: 5%;
    font-family: Times;
}
.result_image{
    width: 60px;
    position: relative;
    top: 34%;
    left: 6%;
}
.result_image img{
width: 39px;
}
.result_power{
    top: 29px;
    position: relative;
    font-size: 30px;
    color: #ff0005;
    font-weight: 600;
    left: -10%;
    font-family: Times;
    text-align: center;
}