:root{
    --primary1-color: #FF3C00;
    --primary1-dark: rgb(199 63 21);
    --primary2-color: #37A25C;
    --secondary1-color: #1C2026;
    --secondary2-color: rgb(26 49 150);
    --color-shade1: rgb(37 33 96);
    --color-shade2: rgb(26 49 150);
    --color-dark-secondary: rgb(55 68 86);
    --bg-primary: rgb(230 230 230);
    --bg-secondary: rgb(35 43 54);
    --bg-odd: rgb(45 55 69);
    --bg-footerone: #1C2026;
    --admin-primary-color: rgb(14 16 36);
    --nav-color: rgb(179 179 179);
    --max-width: 100%;


    /* VIP Ticket colors */
    --bg-ticket: #20262E;
    --bg-main-ticket: #171b20;

    

}


*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
   
}


body {
    font-family: 'ubuntu', sans-serif; /* Apply 'sitefont' as the main font, fallback to sans-serif */
    background: var(--bg-primary);
    color: #333;
    line-height: 1.6;
}




ul {
    list-style: none;
    

}

a {
    color: black;
    text-decoration: none;
}

h1, h2{
    font-weight: 300;
}



.btn{
    cursor: pointer;
    display: inline-block;
    padding: 5px 10px;
    background-color: var(--primary2-color);
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bolder;
    font-size: 15px;
}

.btn:hover{
    opacity: 0.3;
    background-color: var(--primary2-color);
    color: #fff;
}

.btn-success{
    cursor: pointer;
    display: inline-block;
    padding: 5px 10px;
    background-color: var(--primary2-color)!important;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bolder;
    font-size: 15px;
}

.btn-cashout{
    background-color: rgb(46 55 70);
    color: #fff;
    font-size: 14px;
}

.btn-cashout:hover{
    opacity: 0.6;
    background-color: rgb(46 55 70);
    color: #fff;
}

.btn-admin{
    cursor: pointer;
    display: inline-block;
    padding: 5px 10px;
    background-color: var(--admin-primary-color)!important;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bolder;
    font-size: 15px;
}

.btn-success:hover{
    opacity: 0.8;
}

.btn-warning{
    background-color: rgb(255 193 7);

}

.btn-warning:hover{
    background-color: rgb(255 193 7);
    opacity: 0.6;

}

.btn-danger{
    cursor: pointer;
    display: inline-block;
    padding: 5px 10px;
    background-color: red!important;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bolder;
    font-size: 15px;
}

.btn-danger:hover{
    color: #fff!important;
    opacity: 0.8;
}

.btn:hover{
    opacity: 0.9;
}

.btn-primary, .bg-primary{
    background: var(--primary-color);
    color: #fff;
}

.btn-secondary{
    background: var(--secondary-color);
}

.btn-dark {
    background: #333;
}

.btn-light{
    background: #f4f4f4;
    color: #333;
}

.btn-info{
    background-color: rgb(23 162 184);
    color: #fff;
}

.btn-info:hover{
    background-color: rgb(23 162 184);
    color: #fff;
    opacity: 0.6;
}
.btn-outline{
    background: transparent;
    border: 2px solid #fff;

}

.btn-danger-two{
    background-color: #fff;
    color: red;
}

.btn-danger-two:hover{
    background-color: #fff;
    color: red;
    opacity: 0.7;
}

button:focus {
    outline: none!important;
    box-shadow: none!important;
}

img{
    display: flex;
    width: 100%;
    object-fit: cover;
}


h2{
    font-size: 20px;
    font-weight: bolder;
}

h3{
    font-size: 14px;
    font-weight: bolder;
}




/* LANDING PAGE */


.wrap-logo{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
 
}

.wrap-mobile-logo{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 23px;
 
}

.wrap-all-logo-link{
    display: flex;
    align-items: center;
}


.headershort-link{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 30px;
    background-color: var(--primary1-dark);
    border-radius: 20px;
    color: #fff;
    padding-left: 10px;
    
}

.headershort-parent{
    margin-left: 20px;
}


#headerSection{
    width: 100%;
    height: 70px;
    background-color: var(--primary1-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
}

.gift-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
}

.nav-left-right{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.searchbar-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
}

.right-side-nav{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.reg-button a{
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 12.3px;
}




.live-odds {
	font-family: Arial, sans-serif;
}

.match {
	border: 1px solid #ccc;
	padding: 10px;
	margin: 10px 0;
}

.teams {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.team {
	font-weight: bold;
}

.odds {
	font-size: 1.2em;
	margin: 0 10px;
	color: #0000FF;
}

.match-time {
	color: #666;
}

#banner{
    background: url(../img/banner.png) no-repeat center center/cover;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 200px;
    overflow: hidden;
    flex-direction: column;
    position: relative;
}

#translate-section{
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    color: #fff;
}

#banner::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    overflow: hidden;
}


 
#banner * {
    position: relative;
    z-index: 1;
}

#banner p,
#banner h1{
    color: #fff;
}

#banner h1{
    font-weight: bolder;
}

.hidden {
    display: none;
}


.wrap-live-box-parent{
    padding: 30px;
}

.wrap-live-box{
    width: 100%;
    background-color: rgb(36 41 46);
    border-radius: 20px;
    color: #fff;
    padding: 20px;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;

}

.live-matches{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrap-count-live{
    background-color: var(--color-dark-secondary);
    width: 110px;
    padding: 5px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrap-count-live span{
    font-size: 12px;
}

.football{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    margin-right: 10px;
}

.space-up{
    margin-top: 20px;
}

.livebet-box p{
    font-size: 12px;
    margin-top: 20px;
}

.livebet-box-child{
    background-color: var(--bg-secondary);
    /* height: 60px; */
    border-radius: 10px;
    cursor: pointer;
}


.livebet-box-child:hover{
    background-color: var(--color-dark-secondary);
}

.shirt{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px;
}

.wrap-shirt-club{
    display: flex;
    gap: 5px;
}

.wrap-shirt-club h3{
    margin-top: 7px;

}

.wrap-all-scs{
    display: flex;
    justify-content: space-between;
}

.wrap-all-scs:last-child{
    margin-top: -7px;
}



.goal h3{
    margin-top: 7px;
}

.time{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.time p{
    margin-top: 10px;
}

.odd{
    width: 100px;
    height: 40px;
    background-color: var(--bg-odd);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    margin-left: 5px;
}

.odd:hover{
    background-color: var(--color-dark-secondary);
    box-shadow: -2px 7px 27px -8px rgba(0,0,0,0.51);
}




.odd p{
    margin-top: 5px;
}

.odd h3{
    color: var(--primary2-color);
}



.odd-wrapper{
    display: flex;
    align-items: center;
    height: 100%;
}

.odd.active{
    background-color: var(--primary1-color);
    color: #fff;
}

.odd.active h3{
    color: #fff;
}
.one-section-row hr{
    margin-top: 15px;
}

#ticket-section{
    padding-top:30px;
}

.ticket{
    background-color: var(--bg-secondary);
    width: 100%;
    color: #fff;
    border-radius: 20px;
    padding: 10px;
}

.ticket h2{
    text-align: center;
}


.ticket-start{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ticket-img-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 20px;
    opacity: 0.1;
    position: relative;
}

.ticket-img-wrapper-child{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}

.little-side-banner{
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
    color: #fff;
}

.little-side-banner img{
    object-fit: fill;
    height: 100%;
    width: 100%;
}

.wrap-banner-header-child p{
    font-size: 11px;
}

.wrap-banner-header{
    position: relative;
}

.wrap-banner-header-child{
    position: absolute;
    bottom: 0;
    left: 8px;
    color: #fff;
}


.wrap-banner-header-child h3{
    font-size: 18px;
}

.view-all{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px;
    background-color: var(--bg-secondary);
    border-radius: 5px;
    color: #fff;

}

.view-all:hover{
    background-color: var(--color-dark-secondary);
}


#footer-first{
    background-color: #000000;
    color: #fff;
}

.wrap-sponsor{
    padding: 20px;
}

.wrap-sponsor p{
    color: var(--bg-primary);
    font-size: 11px;
}

.wrap-sponsor h3{
    font-size: 16px;
}

.sponsorimg{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
}

.wrap-sponsor-img-side{
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;


}

#footer-second p a{
 font-size: 12px;
 color: #fff;

}

#footer-second p{
    font-size: 12px;
    color: #fff;
}

#footer-second{
    background-color: #1C2026;
    padding: 20px;
    color: #fff;
    
}

.useful-links-para{
    line-height: 0.5;
}

.wrap-useful-links{
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.about-icon,
.useful-icon{
    display: none;
}

#footer-second hr{
    display: none;
}

.wrap-about{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#payment-m{
    background-color: #1C2026;
    color: #fff;
    padding: 20px;

}

.pay-box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    background-color: #333;
    padding: 3px 40px;
    height: 50px;
}

.pay-box.multi img{
    width: 30px;
}

.pay-box img{
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: contain;
}

.wrap-pay-box{
    display: flex;
    align-items: center;
    gap: 10px;

}

#payment-m p{
    font-size: 12px;
}


.appstore-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000000;
    width: 150px;
    gap: 7px;
    border-radius: 10px;
    padding: 3px 8px;
}


.apple-logo{
    width: 50px;
}

.app-text{
    font-size: 12px;
}

.app-text span{
    font-size: 16px;
    font-weight: bolder;
}

.wrap-appstore-box{
    display: flex;
    align-items: center;
    gap: 10px;
}

footer{
    background-color: #000000;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #fff;
}

#register-content{
    background-color: #fff;
    height: 100vh;
    display: grid;
    grid-template-columns: 35% 65%;

}

#register-content .reg-child{
    height: 100vh;
}



#register-content .reg-child:last-child{
    background-color: var(--bg-primary);
    padding-bottom: 50px;
}
.overlay-reg-side-img,
.reg-side-img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    overflow: hidden;

}


.reg-side-img img{
    display: flex;
    object-fit: cover;
    
}

.reg-child:first-child{
    overflow: hidden;
}

.overlay-reg-side-img{
    margin-top: -50px;
}

.wrap-overlay{
    position: relative;
}

.text-overlay{
    position: absolute;
    top: 20%;
    left: 0;
    color: #fff;
    width: 100%;
}

.text-overlay h1{
    font-size: 24px;
    font-weight: bolder;
    text-align: center;
}

.wrap-logo-reg-child{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    margin: auto;
}

.text-overlay h1:last-child{
    font-size: 20px;
}

.wrap-txt-logo-game{
    margin-top: 40px;
}

#registration-form p{
    font-size: 14px;
}

.wrap-already{
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 10px;
}



  .btn-close:focus {
    outline: none;
    box-shadow: none;
  }

 

  
  .alredy-txt{
    margin-top: 13px;
  }

  .alredy-txt a{
    color: rgb(255, 60, 0);
    font-weight: bolder;
  }

.start-box{
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(15, 15, 35);
    margin: auto;
    border-radius: 10px;
    overflow: hidden;
    

}

.m-logo-reg{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 800px;
    padding: 10px;
}

.wrap-bg-orange{
    overflow: hidden;
}

.wrap-orange-bg-txt{
    position: relative;
  
}

.orange-txt{
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px;
    text-align: right;
    width: 100%;
    color: #fff;
}

.orange-txt h2{
    font-size: 16px;
    text-align: center;
    margin-top: -7px;
    color: rgb(15, 15, 35);

}

.orange-txt p{
    font-size: 12px;
    margin-top: -12px;
}

.space-up-x2{
    margin-top: 40px;
}

#welcome-betano h2{
    color: #000000;
    text-align: center;
}

#welcome-betano p{
    text-align: center;
    max-width: 300px;
    margin: auto;
}

#reg-header{
    width: 100%;
    background-color: #fff;
    padding: 5px;
}

.betano-box{
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 70%;
    border-radius: 10px;
    margin: auto;
    padding: 10px;
}

.social{
    width: 100%;
    background-color: var(--bg-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bolder;
    padding: 10px;
    cursor: pointer;
    gap: 10px;
    border-radius: 5px;
}

.social:hover{
    opacity: 0.6;
    background-color: var(--bg-primary);
}

.wrap-fb{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 7px;

}

.social.space-up{
    margin-top: 10px;
}

.wrap-line-divide{
    position: relative;
}

.line-divide-child{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    margin: auto;

}

.or-txt{
    background-color: #fff;
    font-size: 16px;
    padding: 6px;
}

.social.space-up.withEmail{
    background-color: rgb(55, 162, 92);
    color: #fff;
}

.social.space-up.withEmail span{
    color: #fff;
}


.get-start-box{
    width: 200px;
    background-color: rgb(179, 179, 179);
    margin: auto;
    border-radius: 10px;
    color: #000000;
    padding: 10px;
}

.get-start-box h2{
    font-size: 15px;
    font-weight: bolder;
    text-align: left;
    
}

#reg-form-wrap{
    padding: 0 70px;
   
}

.reg-child:last-child{
    overflow-y: scroll;
}

#form-footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#reg-form-wrap label{
    margin-top: 20px;
}

.form-control:focus {
    outline: none;
    box-shadow: none;
}

#login-btn > button.btn-success{
    width: 100%;
}

.forgot-txt{
    text-align: center;
}

.forgot-txt span{
    color: var(--primary1-color);
    font-weight: bolder;
}

.shwpaswrd{
    margin-top: -10px;
}

#spinner{
    position: fixed;
    left: 50vw;
    top: 50vh;
    display: none;
    z-index: 9999; 
}


#Email-Modal{
    display: flex;
    justify-content: center;
    align-items: center;
    
}



.email-show-box{
    width: 100%;
    background-color: green;
    position: fixed;
    top: 8%;
    z-index: 9999;
    opacity: 0.8;
    display: none;
   
    
}

.email-show-box p{
    text-align: center;
    color: #fff;
    
}

/* DASHBOARD STYLES */

.right-side-nav.dashboard a,
.right-side-nav.dashboard{
    color: #fff;
}

.right-side-nav.dashboard a,
.dash-item{
    cursor: pointer;
}

.myacc-dropdwn{
    margin-left: -10px;
}

.dash-item.myaccount{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.hidden-balance {
    display: none;
}

.hidden-balance-dp{
    display: none;
}

#myaccount-show-layout{
    width: 150px;
    background-color: #fff;
    position: fixed;
    top: 8%;
    right: 10px;
    color: #333;
    font-size: 11px;
    padding: 10px 0;
    border-radius: 10px;
    display: none;


}

.dash-item.myaccount:hover + #myaccount-show-layout,
        #myaccount-show-layout:hover {
            display: block;
        }



.acct-flex-item{
    display: flex;
    align-items: center;
    gap: 8px;

}

#myaccount-show-layout hr{
    border-color: #333;
    margin: 0 -10px;

}

.space-up-sm{
    margin-top: 8px;
}


#myaccount-show-layout a{
    cursor: pointer;
    color: #333;
}
#myaccount-show-layout a:hover{
    color: green;
}

.nav-user-name{
    color: #fff;
}

.nav-user-icon{
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}


#wrap-acc-his-fr-lg{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#dashboard-main{
    padding-top: 70px;
}

#dash-layout-parent .dash-layout{
    /* border: 1px solid black!important; */
    height: 100vh;

  }


 
  
#aside-section{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
  
  }


  #wrap-aside-section {
    position: fixed;
    justify-content: center;
    align-items: center;
    padding-top: 55px;
    width: 23%;
    overflow-y: scroll; /* Allow scrolling */
    padding-bottom: 20px;
    height: 100%;
    top: 0;
    left: 18px;
}

/* Hide scrollbar for Webkit-based browsers (Chrome, Safari, Edge) */
#wrap-aside-section::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Firefox */
#wrap-aside-section {
    scrollbar-width: none; /* Hide scrollbar */
}

/* Hide scrollbar for Internet Explorer and Edge */
#wrap-aside-section {
    -ms-overflow-style: none; /* Hide scrollbar */
}




 .aside{
    width: 100%;
    height: 80%;
    background-color: #fff;
    border-radius: 20px;
    padding: 30px 0;
    box-shadow: -1px 6px 26px -6px rgba(0,0,0,0.75);
    overflow: scroll;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  /* Hide scrollbar for Webkit-based browsers (Chrome, Safari, Edge) */
.aside::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Firefox */
.aside {
    scrollbar-width: none; /* Hide scrollbar */
}

/* Hide scrollbar for Internet Explorer and Edge */
.aside {
    -ms-overflow-style: none; /* Hide scrollbar */
}

  .aside-link{
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--nav-color);
    width: 70%;
    padding: 10px;
    border-radius: 10px;
    margin: auto;
    color: #000000;


  }

  .aside-link-parent:hover{
    opacity: 0.8;
  }

  .active .aside-link{
    background-color: var(--primary1-color);
    color: #fff;
  }

  .aside .space-up{
    margin-top: 40px;
  }

  .m-menu{
    display: none;
    cursor: pointer;
    
   
  }

  .wrap-userfname-lname{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #000000;
  }

  #overview-section{
    padding: 50px 0;
  }

  .overview-box{
    width: 100%;
    height: 200px;
    background-color: #fff;
    border-radius: 13px;
    box-shadow: -1px 6px 26px -6px rgba(0,0,0,0.75);
    padding: 10px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding-left: 30px;
    padding-top: 30px;
  }

  .overview-box .euro-txt h3{
    font-size: 24px;
    color: #000000;
  }


  .wrap-display-acc{
    display: flex;
    align-items: center;
    gap: 10px;

  }

.deposit-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 130px;
    padding: 5px;
    background-color: var(--primary2-color);
    border-radius: 5px;
    color: #fff;
    height: 40px;
}

.deposit-wrap.withdrawal{
    background-color: rgb(19, 15, 57);
}

.depositWidw-link:hover{
    margin-top: -10px;
    opacity: 0.8;
}


.pay-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 170px;
    overflow: hidden;
}

.credit-box{
    width: 30px;
    height: 30px;
    background-color: var(--primary2-color);
    border-radius: 5px;
}

.debit-box{
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 5px;
}

.credit-box-txt {
    color: var(--primary2-color);
}

.debit-box-txt {
    color: red;
}

.wrap-credit-credit{
    display: flex;
    align-items: center;
    gap: 10px;
}

.wrap-credit-txt{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shw-recent-debit{
    padding: 30px 0;
}

.recent-dp{
    width: 100%;
    height: 200px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: -1px 6px 26px -6px rgba(0,0,0,0.75);
}
  
  
.deposit-box-txt{
    color: red;
    
}

.round-tic{
    width: 30px;
    height: 30px;
    background-color: var(--primary2-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bolder;
    color: #fff;
}

.wrap-vip-round{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 10px;
}

.wrap-check{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 30px;
}

.vip-ticket-sec{
    padding: 30px 0;
}

.vip-link a{
    text-decoration: underline;
}

.key-mini{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: -1px 6px 26px -6px rgba(0,0,0,0.75);
    color:  var(--primary1-color);
    overflow: hidden;

}

.footer-key-sec{
    padding: 40px 0;
}



.wrap-key{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.wrap-all-footer-key{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.key-mini img{
    display: flex;
    width: 20px;

}

.wrap-key a{
    color: #333;
}

.wrap-key a:hover{
    text-decoration: underline;
    color: #333;
}
/**** dashboard ends ******/



.deposit-box{
    width: 280px;
    background-color: rgb(178 42 0);
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    border-radius: 20px;
    height: 50px;
    
}

.deposit-txt{
    width: 70px;
    background-color: rgb(25 135 84);
    height: 100%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
   
}

.accountbalShow{
    font-size: 18px;
}

.wrap-dp-txt{
    display: flex;
    justify-content: space-between;

}

.wrap-accountbal{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    gap: 5px;
}


.dash_account_circle span{
    margin-top: 5px;
    font-size: 45px;
    margin-left: -10px;
}


#landing-start{
    padding-top: 100px;
}

#landing-start.acctdashboard{
    padding-top: 20px;
}

.upper-box{
    width: 100%;
    height: 200px;
    border-radius: 20px;
    overflow: hidden;
}

.upper-box.message-to-user{
   background-color: rgb(19, 15,37);
   width: 100%;
    height: 200px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
   
}

.wrap-overlay-bg{
    margin-top: 90px;
}

.message-to-user-child{
    position: absolute;
    top: 0;
    left: 0;

    
}

#message-user-content{
    padding: 20px 0;
    color: #fff;
}

#message-user-content h1{
    font-size: 17px;
    font-weight: bolder;
}

#message-user-content h2{
    font-size: 16px;
}

#message-user-content p{
    font-size: 11px;
}

#message-user-content .logo{
    width: 150px;
    margin: auto;
}

#message-user-content .wrap-logo-div{
    margin-top: 25px;
}

.wrap-vip-account{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bolder;
}

.liveflash{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 23px;
    flex-direction: column;
}

.wrap-liveflash{
    display: flex;
    align-items: center;
    gap: 5px;

}

.wrap-live-box-parent .no-vip-game{
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom-icon{
    display: flex;
    align-items: center;
}


.active .wrap-bottom-icon .bottom-icon{
    background-color: rgb(255, 205, 189);
    padding: 4px;
    border-radius: 50%;
}

.wrap-bottom-icon .bottom-icon{
    padding: 4px;
    border-radius: 50%;
}


.active .wrap-bottom-icon h3{
    color: var(--primary1-color);
}

.bet-links:hover .bottom-icon span {
    color: black;
}

.bet-links:hover h3 {
    color: var(--primary1-color);
}

.bet-links:hover .wrap-bottom-icon .bottom-icon {
    background-color: rgb(255, 205, 189);
}


.active .bottom-icon h3{
    color: var(--primary1-color);
}

.wrap-bottom-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}




#bet-footer{
    padding: 6px 0;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    box-shadow: -1px 6px 26px -6px rgba(0,0,0,0.75);
}


.wrap-bottom-icon .bottom-icon span:hover{
    color: #000000!important;
}

#tired{
    padding-top: 60px;

  }

#tired h2{
    text-align: center;
    max-width: 70%;
}

.tired-txt{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;

}

.wrap-depo-with{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.deposit-now-box{
    width: 100%;
    height: 60px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: -1px 6px 26px -6px rgba(0,0,0,0.75);
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 10px 15px;
    color: #333;

}


.wrap-dp-img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
}

.wrap-img-inMinutes{
    display: flex;
   align-items: center;
   gap: 15px;
   height: 100%;

}

.dp-img-txt{
    padding-top: 20px;
}

.dp-img-txt h3{
    font-size: 20px;
}

.wrap-wrap-all-Atm{
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.wrap-dp-img.mb-way{
    width: 100px;
}

.wrap-dp-img.pixa{
    width: 30px;
    
}

.wrap-dp-img.skrill{
    width: 90px;
}


.deposit-now-box:hover{
    color: #333;
}

.container.getpayment-layout{
    background-color: #fff;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.container.getpayment-layout label{
    font-weight: bolder;
}

.get-head-box{
    width: 100%;
    background-color:var(--bg-primary);
    border-radius: 10px;
    padding: 10px;
    font-weight: bold;
    
}

.material-symbols-sharp.itemone{
    margin-left: -8px;
}

.wrap-arrow-max-min{
    display: flex;
    align-items: center;
    gap: 10px;
}

.wrap-arrow-max-min.pro{
    gap: 30px;
}

.wrap-back{
    display: flex;
    align-items: center;
    color: var(--primary1-color);
    font-weight: bolder;
    
    
}

.goback-deposit{
    width: 40px;
    height: 40px;
}
.wrap-back:hover .wrap-back-txt{
    margin-top: -5px;
}

.deposit-input{
    position: relative;
}




.deposit-input-child{
    position: absolute;
    top: 7px;
    left: 8px;
    font-size: 15px;
    color: #333;
}

.deposit-input input[type="number"] {
    padding-left: 40px;
}

.depositBTn button{
    width: 100%;
}

.history-child-aside{
    padding-left: 50px;
    padding-top: 5px;
    display: none;
}

.his-trans{
    margin-top: 5px;
}

#history-transact{
    margin-top: 100px;
}

.read-only-free{
    position: relative;
}

.read-only-free-child{
    position: absolute;
    top: 6px;
    right: 10px;
}

.container.profile label{
margin-top: 10px;
}

#Logout-txt a{
    text-decoration: underline;
}

.mobile-logout{
    
    margin-left: 50px;
    margin-top: 5%;

}

.mobile-logout a{
    text-decoration: underline;
}

#ls-widget {
    overflow: auto; /* Ensure the content is still scrollable */
    scrollbar-width: none; /* For Firefox */
}

#ls-widget::-webkit-scrollbar {
    width: 0; /* For webkit browsers */
    background: transparent; /* Optional: to remove background color */
}


.overview-goback a{
     text-decoration: underline;
}

.wrap-overview-goback{
    display: flex;
    justify-content: space-between;
    align-items: center;

}


.wrap-open-bet-link{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
}

.wrap-open-bet-link a{
    text-decoration: underline;
}

.wrap-open-bet-link a.active{
    font-weight: bolder;
}


#admin-login{
    background-color: rgb(14 16 36);
}

.container-fluid .admin-layout{
    height: 100vh;
    /* border: 1px solid white; */
}

.container-fluid .admin-layout:first-child{
    padding: 0;
    overflow: hidden;
    position: relative;
}

.container-fluid .admin-layout:first-child img{
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.admin-layout-first-child{
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;

}

.admin-layout-first-child .logo{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 170px;
    margin: auto;
}


#admin-form-parent{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
   
}

.container.admin-form{
    background-color: #fff;
    width: 60%;
    border-radius: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.container.admin-form h2{
    font-weight: bolder;
    color: #000000;
    text-transform: uppercase;
    text-align: center;
    margin-top: 13px;
}


.wrap-admin-logo{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 130px;
    margin: auto;
}

#admin-form-parent form label{
    margin-top: 30px;
}
.shwpaswrd.adminlog{
    margin-top: -16px;
}

.admin-login-btn button{
    width: 100%;
}

.admin-footer-log{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.admin-footer-log a{
    color: #000000;
    font-weight: bolder;
    text-decoration: underline;
}

.admin-footer-log a span{
    color: var(--primary1-color);
    
}

.welcome-circle{
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--admin-primary-color);
    border-radius: 50%;
    color: #fff;

}

.wrap-welcome-admin{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #000000;
    
    
}

.wrap-welcome-admin h1{
    font-weight: bolder;
}

.wrap-welcome-admin p{
    color: #000000;
    font-weight: bolder;
    font-style: italic;
}

.pen-depo{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 200px;
    height: 70px;
    background-color: var(--admin-primary-color);
    border-radius: 10px;
    padding: 3px 10px;


}

.pen-depo > div > h2{
    color: #fff;
}

.pen-no{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #fff;
    color: #000000;
   
   
}

.pen-no h2{
    color: #000000!important;
}

.wrap-pen-depo{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 70%;
    margin: auto;
    padding-top: 60px;
}

.theUsersRecent{
    margin-top: 40px;
}

.table{
    background-color: var(--bg-primary);
    padding: 10px;
    border-radius: 10px;
    color: #000000;

}

table.withdrawal_request{
    background-color: #fff;
}

#view-more-users{
    text-align: center;
    font-size: 14px;
    text-decoration: underline;
}

.col-12.user-header-details{
    color: #000000;
}

.details-body label{
    margin-top: 25px;
}

.details-body input{
    width: 100%;
}

.fetching{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-left: 30px;
    padding-right: 30px;
}

.please{
    margin-top: 15px;
    padding-left: 30px;
}

.show-bank-details h2,
.show-bank-details h3,
.show-bank-details p{
    text-align: center;
}

.wrap-proof-pay{
    width: 50%;
    margin: auto;
}

.wrap-proof-pay span{
    color: red;
}

.pen-deposit-box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 60px;
    background-color: var(--admin-primary-color);
    border-radius: 10px;
    color: #fff;
    padding: 10px;
}

.wrap-pen-deposit-box{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.active .pen-deposit-box h2{
    text-decoration: underline;
}

.all-pen{
    margin-top: 60px;
}

.see-pen-depo label{
    margin-top: 20px;
}

.upload-Account-No{
    margin-top: 80px;
}

.upload-Account-No p{
    font-style: italic;
    
}

.upload-Account-No span{
    color: red;
}

.upload-Account-No label{
    margin-top: 20px;
}

.show-account-details-on-upload{
    width: 100%;
    border: 1px solid black;
    border-radius: 10px;
    padding: 20px;
}


.show-acc-det-info{
    text-align: center;
}


.wrap-see-button{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.proof-of-payment-section{
    margin-top: 40px;
}

.admin-upload-acc-btn button{
 width: 100%;
}

.wrap-proof-up{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
}

a.view_proof{
    text-decoration: underline;
    margin-top: 20px;
}

.wrap-all-proof-and-view{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.wrap-approve-cancel{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrap-spinner-for-pix{
    display: flex;
    justify-content: center;
    align-items: center;
}

.acceptAndDelete-section{
    padding-bottom: 50px;
}

.deposit_and_subtract{
    padding-top: 30px;

}

textarea{
    height: 100px;
    margin-top: 20px;
}

.container.transact-show{
    height: 100vh;
    padding: 30px;
}
.wrap-transact-close{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
}

.uploadticket-sec label{
    margin-top: 20px;
}

.ticket-submit button{
    width: 100%;
}


.deposit-input-child.admin{
    position: absolute;
    top: 3px;
    left: 20px;
    font-size: 20px;
    color: #333;
}


.retrieve-bet-box{
    width: 300px;
    margin: auto;
    border-radius: 10px;
    overflow: hidden;
    
   
}

.detailsOfTicket{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    flex-direction: column;
    line-height: 10px;
    font-weight: bolder;
    color: #000000;
}


.wrap-shw-ticket-user{
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    margin: auto;
    margin-top: 20px;
    cursor: pointer;

}

.wrap-details-of-ticket{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
}

.playticket button{
    width: 100%;

}



#viptic > h3{
    text-align: center;
    
}

#viptic{
    margin-top: 20px;
}


.ticket-available h2{
    font-size: 14px;
}

.poten-win{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.current-ticket-box{
    width: 60%;
    height: 150px;
    border: 1px solid black;
}

.ticket-wrap-bet-open{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    margin: auto;
    border-radius: 10px;
    overflow: hidden;
}
.wrap-ticket-section{
    color: #000000;
    margin-top: 20px;
   
}

.wrap-ticket-section h2{
    text-align: center; 
    font-size: 14px;
    
}
.bottom-ticket-txt{
    padding-bottom: 100px;
}

.wrap-lost-win-btn{
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.won-tic h1{
    font-size: 24px;
    font-weight: bolder;
    color: #37A25C;
    text-align: center;
}

.changepassword-start{
    margin-top: 70px;
    padding-left: 80px;
    padding-right: 80px;
}


.changepassword-start h2{
    color: #000000;
    text-align: center;
}

.changepassword-start label{
    margin-top: 20px;
    
}


.changepassword-start button{
    width: 100%;
}


button.depositWidw-link{
    border: none;
}


button.nav-withdraw{
    border: none;
    background: none;
}

.forget{
   padding-top: 60px;
}


.forget h2{
    text-align: center;
}

.forget label{
    margin-top: 10px;
}

.forget-submit button{
    width: 100%;
}

.forget-submit{
    margin-top: 30px;
}


.pixa-wrap-withdraw{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    margin: auto;
}

.get-head-box h2{
    text-align: center;
    margin-top: 20px;
}

.withdraw-section label{
    margin-top: 25px;
}

.deposit-input-child.withdraw{
    left: 10px;
}

.spinner-border.text-info{
    width: 20px;
    height: 20px;
}


.upload-message .footer button{
    width: 100%;
}

.upload-message textarea{
    height: 800px;
}

.formessageshw{
    width: 100%;
    
}


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

.messageBTN button{
    width: 100%;
}


.support-box-head{
    width: 100%;
    padding: 20px;
    border: 2px solid var(--primary1-color);
    background-color: #fff;
    color: #000000;
    border-radius: 10px;
}

.create-support{
    width: 100%;
    padding: 10px;
    background-color: var(--primary1-color);
    color: #fff;
    border-radius: 10px 10px 0 0;
}

.create-support-body{
    background-color: rgb(255, 230, 223);
    width: 100%;
    padding: 5% 5%;
    
}

.create-support-body select,
.create-support-body textarea{
    background: transparent;
}

.create-support-body textarea::placeholder {
    color: inherit; /* Match the placeholder text color to the text color */
    background: transparent;
    font-size: 12px;
}

.supportBTN button{
    width: 100%;
}

.create-support-body select option{
    max-width: 100%;
}

.chat-box {
    max-width: 80%;
    padding: 0 10px;
    padding-top: 5px;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    justify-self: center;
    align-self: center;
    word-break: break-word; /* Breaks long words */
    overflow-wrap: break-word; /* Ensures proper word wrapping */
    position: relative;
}


.chat-box:before {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border-left: 20px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.wrap-chat-box{
    display: flex;
    justify-content: flex-end;
}

.create-support-body.chat{
    border-radius: 0 0 10px 10px;
    position: relative;
    overflow-y: scroll;
    padding-bottom: 150px;
}

#message_input {
    width: 100%;            /* Full width of its container */
    height: 60px;           /* Set a fixed height to resemble a chat input */
    resize: none;           /* Disable resizing */
    padding: 10px;          /* Add padding for a better appearance */
    border: 1px solid #ccc; /* Light border */
    border-radius: 10px;    /* Rounded corners */
    box-sizing: border-box; /* Ensure padding is included in width/height */
    font-size: 16px;        /* Adjust font size */
    outline: none;          /* Remove outline on focus */
    transition: border-color 0.3s; /* Smooth transition for border color */
    padding-right: 45px;
    
}

#message_input:focus {
    border-color: #66afe9;  /* Change border color on focus */
}

.send-chat{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.closeTicket{
    text-decoration: underline;
    cursor: pointer;
    color: #fff;
    border: none;
    background: none;
}

.wrap-header-chat{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrap-header-chat h2{
    font-size: 14px;
}

.wrap-header-chat h2:first-of-type{
    font-size: 18px;
}

.create-support-body.chat p{
    font-size: 14px;
}

.wrap-chat-box.admin{
    justify-content: flex-start;
    position: relative;
}

.chat-box.admin{
    background-color: rgb(230 230 230);
}

.chat-box.admin:before {
    
    border-left: 20px solid rgb(230, 230, 230);

}


.user-chat.user small{
    display: flex;
    justify-content: flex-end;

}

.wrap-chat-box.adminpage{
    justify-content: flex-start;
}

.user-chat.user.adminpage small{
    justify-content: flex-start;
}

.wrap-chat-box.admin.adminpage{
    justify-content: flex-end;
}

.user-chat.admin.adminpage small{
    display: flex;
    justify-content: flex-end;
}

.send-chat button{
    width: 100%;
}

.uploadbtnChat{
    margin-top: 10px;
}

.upload-chatlayout{
    height: 100vh;
    padding: 0;
    background-color: rgb(255, 230, 223);
    overflow-y: scroll;
    overflow-x: hidden;
    
    
}

.bg-side-chat-upload{
    overflow-y: scroll !important;
    overflow-x: hidden !important;
}

.create-support.upload{
    border-radius: 0;
    text-align: center;
}

.wrap-proof-pay.chatsec{
        width: 100%;
        margin: auto;
        padding-top: 60px;
        padding-bottom: 40px;

}
.second-place{
    overflow-y: scroll!important;
    overflow-x: hidden !important;
}

.second-place h2{
    color: var(--primary1-color);
    text-align: center
}


.chatUploadProof{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    margin: auto;
}

.wrap-reg-close.chat{
   display: flex;
   justify-content: flex-end;
}

.wrap-otp-head{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 30px;

}

.wrap-otp-head h2{
    color: #000000;
    margin-top: 10px;
    font-size: 27px;
   
}

.otp-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: var(--primary1-color);
    color: #fff;
    border-radius: 50%;
}

.otp-icon span{
    font-size: 40px;
}

.input-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .split-input {
    width: 50px;
    height: 50px;
    font-size: 24px;
    text-align: center;
    border: 1px solid #ccc;
    margin-right: 5px;
    outline: none;
  }
  
  .split-input:last-child {
    margin-right: 0;
  }
  
  .split-input:focus {
    border-color: #66afe9;
    box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
  }

.otpBTN{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }

.otpBTN button{
    width: 50%;
}


.kind-c-sup{
    color: var(--primary1-color);
    font-weight: bolder;
    text-decoration: underline;
}

.otp-footer{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    
  }

.otp-footer p{
    text-align: center;
}

.OneTimePass{
    margin-top: 30px;
    color: #000000;
    text-align: center;
}

h2.otpTXT{
    color: var(--primary1-color);
    font-size: 50px;
}

.endWbtn button{
    margin-top: 20px;
}

.processBord{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.chatBtnFooter{
    position: relative;
}

.chatBtnChild{
    position: absolute;
    right: 15px;
    top: 35px;
    

}

#translate-section label{
    text-align: end;
}

.addgamesbtn button{
    width: 100%;
}

#games-container{
    width: 100%;
    color: #fff;
}

.gamesvip-box{
    display: block;
    width: 100%;
    border-radius: 10px 10px 0 0;
    background-color: var(--bg-ticket);
    color: #fff;
    padding: 10px;
    flex-grow: 1;
    align-self: stretch;
}

.wrap-star-matchnames{
    display: flex;
    align-items: center;
    gap: 20px;
    overflow: hidden;
}

.starwrap span{
    color: rgb(181 127 21);
    cursor: pointer;
}

.matchnames p{
    font-size: 14px;
    line-height: 5px;

}

.matchnames{
    margin-top: 10px;
    width: 100%;
}

.gamesvip-box-layer2{
    display: block;
    width: 100%;
    border-radius: 0 0 10px 10px;
    background-color: var(--bg-ticket);
    color: #fff;
    padding: 10px;
    border-top: 1px solid #999; 


    
}

.vip-odd{
    width: 100%;
    background-color: var(--bg-odd);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    cursor: pointer;
}

.wrapvipking{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
}


.wrapvipking img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.wrap-vip-odd{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.vip-odd.select{
    background-color: var(--primary1-color);
}

.wrap-close-btn button{
    border: none;
    background: none;
    
}

.wrap-close-btn button span{
    font-size: 30px;
    color: #fff;
}

.wrap-close-btn button span:hover{
    color: red;
}

 .wrap-sbs-game-btn{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
}  

.wrap-gamebox{
    width: 90%;
}

.mainGameBoxBody{
    width: 100%;
    background-color: var(--bg-main-ticket);
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
   
  }

  .mainGameBoxBody h3{
    color: #fff;
  }


.text-light{
    color: #fff;
}




.wrap-game-buttons{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 80px;
    margin-top: 30px;

}


.costTicketbtn{
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrap-tick-idcost{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding-top: 10px;
    color: #fff;
}

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

.playgamebtn button{
    width: 100%;
}

.ticket-container{
    width: 30%;
    background-color: rgb(219 60 4);
    padding-bottom: 20px;
}

.wrap-ticket-container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  
  }


.ticketbody{
    position: relative;
    width: 100%;
    background-color: #fff;
    border-radius: 20px;
    margin-top: -40px;
    z-index: 1;
    padding: 10px;
}

.tick-head-sm-box{
    width: 60px;
    height: 25px;
    background-color: rgb(236 251 244);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border: 1px solid rgb(65 92 83);
    
    
}

.tick-head-sm-box p{
    font-size: 12px;
    font-weight: bolder;
    height: 100%;

}

.ticket-head-right p{
    font-size: 12px;
    font-weight: bolder;
}

.wrapticket-right-sm{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.tick-line-one{
    width: 100%;
    border-bottom: 1px solid #999;

}

.wrap-ball-for-tick{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    height: 15px;
}

.wrap-ball-for-tick img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.score-mark-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    height: 15px;
    background-color: var(--primary2-color);
    border-radius: 50%;
    color: #fff;
    margin-top: 4px;

}
.score-mark-wrap span{
    font-size: 12px;
    font-weight: bolder;
   

}

.scores p{
    font-weight: bolder;
    font-size: 14px;
    height: 100%;
}

.wrap-scores-mark{
    display: flex;
    margin-top: -3px;
    gap: 5px;

}

.wrap-ball-scores{
    display: flex;
    gap: 10px;
    
}

.odd-no p{
    font-size: 13px;
    font-weight: bolder;
}


.wrap-odd-ballscores{
    display: flex;
    justify-content: space-between;
    
}

.wrap-resultANDdate{
    width: 40%;
}

.wrap-resultANDdate .starttime{
    display: flex;
    justify-content: end;
}

.result{
    width: 100%;
    height: 30px;
    background-color: #cccccc;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.result span{
    color: #575656;
    
}

.result small{
    color: #575656;
    font-size: 12px;
    margin-top: 6px;
}
.matchlist{
    line-height: 18px;
    max-width: 60%;
    
}

.matchlist #game{
    margin-top: -9px;
}

.matchlist p{
    font-size: 14px;
}

.wrap-matchlist-result{
    display: flex;
    justify-content: space-between;
    align-items: center;
   
}

.tick-line-one{
    padding-top: 10px;
}

#generateTicketShow{
    padding-bottom: 100px;
}

.wrap-aposta-amount{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrap-aposta-amount p{
    font-size: 14px;
}

.wrap-aposta-amount .amt p{
    font-weight: bolder;
}

.wrap-arrow-up{
    border:  1px solid rgb(6 59 103);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrap-arrow-up span{
    color: rgb(6 59 103);
    font-size: 18px;
    font-weight: bolder;
}

.wrap-aumento{
    display: flex;
    margin-top: -10px;
    
}

.wrap-aumento p{
    color: rgb(6 59 103);
    font-size: 14px;
    font-weight: bolder;
    font-style: italic;
}

.Gan-poten p{
    font-size: 14px;
    font-weight: bolder;
    color: #6e6b6b;
}

.wrap-gen-poten-win{
    display: flex;
    justify-content: space-between;
    
}

.wrap-gen-poten-win .win-amt p{
    font-weight: bolder;
}

.cashoutbtn button span{
    font-size: 14px;
}

.cashoutbtn button{
    width: 100%;
}

.vip-cover{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    background-color: #000000;
    padding: 4px 20px;
    
}

.vip-cover img{
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.start-tick-rel{
    position: relative;
}

.start-tick-absol{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.wrap-vip-cover-one{
    width: 100%;
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
}

.vip-cover.ball{
    margin-left: 30px;
}

.start-win-cover-rel{
    position: relative;
}

.start-win-cover{
    position: absolute;
    bottom: 65px;
    right: 0;
}

.vip-cover.win{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    background-color: #000000;
    padding: 8px 30px;
}

#payUserBet{
    margin-top: 20px;
}

.costTicketbtn.win button{
    width: 100%;
}

.wraphometeam{
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
   
}

.wraphometeam input{
    width: 30%;
    justify-self: flex-end;
    height: 20px;
}

.updatescorebtn{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
}

#tiketwin{
    padding-bottom: 100px;
}

#account-details{
    position: relative;
}
.content-acct-copy{
    position: absolute;
    top: 80px;
    right: 200px;

}

.content-acct-copy span{
    font-size: 30px;
}

.wrap-acct-del{
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.testimonial-box {
    border: 1px solid #ccc;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    background: rgb(62, 153, 94, 0.8);
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: fixed;
    top: 80px;
    right: 20px;
    color: #fff;
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Ensures it's not interactable when hidden */
    transition: opacity 1s ease-in-out, visibility 0s linear 1s; /* Transition for fade-in and fade-out */
    
  }

  .visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease-in-out; /* Transition for fade-in */
  }

 

  .Deleteadminform button{
    border: none;
    background: none;
    cursor: pointer;
  }

  .Deleteadminform button:hover{
    color: red;
  }

  .messagall{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 30px;
  }

  .sendtoallBtn button{
    width: 100%;
    
  }

  #testimonysec{
    padding-top: 80px;
  }

  .testi-box {
    width: 50%;
    height: 150px;
    border: 1px solid #fff;
    background-color: #000000;
    color: #fff;
    overflow: hidden;
    margin: auto;
    white-space: normal;
    position: absolute;
    left: 0;
    display: none;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    border-radius: 20px;
}

.testi-box.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
    position: relative;
    z-index: 1;
}

.testi-box.exit {
    transform: translateX(-100%);
    opacity: 0;
    z-index: 0;
}


.wrap-test1{
    display: flex;
    justify-content: center;
    width: 50%;
    align-items: center;
    overflow: hidden;

}

.wrap-test1 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wrap-imgtest-txt{
    display: flex;
    justify-content: center;
    align-items: center;
}

.theTestimonyTxt{
    width: 50%;
}


.testi-box.test2{
    background-color: rgb(13 12 54);
}

.testi-box.test3{
    background-color: rgb(23 162 184);
}

.testi-box.test5{
    background-color: var(--primary1-color);
}

.slider-container {
    overflow: hidden;
    position: relative;
    width: 100%;
}

#testimonysec{
    height: 260px;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ticketwon-mes-btn{
    text-align: center;
    font-weight: bolder;
    color: #37A25C;
}

.copy-icon{
    font-size: 16px;
    font-weight: bolder;
    cursor: pointer;
}

#spp-table-row{
    position: relative;
}

#read-receipt{
    margin-top: 20px;
    font-size: 16px;
    margin-left: 10px;
    color: blue;
    
}

.kyc-btn button{
    width: 100%;
}

.otp-icon.kyc{
    background-color: #37A25C;
}

.userkycPix{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    
}

.userkycPix img{
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.listkycRules ul{
    list-style: disc;
    font-weight: bold;
}