body{
    margin:0px;
}
html{
  overflow: visible;
}
.signup-container{
  ul.text-sm li {
    color: red;
}
}
.dashboard-main{overflow:visible;}
.profile-main-page{
  .profile-heading{
    color:#fff;
  }
}

.profile-page-block {
    padding: 30px;
    background: #000000;
    border: 0.5px solid #FFFFFFCC;
    border-radius: 10px;
    width: 70%;
    margin: 40px auto;
}





.background {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('/frontend/assets/images/login-bg.png');
    background-size: cover;
    background-repeat: no-repeat;

}

.login-container {
    min-width: 540px;
    background:  #131316CC;
    box-shadow: 40px 40px 60px 0px #1E1F21;
    padding: 48px 72px;
    border-radius: 20px;
    text-align: center;
    backdrop-filter: blur(100px);

}

.login-container{

h1 {
    color: white;
    margin-bottom: 32px;
    margin-top: 0px;
    text-align:left;
    font-size: 28px;
    font-weight: 600;
}




input[type="email"]::placeholder,
input[type="password"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

#pass-block{
    position: relative;
}
#pass-block:after{
    content:'';
     width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12%205.25C4.5%205.25%201.5%2012%201.5%2012C1.5%2012%204.5%2018.75%2012%2018.75C19.5%2018.75%2022.5%2012%2022.5%2012C22.5%2012%2019.5%205.25%2012%205.25Z%22%20stroke%3D%22%2370707B%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M12%2015.75C14.0711%2015.75%2015.75%2014.0711%2015.75%2012C15.75%209.92893%2014.0711%208.25%2012%208.25C9.92893%208.25%208.25%209.92893%208.25%2012C8.25%2014.0711%209.92893%2015.75%2012%2015.75Z%22%20stroke%3D%22%2370707B%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
  background-size: contain;
  position: absolute;
  top:15px;
  right:3%;
  z-index:99;
}
div#pass-label {
    display: flex;
    justify-content: space-between;
}

input#password{
    margin-bottom:32px !important;
}


.forgot-password {
    color: #A0A0AB;
    text-decoration: none;
}

.login-button {
    width: 100%;
    padding: 18px;
    border: none;
    border-radius: 8px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
font-weight: 600;
font-size: 16px;
margin-bottom:24px;
}

.login-button:hover {
    background-color: #0056b3;
}

.signup p{
    margin:0px;
    color: #70707B;
    font-size:16px;
}

.signup a {
    color: #A0A0AB;
    text-decoration: none;
}



}

@media (max-width:900px){
    .login-container{
        min-width:0px;
        padding:18px 30px;
    }

    .login-container 
    h1 {
        font-size:22px;
        margin-bottom:28px;
    }
}




label {
    text-align:left;
    color: white;
    display: block;
    font-size:16px;
    font-weight:400;
    margin-bottom: 12px;
}

input {
    width:-webkit-fill-available !important;
    padding: 17px 45px 17px 16px;
    margin-bottom: 24px;
    border: 1px solid #3F3F46;
    border-radius: 8px;
    background-color: transparent;
    color: white;
font-weight: 400;
font-size: 14px;

}

input:focus {
  outline: none;
  border: 3px solid var(--outline-primary, #194185);
}


/* 
signup css */


.sign-up-bg{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('/frontend/assets/images/login-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
min-height:100vh;
}


.signup-container{
    background:#131316CC;
    padding: 48px 72px;
    border: 1px solid #BABABA80;
    border-radius: 20px;
    backdrop-filter: blur(100px);
    box-shadow: 20px 40px 60px 0px #00000080;
    max-width:396px;
    width:100%;
}

.signup-container input{width:84%;}

.signup-container{


h1 {
font-weight: 600;
font-size: 28px;
line-height: 100%;
color:#fff;
margin: 0px auto 32px;
text-align: center;
}

.social-buttons a{
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    gap:16px;
}

@media(min-width:900px){
  .social-buttons{
        max-width: 300px;
    margin: 0 auto;
  }
}


.btn-register-login {
    background: linear-gradient(90deg, #3B82F6, #06B6D4);
    border-radius: 8px;
    padding: 10px 33px;
    border: none;
    margin: 0 auto 12px;
    display: flex;
    justify-content: center;
}



.social-buttons button{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:8px;
    padding:14px;
    border-radius:8px;
    background: #26272B;
    color:#A0A0AB;
    font-size: 16px;
    font-weight: 600;
    border:none;
}

.social-buttons button svg{
    height:20px;
    width:20px;
}

.or-txt{
font-weight: 600;
font-size: 16px;
color:#70707B;
margin:0px auto 32px;
}

button:hover {
    opacity: 0.8;
}

.forgot-password {
    display: block;
    color: #A0A0AB;
    text-align: right;
    text-decoration: none;
}


.create-account {
    width: 100%;
    padding: 18px;
    border: none;
    border-radius: 8px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
font-weight: 600;
font-size: 16px;
margin-bottom:24px;
}

.create-account:hover {
    background-color: #0056b3;
}
.pass-block {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

#password-signup{
    position: relative;
    margin-bottom:8px;
}

#password-signup:after{
    content:'';
     width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12%205.25C4.5%205.25%201.5%2012%201.5%2012C1.5%2012%204.5%2018.75%2012%2018.75C19.5%2018.75%2022.5%2012%2022.5%2012C22.5%2012%2019.5%205.25%2012%205.25Z%22%20stroke%3D%22%2370707B%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M12%2015.75C14.0711%2015.75%2015.75%2014.0711%2015.75%2012C15.75%209.92893%2014.0711%208.25%2012%208.25C9.92893%208.25%208.25%209.92893%208.25%2012C8.25%2014.0711%209.92893%2015.75%2012%2015.75Z%22%20stroke%3D%22%2370707B%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
  background-size: contain;
  position: absolute;
  top:15px;
  right:3%;
  z-index:99;
}


p {
    text-align: center;
    margin-top: 20px;
}

a {
    color: #A0A0AB;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.signup-end-block-txt{
    margin:0px;
    color:#70707B;
}
}

@media (max-width:900px){
    .signup-container{
        padding:20px 25px;
        margin:auto 8px;
    }

    .signup-container {
    h1{
        font-size: 25px;
        font-weight: 500;
        margin-bottom: 26px;
    }
    .create-account{
        font-weight: 500;
        margin-bottom: 18px;
    }
}


}


.login-container{

  .social-buttons a {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.social-buttons button {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px;
        border-radius: 8px;
        background: #26272B;
        color: #A0A0AB;
        font-size: 16px;
        font-weight: 600;
        border: none;
    }


}

.sort-by {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 1em;
  background:#1A2436;
  color: #333;
  font-size: 1rem;
  position: relative;
  cursor: pointer;
}

.sort-by::after {
  content:"▼";
  display: inline-block;
font-size:11px;
    color: #9b9b9b;
    margin-left: -21px;
}

/* ↑ creates a ▼ (down) arrow using border-trick :contentReference[oaicite:1]{index=1} */



/* landing-page css */


.landing-page-bg{
        width: 100%;
        height:fit-content;
background-image: url('/frontend/assets/images/Main_Top.png');
    background-size: cover;
    background-repeat: no-repeat;
        display: flex;
    flex-direction: column;
    justify-content: space-between;
min-height:100vh
}


.landing-page-container {
    max-width: 884px;
    width:100%;
    color:#fff !important;
    margin:0 auto;
    margin-top:6%;
}


.landing-page-container{
h1 {
text-align: center;
font-weight: 600;
font-size: 60px;
margin:0px auto 25px;
}

.track-txt{
font-weight: 400;
font-size: 25px;
padding:0px 11px;
text-align:center;
color:#fff;
margin:0px auto 90px;
}

p {
    font-size: 1.2em;
    margin-bottom: 40px;
}

.buttons {
    max-width:470px;
    width: 100%;
    margin:0 auto;
    margin-bottom: 90px;
    display: flex;
    gap:15px;
}


.get-started {
    background: linear-gradient(93.3deg, #3B82F6 0%, #06B6D4 100%);
    color: white;
font-weight: 900;
font-style: italic;
font-size: 24px;
text-align: center;
text-transform: uppercase;
padding:15px;
width:50%;
border:none;
border-radius:5px;
}

.login {
    width: 180%;
    background:transparent;
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    color: white;
font-weight: 700;
font-style: italic;
font-size: 24px;
padding:15px;
text-transform: uppercase;
}

.btn:hover {
    opacity: 0.8;
}

.features {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}



.features-container {
    display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 50px;
        padding: 20px;
        max-width: 780px;
        width: 100%;
        margin-bottom: 90px;
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


.feature p{
font-weight: 500;
font-size: 20px;
margin: 0px;
}

.icon svg{
    height:50px;
    width:50px;
}
.icon{
    margin-bottom:20px;
}

.info{
    padding:25px 20px;
    background: #FFFFFF26;
    border: 0.5px solid #FFFFFF80;
    border-radius:10px;
    width:50%;
}

.info .heading{
    display:flex;
    gap:15px;
    align-items: center;
    margin-bottom:24px;
}

.info h2{
    margin:0px;
    font-weight: 600;
font-size: 25px;
}

.info p{
    margin:0px;
font-weight: 400;
font-size: 15px;
}

.info-block
 {
    display: flex;
    gap: 50px;
}
}


.end-copright-text{
    max-width:1206px;
    padding:10px;
    width:100%;
    text-align: center;
    color:#fff;
    margin: 131px auto 0px;
    position: relative;
    bottom:0px;
    border-top: 1px solid;
      border-image: linear-gradient(to right, #1A2436, #FFFFFF, #1A2436) 1;
}

.end-copright-text p{
    margin:0px;
}


@media (max-width:900px){
    .landing-page-container{
        padding: 0px 15px;
        width: auto;
    }

    .landing-page-container {
    h1 {
        font-size:24px;
    }
    .track-txt
 {
        font-size: 18px;
        margin: 0px auto 40px;
    }

    .get-started , .login{
        font-size:18px;
        width: 100%;
    }

    .buttons{
        flex-direction: column;
        align-items: center;
        margin-bottom:45px;
    }

    .features-container{
        flex-direction: column;
        gap:20px;
        width: auto;
    }

    .info-block{
        flex-direction: column;
        width: auto;
    }

    .info{
        width:auto;
    }
}
.end-copright-text{
    width:auto;
}

.terms-conditions{
width:90%;
}


}
.terms-conditions li{
line-height:27px
}
.terms-conditions{
text-align:left;
margin:0 auto;
display:grid;
font-family: "Inter", sans-serif !important;
padding:0px 30px;
}

.terms-conditions h2{
    letter-spacing: 3px;
    font-size: 24px;
margin:0px;
padding:0px;
}

.terms-conditions h1{
    letter-spacing: 3px;
    font-size: 37px;
margin:0px;
padding:0px;
text-align:center;
}

.terms-conditions p,h1,h2,h3{
margin:0;
}



/* dashboard-page CSS */


    .dashboard-main{
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #1A2436;
      color: white;
      display: flex;
      min-height: 100vh;
overflow:visible !important;
    }

    /* Sidebar */
    aside {
      background-color: black;
      min-width: 280px;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0 35px;
      position: sticky;
      top:0;
      height:100vh;
    }

    .site-logo{
        padding:40px 0px 50px;
        margin-bottom:50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom:1px solid ;
        border-image: linear-gradient(to right , #000000 , #FFFFFF , #000000) 1 ;
    }

    aside nav a{
      display: flex;
      align-items: center;
      gap: 15px;
      font-weight: 600;
      font-size: 20px;
      color: white;
      text-decoration: none;
      margin-bottom: 31px;
      border-radius: 8px;
      padding: 7px 10px;
    }

    aside nav a:last-child {
      margin-bottom: 0;
    }

    aside nav .menu-active {
      background: linear-gradient(90deg, #3B82F6, #06B6D4);
      border-radius: 8px;
      padding: 7px 10px;
      font-weight: 700;
flex-direction:row
    }



    aside nav a i {
      font-size: 1.5rem;
    }

    aside > a.logout {
      display: flex;
      gap:15px;
      align-items: center;
      color: #ff0000;
      font-weight: 600;
      font-size: 20px;
      text-decoration: none;
      padding-bottom:35px;
      margin-bottom: 0;
    }

    aside > a.logout i {
      font-size: 1.5rem;
    }

.sidebar path{
fill:white !important;
}

aside nav a i{
color:white;
font-size:20px;
width:13%;
 height:34px;
}


aside nav .menu-active
    /* Main content */
    main {
      flex-grow: 1;
      padding: 102px 36px 36px;
      overflow-x: auto;
    }

    /* Games Today box */
    .games-today {
      border: 0.5px solid #FFFFFFCC;
      border-radius: 10px;
      padding:18px 28px;
      margin-bottom: 38px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background:#131B2C;
    }

    .games-today p:first-child {
      color: #9C9C9C; 
font-weight: 500;
font-size: 15px;
margin-bottom:5px;
margin-top:0px;
    }

    .games-today p:nth-child(2) {
font-weight: 500;
margin-top:0px;
font-size: 20px;
color:#fff;
margin-bottom:5px;
    }

    .games-today p:nth-child(3) {
font-weight: 400;
font-size: 10px;
color:#9C9C9C;
margin-top:0px;
    }

    .games-today img {
      width: 1.5rem;
      height: 1.5rem;
    }

    /* Layout for tables and news */
    .content-row {
      display: flex;
      gap: 40px;
    }

    /* Left table container */
    .top-games {
      border-radius: 0.75rem;
      width: 50%;
    }

    .top-games h2 {
font-weight: 700;
font-size: 25px;
line-height: 120%;
letter-spacing: 0%;
margin-top:0px;
margin-bottom:28px;
margin-left:25px;
    }

    .table {
      width: auto;
      border-collapse: separate;
      border-radius: 0.75rem;
      overflow: hidden;
      table-layout: fixed;
      padding:28px 20px;
      text-align: center;
    }

   .odds-container {
            margin: 0 auto;
            border-radius: 8px;
            overflow: hidden;
        }
        .header-row, .data-row {
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }
        .header-row {
font-weight: 500;
font-size: 16px;
color:#9C9C9C;
        }
        .data-row {
            background: #131B2C;
            border:0.5px solid #f0dddd57;
            padding:16px 8px;
            border-radius:9px;
            align-items: center;
            margin-bottom:10px;
        }
        .header-row div{
            flex: 1;
            text-align: center;
        }

        .data-row div{
            flex: 1;
            text-align: center;
font-weight: 400;
font-size: 14px;
color:#DDDDDD;
        }

        .mid-block {
    display: flex;
    flex-direction: column;
}

span.lw-value{
font-weight: 400;
font-size: 12px;
color:#9C9C9C;
}



        .team-name {
            text-align: left;
        }
        .total {
            color: #00ff00 !important; /* Green color for the Total */
        }

    /* Right side container */
    .right-side {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      flex: 1 1 320px;
      max-width: 100%;
      width: 50%;
      min-width: 280px;
    }

    /* Live News */
    .live-news {
      background-color: #131B2C;
      border: 1px solid #272625;
      border-radius: 0.75rem;
      padding: 28px 24px;
      display: flex;
      flex-direction: column;
      margin-top:125px;
margin-bottom:10px;
    }

    .live-news-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
    }

    .live-news-header h3 {
font-weight: 500;
font-size: 25px;
color:#fff;
margin:0px;
    }

    .live-news-header a {
font-weight: 500;
font-size: 12px;
      text-decoration: none;
      color:#3B82F6;
    }

    .news-item {
      margin-bottom: 1.5rem;
    }

    .news-item:last-child {
      margin-bottom: 0;
    }

    .news-item p.title {
font-weight: 500;
font-size: 15px;
color:#fff;
margin:0px 0px 10px;
    }

    .news-item p.time {
font-weight: 500;
font-size: 12px;
color:#9C9C9C;
margin-bottom:21px;
    }

    .news-item hr {
      border: none;
      border-bottom: 1px solid;
      border-image: linear-gradient(to right , #131B2C, #FFFFFF , #131B2C) 1;
      margin: 0px;
    }

    /* My Picks */
    .my-picks {
      background:#131B2C;
      border: 1px solid #272625;
      border-radius: 0.75rem;
      padding: 28px 25px;
width:89%;
margin:0px 3px;
    }

    .my-picks h3 {
      font-weight: 600;
      font-size: 1.125rem;
      margin-bottom: 1.5rem;
    }

    .status-pending{
        COLOR:#FFF600 !important;
    }

    .status-won{
        COLOR:#00FF19 !important;
    }

    .status-lost{
        COLOR: #ED3440 !important;
    }



    /* Responsive */
    @media (max-width: 1024px) {
      .content-row {
        flex-direction: column;
      }
      .right-side {
        max-width: 103%;
        flex: none;
      }
      main {
        padding: 0px;
      }
      aside {
        width: 14rem;
        padding: 1rem;
      }
    }


    aside.sidebar {
    overflow-y: scroll;
    display: flex;
    gap:50px;
    z-index:9;
min-height:100vh;
}

aside.sidebar::-webkit-scrollbar {
  width: 4px;
}



aside.sidebar::-webkit-scrollbar-thumb {
  background-color: #383838; 
  border-radius: 4px;
  border: 2px solid #202020; 
}

aside.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}


.hamburger {
  width: 30px;
  height: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  display: none;
  position: absolute;
  right:20px;
  top:20px;
}

.hamburger span {
  display: block;
  height: 4px;
  background: rgb(255, 255, 255);
  border-radius: 2px;
  transition: 0.3s;
  margin-bottom:3px;
}
.sidebar {
    transition: transform 0.3s ease-in-out; /* Smooth sliding effect */
}
.header-main-page{
    display: none;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}


@media (max-width: 768px) {

    .games-today{
        margin-top:30px;
margin:auto;
width:84%;;
    }

    .site-logo{
        padding: 12px 0px 30px;
        margin-bottom:25px;
    }
    aside nav a{
        margin-bottom:20px;
    }

    .header-main-page {
    width: 100%;
    display: block;
            position: fixed;
        height: 50px;
        left: 0px;
        z-index:999;
}

    .hamburger {
        display: block; /* Show hamburger menu on small screens */
    }
    aside nav a{
        font-weight:500;
    }

    .sidebar {
        width: 250px;
    height:-webkit-fill-available;
    background-color: #000;
    color: white;
    padding: 20px;
    position: fixed;
    top: 0;
    left: 0;
        transform: translateX(-100%); 
    }

    .sidebar.active {
        transform: translateX(0);
    }

    main {
        margin-left: 0;
    }

    .top-games{
        width:100%;
    }

    .table{
        padding:0px;
        width:100%;
    }
    .right-side{
        width:103%;
    }

    .bet-table-container{
        margin:0px !important;
    }

    .bet-container{
        overflow-x:scroll !important;
    }

    .bet-container::-webkit-scrollbar {
  width: 8px; /* width of the vertical scrollbar */
  height: 8px; /* height of the horizontal scrollbar */
}


.bet-container::-webkit-scrollbar-thumb {
  background-color: #888; /* scrollbar handle */
  border-radius: 4px;
  border: 2px solid transparent; /* for some padding */
  background-clip: content-box;
}

.bet-container::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* darker on hover */
}
    .bet-header, .bet-row{
        width:900px;
    }

.add-btn{
    padding: 9px 14px !important;
        font-weight: 600 !important;
    font-size: 16px !important;
}




}



/* bet page CSS */

        .search-container {
            position: relative;
            max-width: 281px; 
            width:100%;
        }

        .search-bar {
            width: 100%;
            padding: 12px 12px 12px 33px; 
            font-size: 14px; 
            border: 0.5px solid #FFFFFF80;
            border-radius: 8px; 
            background-color: #192335; 
            color: #fff;
            outline: none;
        }

        .search-bar::placeholder {
            color: #EEEEEE; 
        }

        .search-icon {
            position: absolute;
            left: 11px;
            top: 23px;
            transform: translateY(-50%);
            color: #888; /* Icon color matching the placeholder */
            font-size: 16px; /* Adjusted to match the icon size */
        }

        .add-btn {
            background: linear-gradient(to right , #3B82F6 , #06B6D4);
            border: none;
            border-radius: 5px;
            padding:13px 21px;
            color: #ffffff;
            cursor: pointer;
font-weight: 600;
font-size: 20px;
        }

        .add-btn:hover {
            background-color: #1c86ee;
        }


        .csv-dw {
            background: linear-gradient(to right , #3B82F6 , #06B6D4);
            border: none;
            border-radius: 5px;
            padding:13px 21px;
            color: #ffffff;
            cursor: pointer;
font-weight: 600;
font-size: 20px;
        }

        .csv-dw:hover {
            background-color: #1c86ee;
        }


        .bet-container {
            overflow: hidden;
        }

        .bet-stake{
            color:#00FF19;
        }

        .bet-odds{
            color:#DB1A28;
        }
        
        .bet-header,
        .bet-row {
            display: flex;
        }

        .bet-row{
            padding:16px;
            border:0.5px solid #FFFFFF80;
            box-shadow: 0px 5px 10.4px -4px #00000012;
            margin-bottom:11px;
            border-radius:12px;
        }


        .bet-header div{
            flex: 1;
            padding: 11px;
        }
        .bet-row div {
            flex: 1;
            text-align: center;
        }

        .bet-header div {
            text-align: center;
font-weight: 500;
font-size: 16px;
color:#9C9C9C;
        }


        .bet-row:last-child {
            margin-bottom: 0px;
        }

        .result-win {
            color: #00ff00;
        }

        .result-lose {
            color: #ff0000;
        }

        .result-pending {
            color: #888;
        }

        .profit-positive {
            color: #00ff00;
        }

        .profit-negative {
            color: #ff0000;
        }

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

        .pagination-btn.arrow {
            background: #1A1A19;
            border: 1px solid #272625;
            border-radius: 8px;
            padding: 11px;
            color: #7F7F7F;
            margin: 0 0px 0px 14px;
            cursor: pointer;
                width: 32px;
    height: 32px;
    display: flex;
    align-items: anchor-center;
        }

        .pagination-btn.active {
            background:linear-gradient( 130deg , #3B82F6 , #06B6D4);
            backdrop-filter: blur(36.29999923706055px);
            color:#fff;
            padding:17px;
            display: flex;
            align-items: anchor-center;
            justify-content: center;
            height:41px;
            width:41px;
        }

        .pagination-btn{
            backdrop-filter: blur(36.29999923706055px);
            color:#686868;
            padding:17px;
            display: flex;
            align-items: anchor-center;
            justify-content: center;
            height:41px;
            width:41px;
            background: transparent;
            margin-left:5px;
            border-radius:12px;
            border: 1px solid #272625;
        }


        .pagination-btn:disabled {
            background-color: #2a2f3b;
            cursor: not-allowed;
        }

        .bet-table-container {
            margin: 0 40px;
            padding:44px 10px;
            background:#131B2C;
            border: 1px solid #272625;
            border-radius:16px;
        }

        .bet-page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom:20px;
        }

        .report-page-header {
            display: flex;
            justify-content: end;
            align-items: center;
            margin-bottom:20px;
margin-top:45px;
        }



                .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-btn {
            background-color: #192335AD;
            border: 1px solid #FFFFFF80;
            border-radius: 12px;
            padding: 9px 18px;
            color: #ffffff;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
font-weight: 400;
font-size: 14px;
        }

        .dropdown-btn:hover {
            background-color: #192335b9;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #2a2f3b;
            min-width: 200px;
            border: 1px solid #3a3f4b;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            z-index: 1;
            margin-top: 0px;
        }

        .dropdown-content a {
            color: #ffffff;
            padding: 10px 12px;
            text-decoration: none;
            display: block;
            cursor: pointer;
        }

        .dropdown-content a:hover {
            background-color: #3a3f4b;
        }

        .dropdown-content.show {
            display: block;
        }

    .report-main-page{
      flex-grow: 1;
      padding: 0px 0px 20px;
      overflow-x: auto;
      background: #1e2329;
padding:15px !important;
    }

.report-table-container {
            margin: 0;
            padding:44px 10px;
            background:#131B2C;
            border: 1px solid #272625;
            border-radius:16px;
            margin:0px 20px;
        }

        .report-menu-bar {
            display: flex;
            align-items: center;
            background-color: #192335;
            padding: 20px 18px 20px 46px;
            border: 0.5px solid #FFFFFF80;
            box-shadow: 0px 5px 10.4px -4px #00000012;
            justify-content: space-between;
        }

        .report-menu-bar {
            
            .menu-label {
            color: #EEEEEE;
font-weight: 400;
font-size: 25px;

        }

        .dropdown {
            position: relative;
            margin-right: 10px;
        }

        .dropdown-button {
            background-color: #192335;
            color: #fff;
            padding: 11px 19px;
            border: 0.5px solid #FFFFFF80;
            border-radius: 12px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            box-shadow: 0px 5px 10.4px -4px #00000012;
        }

        .dropdown-button::after {
            content: "";
  display: inline-block;
  width: 11px;
  height: 10px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAshJREFUeJzt1DtqVVEcRvH/QYKlihOItYiFQ7C3CoJFClM5DcEx6AAEEVIEC1tHIIqNIAp2goWSzlgkyyYHN3lw7z2vvfc561eFcB773vUlEZIkSZIkSZIkSZIkSZIkSZIkSZIkSapG0/4AXImIBxFxPyJuRMT3iNhvmuZTprNpAMDdiHgYEdsR8Tsi3kXEm6ZpTtKLbgEfOe8EeA5sZTm9OgO2gBenDc/6AGy3F14Hvl1wUerAEdTjNP7BiqZfgWsBPFtxoSOoyJrxW08D+LLmxY6gcBvGB/gcwNEGNziCQnWID/AngJ8b3uQICtMxPsCPAF51uNERFKJHfICXAdwB/jqC+vSMfwTcbh+0Cxw7gnr0jH8M7J594OMeI3gLXM30XSxOz/gnwJPLHuwICjda/OQFjqBQo8dPXuQICjNZ/OSFjqAQk8dPXuwIMssWPzmAI8gke/zkII5gYsXETw7kCCZSXPzkYI5gZMXGTw7oCEZSfPzkoI5gYNXETw7sCAZSXfzk4I6gp2rjJx/AEXRUffyWI9jcbOK3HMH6Zhe/5QhWm238liO43OzjtxzBeYuJ33IE/y0ufssRLDh+a8kjWHz81hJHYPwzljQC419iCSMw/gpzHoHx1zTHERh/Q3MagfE7msMIjN9TzSMw/kBqHIHxB1bTCIw/khpGYPyRlTwC40+kxBEYf2IljcD4mZQwAuNnlnMExi9EjhEYvzBTjsD4hZpiBMYv3JgjMH4lxhiB8Ssz5AiMX6khRmD8ygF7PUZw0CP+MbCX+/Mrev8n6MK//NJMOALjl2qCERi/dCOOwPi1GGEExq/NgCMwfq0GGIHxa9djBMafiw4jMP7cbDAC48/VGiMw/twBO8DhBfEPgZ3c55tak/sAOQA3I+JRRNw7/dX7iHjdNM2vfKeSJEmSJEmSJEmSJEmSJEmSJEmSJEmSVvgHNg11oXoixFkAAAAASUVORK5CYII=");
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 6px;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #2a2f3b;
            min-width: 160px;
            border: 1px solid #444;
            border-radius: 5px;
            z-index: 1;
            top: 100%;
            left: 0;
            margin-top: 0px;
        }

        .dropdown-content a {
            color: #fff;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            font-size: 14px;
        }

        .dropdown-content a:hover {
            background-color: #3a3f4b;
        }

        .dropdown.active .dropdown-content {
            display: block;
        }

        }




.graph-info-group{
            .dashboard {
            background-color: #1e2329;
            padding: 20px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            color: #ffffff;
        }


        .bar-chart-container {
            position: relative;
            max-width: 432px;
            padding:0px;
            background: #131B2C;
            border:none;
            border-radius:12px;
            width:100%;
        }

        .chart-title {
            font-size: 16px;
            font-weight: bold;
            text-align: center;
        }

        .bar-chart {
            position: relative;
            max-width:345px;
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
            margin: 0 23px 24px auto;
        }

        .bar {
            width: 28px;
            background-color: #006AFF;
            border-radius: 8px;
            position: relative;
        }

        .bar-label {
            position: absolute;
            bottom: -25px;
            width: 100%;
            text-align: center;
            font-size: 10px;
            left:-5px;
        }

        .first-graph-group{
            display: flex;
            gap:25px;
        }

        .bar-football { height: 75px; } /* 15K */
        .bar-basketball { height: 125px; } /* 25K */
        .bar-hockey { height: 100px; } /* 20K */
        .bar-baseball { height: 150px; } /* 30K */
        .bar-other { height: 50px; } /* 10K */

        .y-axis-bar {
            position: absolute;
            left: -27px;
            top: 0;
           overflow:hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 12px;
        }

        .y-axis-bar div {
            font-size: 12px;
            margin-left: 5px;
        }

        /* Donut Chart: Hire vs Cancel */
        .donut-chart-container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background: #131B2C;
            padding:48px 32px;
            border-radius:8px;
        }

        .donut-chart-title{
font-weight: 500;
font-size: 18px;
color:#fff;
margin:0px 0px 22px;
        }

        .donut-chart {
            width: 146px;
            height: 146px;
            background: conic-gradient(#006AFF 0% 60%, #FF2727 60% 100%);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .donut-hole {
            width: 100px;
            height: 100px;
            background-color: #1e2329;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            font-weight: bold;
        }

        .legend {
            display: flex;
            gap: 32px;
            margin-top: 10px;
            font-size: 12px;
            font-weight: 400;
        }

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

        .legend-color {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        .legend-win { background-color: #4a90e2; }
        .legend-loss { background-color: #e94e4e; }

        /* Line Chart: Profit/Loss Overtime */
        .line-chart-container {
            position: relative;
            height: 255px;
            max-width: 94%;
            width:100%;
            background: #131B2C;
            padding:32px 28px;
            border-radius:8px;
        }

        .line-chart-graph{
            display: flex;
            justify-content: space-between;
            margin-bottom:25px;
        }

        .line-chart {
            width: 83%;
            height: 150px;
            position: relative;
        }

        .y-axis-line {
            position: absolute;
            left: 0px;
            top: 0;
            height: 150px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 12px;
        }


        .x-axis-line {
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            max-width: 700px;
            width: 100%;
            left:10%;
top:141px;
        }

        .line-chart svg{
            margin-bottom:56px;
margin-left:23px
        }

        .date-time {
    display: flex;
    gap: 32px;
    align-items: center;
}

.time{
    color:#fff;
font-weight: 400;
font-size: 12px;
}


        .line-legend {
            display: flex;
            gap: 10px;
            font-size: 12px;
            margin-top: 10px;
            justify-content: center;
        }

        .line-legend-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .line-legend-color {
            width: 10px;
            height: 2px;
        }

        .line-last-month { background-color: #4a90e2; }
        .line-last-year { background-color: #87ceeb; }

        /* SVG for Line Chart */
        svg {
            width: 100%;
            height: 150px;
        }

        polyline {
            fill: none;
            stroke-width: 2;
        }

        .line-last-month-path { stroke: #4a90e2; }
        .line-last-year-path { stroke: #87ceeb; stroke-dasharray: 5,5; }
		
}
        

@media (max-width:900px){
    .report-menu-bar{
        padding:20px;
        flex-direction: column;
    }
    .report-menu-bar {
    .menu-label {
        margin-bottom:13px;
    }
    .report-header-dropdown{
        display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    }
.csv-dw button{
width:52%;;
}


}

.graph-info-group {

    svg{
        width: 60%;
        margin-left: 15%;
    }

    .bar-chart{
        margin: 0 0px 24px 33px;
    }
    
    .first-graph-group {
        flex-direction: column;
    }

    .line-chart-graph{
        flex-direction: column;
        gap: 10px;
    }
    .line-chart-container{
        width:auto;
        padding:28px 12px 85px;
    }

    .bar-chart-container{
        width:auto;
    }

    .x-axis-line{
        bottom:-20%;
        width:80%;
        left:15%;
    }
}

.csv-dw{
    font-size:16px;
}

}



/* profile page CSS */

.profile-main-page{
  background:#1a2436;
  padding-top:82px;
min-height:100vh;
}

.profile-container {
  color:#fff;
    max-width:1200px;
            width: auto;
            margin: 0 auto;
            padding: 20px 54px 20;
        }

        .profile-header {
font-weight: 600;
font-size: 50px;
            margin-bottom:10px;
        }

        .profile-subheader {
font-weight: 300;
font-size: 25px;
margin-bottom:50px;
        }

        .profile-info-section{
            padding:0px 0px 43px;
            background: #131B2C;
            border-left: 0.5px solid #FFFFFFCC;
            border-bottom: 0.5px solid #FFFFFFCC;
            border-right: 0.5px solid #FFFFFFCC;
            border-radius:10px;
            width: 100%;
        }

        .profile-heading{
            margin:0px;
            padding:15px 10px 13px 30px;
font-weight: 500;
font-size: 30px;
border-top: 0.5px solid #FFFFFF80;
border-bottom: 0.5px solid #FFFFFF80;
border-radius:12px 12px 0px 0px;
        }

        .profile-picture-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:15px; 
}

        .profile-name-info{
            display: grid;
            grid-template-columns:1fr 1fr;
            column-gap:30px;
            align-items: center;
            margin-bottom:0px;
        }

        .profile-form {
            display: flex;
            flex-wrap: wrap;
            gap: 49px;
            justify-content: space-evenly;
            padding:18px 28px 0px;
        }


        .profile-picture {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #3a3f4b;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .profile-icon {
            font-size: 40px;
            color: #888;
        }

        .camera-icon {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 30px;
            height: 30px;
            background-color: #4a90e2;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            color: #ffffff;
        }

        .camera-text {
font-weight: 400;
font-size: 10px;
color:#AFAFAF;
text-align:center;
        }

        .form-group {
            min-width:280px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 0px;
            flex: 1;
        }

        .form-group label {
            margin:0px 0px 5px;
font-weight: 500;
font-size: 25px;
        }

        .form-group input {
            background:#192335;
            border: 0.5px solid #FFFFFF80;
            border-radius: 5px;
            padding: 10px;
            color: #ffffff;
            font-size: 15px;
            width: 280px;
        }

        .form-group input::placeholder {
            color: #888;
        }

        .update-button {
            background: linear-gradient( to right , #3B82F6 , #06B6D4) ;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            padding: 13px 47px;
            cursor: pointer;
            align-self: flex-end;
font-weight: 500;
font-size: 20px;

        }

        .update-button:hover {
            background: #357abd;
        }

        .save-profile-button{
            display: flex;
            justify-content: center;
        }
        .how-you-know .radio-label{
          display: flex !important;
        }


@media (max-width:900px){

  .how-you-know .radio-label{
          display: flex !important;
        }

      .profile-name-info{
        grid-template-columns: 1fr;
      }

    .profile-container{
        width:auto;
        padding:20px;   
    }
    .profile-name-info{
        height:auto;
        flex-direction: column;
        gap:5px;
        margin-bottom:12px;
    }
    .profile-picture-section{
        width:100%;
    }
    .camera-text{
        font-size:14px;
    }
    .profile-form{
        justify-content: center;
    }
    .form-group label{
        font-size: 20px;
    }


}




.question {
  color:#fff;
font-weight: 500;
font-size: 25px;
margin:0px auto 25px;
}

.radio-group {
  display: flex;
  gap: 20px; /* Space between radio buttons */
  margin:0px auto 24px;
}

.radio-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  margin:0px;
}

.radio-label input[type="radio"] {
  appearance: none; /* Remove default radio button styling */
  width: 20px !important;
  height: 20px;
  border: 1px solid #006AFF; /* White border for radio buttons */
  border-radius: 50%;
  margin:0px 8px 0px 0px !important;
  background-color: transparent;
  position: relative;
  cursor: pointer;
  padding:0px;
}

.radio-label input[type="radio"]:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #006AFF; /* White fill when selected */
  border-radius: 50%;
}

.radio-label input[type="radio"]:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Slight hover effect */
}

.how-you-know {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: anchor-center;
}



.payment-container{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

}
.payment-container-wrapper{
background:#1A2436;
}

.payment-container-wrapper .paymet-cnt-frm{
background:#131B2C;
padding:45px 55px;
}
.payment-container{
form {
      border: 1px solid #006AFFCC;
      border-radius: 16px;
      padding: 93px 140px;
      width: fit-content;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
margin:auto;
    }
    label {
      font-weight: 500;
      margin-bottom:16px;
      font-size: 17px;
      color: white;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    svg{
        height:16px;
        width:16px;
    }
    input#ccv{
        max-width:147px;
    }
    .info-icon {
      color: #3B82F6;
      font-size: 0.625rem;
      cursor: default;
    }
    input[type="text"] {
      width: 100%;
      border-radius: 0.375rem;
      font-size: 0.75rem;
      font-family: monospace;
      letter-spacing: 0.2em;
      padding: 0.5rem 0.75rem;
      border: none;
      outline: none;
      background-color: white;
      color: #0B1524;
      box-sizing: border-box;
    }
    .flex-row {
      display: flex;
      gap: 1.5rem;
    }
    .flex-1 {
      flex: 1;
    }
    button {
        margin-top:34px;
      width: 100%;
      padding: 13px;
      font-size: 17px;
      font-weight: 600;
      color: white;
      border: none;
      border-radius: 0.375rem;
      background: linear-gradient(to right, #06B6D4 0%, #3B82F6 100%);
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background: linear-gradient(90deg, #0db9d9cc 0%, #3b82f6cc 100%);
    }

    @media (min-width:900px) {
        input#expire {
    min-width: 245px;
    width: 100%;
}
input::placeholder {
  text-align: center;
}
input[type="text"]{
    min-height:48px;
}
    }



    @media(max-width:900px){
        form{
            padding:60px 32px;
        }
    }
}

.dashboard-main .form-container{
margin:auto;
width:100%;
max-width:40%;
border: 2px #064AAA solid;
padding: 30px 60px 30px 60px;
border-radius:10px;
}

.dashboard-main button{
margin-bottom:10px;
width:100%;
}


/*============Subscription Admin====================*/
  /* Sort By Dropdown */
  .sort-by {
    position: relative;
  }
  .sort-by select {
    background-color: #1e293b;
    border: none;
    color: #e0e7ff;
    font-weight: 600;
    padding: 0.5rem 1.5rem 0.5rem 1rem;
    border-radius: 0.375rem;
    appearance: none;
    cursor: pointer;
  }
  .sort-by select:focus {
    outline: none;
    box-shadow:
      0 0 0 2px rgb(59 130 246 / 0.9);
  }
  /* Add caret arrow */

  /* Add Bet Button */
  .add-bet-btn {
    background: linear-gradient(135deg, #3B82F6, #06B6D4);
    border: none;
    color: white;
    font-weight: 600;
    padding: 0.48rem 1.25rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    border-radius: 0.375rem;
    cursor: pointer;
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.1),
      0 0 12px 2px rgb(37 99 235 / 0.5);
    transition: background-color 0.2s ease;
  }
  .add-bet-btn:hover,
  .add-bet-btn:focus {
    background: linear-gradient(135deg, #06B6D4, #3B82F6,);
    outline: none;
  }
  .add-bet-btn svg {
    fill: white;
    margin-right: 0.4rem;
  }

  /* Search input */
  .search-box {
    flex: 1 1 201px;
  }
  .search-box input {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 0.375rem;
    border: none;
    background-color: #1e293b;
    color: #e0e7ff;
    font-weight: 500;
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.07);
  }
  .search-box input::placeholder {
    color: #94a3b8;
  }
  .search-box input:focus {
    outline: none;
    box-shadow:
      0 0 0 2px rgb(37 99 235 / 0.8);
  }
  .search-icon {
    position: relative;
  }
  .search-icon svg {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    fill: #cbd5e1;
    pointer-events: none;
    width: 1rem;
    height: 1rem;
  }
  .search-box input {
    padding-left: 2.5rem;
max-width:30%;
  }

  /* Table styling */
  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.7rem;
    font-size: 0.95rem;

  }
  /* Header row */
  thead tr th {
    text-align: left;
    font-weight: 600;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: #94a3b8;
    text-align: center;
  }

  tbody tr {
    background-color: #1e293b;
    box-shadow:
      0 0 6px 1px rgb(228 228 228 / 0.05);
    border-radius: 0.5rem;
  }
  tbody tr td {
    padding: 1rem 1rem;
    vertical-align: middle;
  }

  /* ID cell - center */
  tbody tr td.id {
    text-align: center;
    width: 2rem;
    font-weight: 600;
  }

  /* Image cell */
  tbody tr td.image {
    width: 3.5rem;
    padding: 0.3rem 1rem;
  }
  tbody tr td.image img {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.35rem;
    object-fit: cover;
  }

  /* Full Name - bold */
  tbody tr td.fullname {
    font-weight: 600;
    width: 14rem;
  }

  /* Card number */
  tbody tr td.card-number {
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.09rem;
    width: 15rem;
  }

  /* cvv & expiry */
  tbody tr td.cvv,
  tbody tr td.expiry-date {
    width: 4rem;
    text-align: center;
    font-weight: 600;
    color: #cbd5e1;
  }

  /* Action buttons container */
  tbody tr td.actions {
    width: 11rem;
    text-align: right;
    white-space: nowrap;
color:#e3e3e3;
  }

  /* Action buttons - styles and spacing */
  .btn {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    margin-left: 0.5rem;
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.1);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
background: linear-gradient(90deg, #3B82F6, #06B6D4);
  }
  .btn.edit {
    background-color: #2563eb;
    color: white;
  }
  .btn.edit:hover,
  .btn.edit:focus {
    background-color: #1e40af;
    box-shadow:
      0 0 0 2px rgb(59 130 246 / 0.9);
    outline: none;
  }

  .btn.view {
    background-color: #1e293b;
    color: #94a3b8;
    border: 1px solid #334155;
  }
  .btn.view:hover,
  .btn.view:focus {
    background-color: #334155;
    color: #cbd5e1;
    border-color: #6b7280;
    outline: none;
  }

  .btn.delete {
    background-color: #dc2626;
    color: white;
  }
  .btn.delete:hover,
  .btn.delete:focus {
    background-color: #991b1b;
    box-shadow:
      0 0 0 2px rgb(220 38 38 / 0.9);
    outline: none;
  }

  /* Pagination container */
  .pagination {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 0.7rem;
width:24%;
margin:auto;
padding:22px 0px;
  }

  /* Pagination buttons */
  .page-btn {
    background-color: #1e293b;
    border: none;
    color: #94a3b8;
    font-weight: 600;
    padding: 0.65rem 0.9rem;
    border-radius: 0.5rem;
    cursor: pointer;
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.07);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  .page-btn:hover,
  .page-btn:focus {
    background-color: #334155;
    color: #cbd5e1;
    outline: none;
  }
  .page-btn.active {
    background-color: #2563eb;
    color: white;
    box-shadow:
      0 0 12px 3px rgb(37 99 235 / 0.7);
  }
  .search-box input{
    width:28%;
margin-left:2%;
margin-top:2%;
  }
  .visually-hidden { 
      position: absolute !important; 
      height: 1px; width: 1px; 
      overflow: hidden;
      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
      clip: rect(1px, 1px, 1px, 1px);
      white-space: nowrap; 
    }
/*==============Subscription Form====================*/
 /* Info icon styling */
  .info-icon {
    display: inline-block;
    margin-left: 6px;
    background: #1e40af;
    color: #3b82f6;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-weight: bold;
    font-size: 0.75rem;
    cursor: default;
    user-select: none;
  }
  .info-icon:hover::after {
    content: attr(data-tip);
    position: absolute;
    background: #1e3a8a;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    color: #cbd5e1;
    white-space: nowrap;
    margin-top: 28px;
    margin-left: -24px;
    pointer-events: none;
    z-index: 10;
  }

  input[type="text"],
  input[type="tel"],
  input[type="number"] {
    font-size: 1rem;
    padding: 10px 14px;
    border-radius: 8px;
        background-color: #131B2C;
    color: #eeeff2;
    letter-spacing: 0.12em;
    transition: box-shadow 0.2s ease;
    width: 100%;
    border: 1px solid #3F3F46;
}
  
  input[type="text"]:focus,
  input[type="tel"]:focus,
  input[type="number"]:focus {
    outline: none;
    box-shadow: 0 0 8px #3b82f6;
background-color: #131B2C;
    border: 1px solid #3F3F46;
color:white;
  }

  /* Card number input container */
  .card-number-container {
    margin-bottom: 0px;
  }

  /* Expire + CCV container side by side */
  .row-flex {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
  }
  .row-flex > div {
    flex: 1;
  }

  /* Expire date styling: split placeholders with flex placeholder spacing */
  .expire-input {
    letter-spacing: 0.18em;
  }

  /* Billing address margin */
  .billing-address {
    margin-bottom: 14px;
  }

  /* Button */
  button {
    width: 100%;
    background-image: linear-gradient(to right, #06b6d4, #3b82f6);
    border: none;
    padding: 14px 0;
    font-weight: 600;
    font-size: 1.1rem;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: background-position 0.25s ease;
    background-size: 200% 100%;
    background-position: left center;
  }
  button:hover,
  button:focus {
    background-position: right center;
  }
 .card-number-container input{
    padding: 10px;
    width: 100%;
    border-radius: 8px;
    border: none;;
background:#131B2C;
    border: 1px solid #3F3F46;
color:#bfbfbf;
}

.billing-address textarea{
    width: 100%;
    height: 9%;
border:none;
    border-radius: 10px;
background:#131B2C;
    border: 1px solid #3F3F46;
    border:none;
color:#eeeff2;
}

.dashboard-main .row-flex{
margin-bottom:0px;}


.controls .sort-by{
display:flex;
flex-direction:row;
justify-content:space-between;
width:10%;
}

tbody{
color:#e3e3e3;
}


.actions .btn.view{
width:auto;
}

.btn.delete{
width:auto;
}

.controls{
margin-top:1%;
margin-bottom:1%;
margin-right:1%;
margin-left:1%;
}

a{
text-decoration:none;
text-align:center;
}


.dashboard-main .payment-container{
form {
    padding: 0px;
    border: none;
    width: 100%;
}

input#ccv {
  max-width: 100%;
}

.py-12{
    margin:0 auto;
}
}




@media only screen and (max-width: 900px) {
.search-box{
    width: 100%;
}

.full-width-brg{
width:100%;
}

.payment-container .flex-row{
flex-direction:column;
}
}


/* css done by me*/
.block input{
background-color:#131B2C;
}
.card-number-container input #name{
background-color:#131B2C; 
}
.full-width-brg{
width:100%;
}






.sub-user-list{
margin:0 auto;
overflow:hidden;
}


 .sub-user-table{
overflow-x:scroll;
}

  .sub-user-table::-webkit-scrollbar {
    width: 10px;
    height: 5px;
  }
  .sub-user-table::-webkit-scrollbar-track {
    background:rgba(241, 241, 241, 0);
  }
  .sub-user-table::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
  }
  .sub-user-table::-webkit-scrollbar-thumb:hover {
    background: #fff;
  }



@media only screen and (max-width: 900px){
.search-box input{
   max-width: 44% !important;
}
.sub-user-list {
    padding: 15px;
}

.subs-content-wrapper{
  width:90% !important;
  min-height: 100vh;
  background: #1A2436;
}

.form-content-wrapper{
  width:100%;
}

.form-group-2{
  gap:30px;
flex-direction: column;
margin-bottom:10px;
}

#submit-form-1{
  width:50%;
  margin-top:10px;
  color:white;
  margin: auto;
}

.btn-toolbar{
  width:70%;
  margin:20px 0px;
  color:white;
  margin: auto;;
}

.subs-content-wrapper .search-input{
  width:100%;
}

.bar-chart {
  margin: 0px 0px 0px 0px;
  margin-left: -60px;
  left: 82px;
  width: 76%;
  padding: 27px;
}

.btn-toolbar{
  width:70% !important;
}

.table-responsive{
  width:100% !important;
  overflow: scroll !important;
}
}

.terms-conditions{
width:90%;
padding:20px 38px;
margin:0px;
}


/* css done by Akshay*/

.sub-user-table tr{
text-align:center;
}


.admin-dash-content{
  width:95% !important;
}

.content-row{
  flex-wrap: nowrap;
}

.card-wrapper-backend{
  background: #131B2D !important;
  color: white !important;
  border-radius: 12px !important;
  border:1px solid #5F5D68 !important;
}

.table-striped{
  border:none !important;
}

.card-wrapper-backend th{
  background: unset !important;
  color: white !important;
  border-bottom: none !important;

}

.card-wrapper-backend td{
  background:#1A2436 !important;
  color: white !important;
  border:1px solid #5F5D68 !important;
}



tr .td-style-2{
  border-left:none !important;
  border-right:none !important;
  border-top-right-radius: none !important;
  border-bottom-right-radius: none !important;
  border-top-left-radius: none !important;
  border-bottom-left-radius: none !important;
}

tr .td-style-1{
  border-right:none !important;
  border-top-right-radius: none !important;
  border-bottom-right-radius: none !important;
}

tr .td-style-3{
  border-left: none !important;
  border-top-left-radius: none !important;
  border-bottom-left-radius: none !important;
}

.td-style-3 BUTTON{
  WIDTH:30%;
  color: WHITE;
  margin: auto;
  border: none;
}
.subs-content-wrapper .topbar{
  display: flex;
  justify-content: space-between;
}

.subs-content-wrapper .topbar button{
  width:20%;
}

.subs-content-wrapper .topbar a button{
  width:auto;;
}

.subs-content-wrapper{
  width:60%;
  margin:0 auto;
  padding:20px;
}

.sub-user-list{
  width:95%;
  margin:0 auto;
  padding:20px;
}

.backend-button-styles-pages button{
  margin-bottom:0px;
}

.backend-button-styles-pages{
  margin-bottom:0px;
}

.button-style-1{
  display:flex;
  justify-content: center;
  gap:20px;
}
.button-style-1 form button{
  margin-bottom: 0px;
}

.td-style-2 td{
  border-radius:none; ;
}

.card-wrapper-backend .card-header{
  margin: auto;
  margin-top:15px;
}

.data-table{
  overflow: auto;
  width:100%;
}

.dashboard-main .pages-backend-wrapper{
  margin:0 auto;
  width:60%;
  padding:20px 0px !important;
  }
  
  .page-content{
      margin:0 auto;
  }
  
  .backend-button-styles-pages{
      display:flex;
      justify-content:center;
      gap:5px;
      align-items: center;
  }
  
  .fa-edit{
      color:white;
  }
  
  
  .button-page-backend{
      padding:25px 0px;
  }
  
  .button-page-backend a{
  color:white;
  padding:10px;
  margin:20px 0px;
  }
  .pages-title h1{
      padding:10px 0px
  }
  

  .form-style-edit{
    width:auto !important;
    margin:0 auto !important;
  }

  .row2-edit-pag{
    grid-template-rows: 1fr 1fr;
    display: grid;
  }
  

  #description{
    width:100%;
    background-color: #131B2C;
    color:white;
    border: 1px solid #3F3F46;
    transition: box-shadow 0.2s ease;
  }

  #status{
    margin-bottom:10px;
  }

  .brdr-22{
    border:#5F5D68
  }

  .webkit-scrollbar-track{
    background:rgba(241, 241, 241, 0);
  }

  .user-profile-content{
    margin:0px auto;
    padding:30px 0px;
    text-align: center;
  }

  .user-profile-content .row a{
    color:white;
  }

  .form-group-2{
    display: flex;
gap:30px;
text-align: center;
margin-bottom:10px;
  }

  .form-group-main{
    width:80%;
    margin:auto;
    margin-bottom:20px;
  }

  .form-group textarea{
    background: #131B2C;
    color:rgb(255, 255, 255);
  }

  .form-content-wrapper{
    width:70%;
    margin:0 auto;
  }

  .form-group label{
    font-size:16px;
  }

  #submit-form-1{
    width:30%;
    margin-top:10px;
    color:white;
  }

  .btn-toolbar{
    width:40%;
    margin:20px 0px;
    color:white;
  }

  .sub-user-list .controls .sort-by{
    width:5%;
  }

  .terms-conditions p{
    margin:30px 0px;
  }
table .webkit-scrollbar-track {
    background:rgba(241, 241, 241, 0);
  }

  

.sub-user-list{
  margin:0 auto;
  overflow:hidden;
  }
  
    .sub-user-table::-webkit-scrollbar {
      width: 10px;
      height: 5px;
    }
    .sub-user-table::-webkit-scrollbar-track {
      background:rgba(241, 241, 241, 0);
    }
    .sub-user-table::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 5px;
    }
    .sub-user-table::-webkit-scrollbar-thumb:hover {
      background: #fff;
    }
  
  
  @media only screen and (max-width: 900px) {

    .form-group-main{width:100%;}
    .form-content-wrapper{width:86%;}
  .search-box input{
     max-width: 61% !important;
  }
  .sub-user-list {
      padding: 15px;
  }
  }

  .table{
    min-width: 100% !important;
    width: 700px !important;
  }
/* Scrollbar container */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

/* Scrollbar track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

/* Hovered scrollbar thumb */
::-webkit-scrollbar-thumb:hover{
  background: #555;
}

  .data-table{
    min-width: 100% !important;
    width: 700px !important;
  }

  #drop-down-adjust{
    width:100%;
  }

  #drop-down-adjust a{
    margin-bottom:0px;
  }

  .admin-dash-content .odds-container{
width:auto;
  }

  .admin-dash-content .table{
    width:auto !important;
overflow-y:auto
  }

  @media (max-width:1024px) {
    .main-table-001{
      overflow: auto;
      white-space: nowrap;
      width: 90%;
    }
.dashboard-main .pages-backend-wrapper{
width:91%;
  }
  .api-key-content .td-style-3 .button-backend-profile{width:100% !important;}}

  @media (max-width:767px) {
    .main-table-001{
      overflow: auto;
      white-space: nowrap;
      width: 90%;
    }
  }

  #d-side-bar.active {
    transform: translateX(0);
  }

  .subs-content-wrapper .sort-by::after {
    color: #fff !important;
    margin-left: 15px !important;
}

.subs-content-wrapper .topbar button {
   
    color: #fff;
}

@media (max-width:767px) {
  .main-table-001{
    overflow: auto;
    white-space: nowrap;
    width: 90%;
  }
}





.content-row{
gap:44px;}


.admin-dash-content.table{padding: 8px 5px;border:none}
    main{background: #1A2436;width:100%;}
			@media (max-width: 1024px) {
            .main{background: #1A2436;width:100%;}
			.top-games{width:90%;padding:0px !important;}
			.live-news{margin-top:0px; width:auto;}
			.right-side{width:103%;}
		    .table{width:auto;}}
@media (max-width: 768px) { main{background: #1A2436;width:100%;}.top-games{width:auto;margin-top: 10px;}}

	@media (max-width: 767px)
  {.graph-info-group
     {.bar-chart {margin: 0px 0px 0px 0px;margin-left: -60px;left: 82px;width: 76%;padding: 28px;}}}
.sidebar .dashboard {
display:flex;
flex-direction:row;
}
@media (max-width: 768px){
.content-row{
flex-direction:column !important;
}
.dashboard-content{
width:auto !important;
}

.dashboard-content .table{
padding:3px 6px;
}

.admin-dash-content
{padding:0px 3px !important;}

.header-002-setting{flex-direction: column-reverse !important;}

.form-wrapper-002{width: 100%; button{width:52%;}}

.form-wrapper-002 button{width:50% !important;}
.header-002-setting h1{
  margin: 33px auto !important;
}

.my-picks{width:auto !important;padding:0px;}

.landing-page-container .get-started{
  width:69% !important;
}

.change-pswrd div input{
  width: 70% !important;
}
}

.admin-dash-content {padding:2px 10px;}

.profile-page-block input{width:100% !important;}

.plan-section form input{display:flex;justify-content:center;margin:auto;}

.my-picks{padding:27px 30px;width:auto;}

.dashboard-content{
  padding:10px 0px;
}


.dashboard-main{overflow:visible;}

.page-featured-image{
  margin: auto;
  display: flex;
  justify-content: center;
  padding: 41px 0px;
}

.form-wrapper-002 .header-002-setting{
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin:none !important;
}

.form-wrapper-002 .header-002-setting a{
  color:white;
  margin:none !important;
}

.form-wrapper-002 button{
  color:white;
  width:auto !important;
  margin:auto !important;
}

.form-wrapper-002{margin:0px auto !important;
padding:20px 0px;}

.form-wrapper-002 .form-group input{
  width: 280px !important;
  height: 200px;
  margin:35px auto!important;
}

.form-wrapper-002 .form-group label{text-align: center;}

.header-002-setting h1{font-size:20px;}

.modal-content{background: #000000 !important;}


.sidebar nav a{color:white;
  display:flex;
  gap:15px;
}


.page-btn{color:#d9d9d9;}

.btn{color:white;}

.change-pswrd input{
  width:88% !important;
}
.change-pswrd button{width:30% !important;}

#status{padding:4px !important;}

  .sidebar .settings-wrapper {
    position: relative;
    display: inline-block;
  }

  .sidebar .settings {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: rgb(255, 255, 255)8e8;
    font-weight: bold;
    cursor: pointer;
  }

  .sidebar .settings-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgb(0, 0, 0);
    color:white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 0;
    min-width: 150px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
  }

  .sidebar .settings-dropdown a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    color: #333;
  }

  .sidebar .settings-dropdown a:hover {
    background-color: #7700ff;
  }

  .sidebar .settings-wrapper:hover .settings-dropdown {
    display: block;
  }




  /* edit page css */

  .admin-form-content-wrapper-0009{
width: 66% !important;
margin: auto !important;
padding: 37px 0px !important;
}

.admin-form-content-wrapper-0009 .admin-panel-0009-button{
    margin:auto;
    margin-top:15px;
}

.admin-form-content-wrapper-0009 .fw-bold{margin-top:15px;}
@media (max-width: 768px) {
.admin-form-content-wrapper-0009{
    width:90% !important;
    margin:auto;
}
}

/* 
#drop-down-adjust a{color:white !important;}

.dropdown-toggle::after{width:0%;color:black;}
.dropdown-menu{background:#0000 !important;color:#333 !important;margin-bottom:10px;} */


.games-today img{display:none;}

.live-news-header a{display:none;}