*,
*:before,
*:after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none !important;
    list-style: none !important;
}
body {
    background: rgb(184,0,10);
background: linear-gradient(180deg, rgba(228,10,22,1) 10%, rgba(59,0,4,1) 68%) !important;
    /* background: linear-gradient(225deg, #FF0101, #010101) !important; */
    font-family: "Roboto Condensed", sans-serif !important;
    font-optical-sizing: auto;
}
.line {
      /* border: 1px solid #17a2b8; */
      box-shadow: rgba(0, 0, 0, 0.1) 0px 0 12px;
      /* box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; */
    padding: 10px;
    background-color:#800000;
    border-radius: 5px;
    margin: 15px;
    font-size: 15px;
}

.jodichartleft a, .panelchartright a {
    width: 10;
    border: 3px solid #fff;
    background: linear-gradient(to left ,#522f92 , #1abc9c);
    color: #000;
    padding: 6px;
    font-size: 15px;
    border-radius: 10px;
    text-align: center;
}

.running p{
        /* color: #17a2b8; */
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 2px;
}

.background {
    width: 430px;
    height: 520px;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

.background .shape {
    height: 200px;
    width: 200px;
    position: absolute;
    border-radius: 50%;
}

/* .shape:first-child {
    background: linear-gradient(#1845ad,
            #23a2f6);
    left: -80px;
    top: -80px;
}

.shape:last-child {
    background: linear-gradient(to right,
            #ff512f,
            #f09819);
    right: -30px;
    bottom: -80px;
} */

.shape:first-child {
    /* background: linear-gradient(cyan,
            #23a2f6); */

    background: linear-gradient(#ff512f,
            #f09819);
    left: -80px;
    top: -80px;
}

.shape:last-child {


    background: linear-gradient(to right, cyan,
            #23a2f6);
    right: -30px;
    bottom: -80px;
}
.btn-outline-info:hover {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}
.form {
    height: 520px;
    width: 400px;
    background-color: rgba(255, 255, 255, 0.13);
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
    padding: 50px 35px;
}

.form * {
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    letter-spacing: 0.5px;
    outline: none;
    border: none;
}

.form h3 {
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    text-align: center;
}

.form label {
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
}

.form input {
    display: block;
    height: 50px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    padding: 0 10px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
}

::placeholder {
    color: #e5e5e5;
}

button {
    margin-top: 50px;
    width: 100%;
    background-color: #ffffff;
    /* color: #080710; */
    color: white;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}

.social {
    margin-top: 30px;
    display: flex;
}

.social div {
    background: red;
    width: 150px;
    border-radius: 3px;
    padding: 5px 10px 10px 5px;
    background-color: rgba(255, 255, 255, 0.27);
    color: #eaf0fb;
    text-align: center;
}

.social div:hover {
    background-color: rgba(255, 255, 255, 0.47);
}

.social .fb {
    margin-left: 25px;
}

.social i {
    margin-right: 4px;
}

.register {
    text-align: center;
    margin-top: 25px;
}

.register1 {
    text-align: center;
    margin-top: 15px;
}

.text-decoration-none {
    text-decoration: none;
}

.forget {
    text-decoration: none;
    margin-top: 15px;
}

.form h5 {
    text-align: center;
    margin-top: 15px;
    font-size: 16px;
}

.otp {

    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;

}

.form button a {
    color: black;
    text-decoration: none;
}

.form button {
    color: black;
    text-decoration: none;
}

.otp1 {
    display: flex;
    justify-content: space-around;
}

.table-header {
    display: flex;
    background-color: #faba12;
}

.table-body {
    display: flex;
}

.btn-group .select {
    position: relative;
}

.select1,
.select2,
.select3 {

    margin: 5px 20px;
    text-align: center;
}

.btn-group .select input:checked+label {
    background-color: #17a2b8;
    padding: 11px 22px;
}

.btn-group .select input:checked+label :hover,
.btn-group .select input:checked+label :focus,
.btn-group .select input:checked+label :active {
    background-color: #17a2b8;
}

.btn-group .select input {
    opacity: 0;
    position: absolute;
}
.btn:focus{
    box-shadow: none !important;
}
.button_select {
    padding: 11px 22px;
    display: flex;
    background-color: transparent;
    font-size: 22px;
    font-weight: 700;
}

.button_select:hover,
.button_select:focus,
.button_select:active {
    background-color: transparent;
}

.select input {
    width: 50px;
    height: 50px;
}


.option {
    position: relative;
}


.btn-group .select input:checked+span {
    background-color: #17a2b8;
}

.btn-group .select input:checked+span:hover,
.btn-group .select input:checked+span:focus,
.btn-group .select input:checked+span:active {
    background-color: #17a2b8;
}


.btn-option {
    margin: 0 10px 10px 0;
    display: flex;
    background-color: transparent;
}

.btn-option:hover,
.btn-option:focus,
.btn-option:active {
    background-color: transparent;
}

.btn-group {
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 768px) {
    .background {
        width: 100%;
        height: 100%;
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        overflow: hidden;
    }

    .form {
        height: 100%;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.13);
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        border-radius: 10px;
        backdrop-filter: inherit !important;
        border: 2px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
        padding: 50px 35px;
    }
}

.menu svg {
    height: 50px;
    width: 31px;
    display: flex;
    color: white;
}

.header {
    background: #e40a16;
}

.col-6 h4 {
    margin-bottom: 0px;
    color: white;
    font-weight: 700;
    font-family: math;
}

.wallet svg {
    width: 25px;
    height: 25px;
    display: flex;
    color: white;
}
.wallet1 svg {
    width: 20px !important;
    height: 20px !important;
    display: flex;
    color: white;
}
.wallet p {
    margin-bottom: 0px;
    color: white;
    font-size: 22px;
    margin-left: 5px;

}

.play button {
    margin-top: 20px;
    width: 33%;
    background-color: #ffd30d;
    color: #080710;
    padding: 11px 0;
    font-size: 18px;
    font-weight: 700;
    border: none !important;
    border-radius: 5px;
    cursor: pointer;
    transform: translate(-50%);
    left: 50%;
    position: relative;
    /* border: 1px solid #17a2b8; */
    margin-bottom: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.headings {
    justify-content: end;
    display: flex;
    font-size: 23px;
    font-weight: 800;
    color: #333;
    position: relative;
    left: -5px;
    margin-bottom: 5px;
}

.play1 {
    width: 45%;
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 14px;
    border: 2px solid orange;
    margin-top: 20px;
    font-size: 17px;
    margin-bottom: 20px;
    font-weight: 700;
}

.justify-content-space-around {
    justify-content: space-around;
}

.headings1 {
    justify-content: center;
    display: flex;
    font-size: 23px;
    font-weight: 800;
    color: #333;
    position: relative;
    left: 0px;
    margin-bottom: 5px;
}

.headings12 {
    justify-content: center;
    display: flex;
    font-size: 21px;
    font-weight: 700;
    color: #333;
    position: relative;
    left: 0px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.tabs ul {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #ccc;
    font-size: 0;
}

.tabs ul.indicator {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 20px;
    background: orange;
    transform: translateZ(0) translateX(0);
    transition: all 0.3s ease;
}

li {
    display: inline-block;
    font-size: 14px;
    width: 23%;
}

li a {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 20px;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    color: black;
    transition: all 0.3s ease 0.4s;
}

li a:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: orange;
    transform: translateZ(0) translateY(100%);
    transition: all 0.3s ease 0.3s;
    z-index: -1;
}

li a:before[aria-selected] {
    color: white;
}

li a:before {
    transform: translateZ(0) translateY(0);
}


section[aria-hidden="true"] {
    display: none;
}

.tabs ul {

    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    margin: 1rem 0;
    overflow-x: scroll;

}




.play .rc-btn {
    width: 80% !important;
}

.play input,
.play select {
    margin-top: 20px;
    width: 80%;
    color: #080710;
    padding: 11px 1%;
    font-size: 18px;
    font-weight: 700;
    border-radius: 5px;
    transform: translate(-50%);
    left: 50%;
    position: relative;
    border: 1px solid #17a2b8;
    margin-bottom: 10px;
}


.play h2 {
    margin-top: 20px;
    width: 100%;
    color: #080710;
    padding: 11px 1%;
    font-size: 25px;
    font-weight: 700;
    transform: translate(-50%);
    left: 50%;
    position: relative;
    margin-bottom: 10px;
    text-align: center;
}

.play h2 {
    margin-top: 20px;
    width: 100%;
    color: #ffffff;
    padding: 11px 1%;
    font-size: 25px;
    font-weight: 700;
    transform: translate(-50%);
    left: 50%;
    position: relative;
    margin-bottom: 10px;
    text-align: center;
}




.my_order_tab {
    padding: 0px;
    margin-top: 50px
}

.my_order_tab .title {
    padding: 10px;
    background: orange;
    text-align: center;
}

.my_order_tab .title h3 {
    color: #fff;
}


.my_order_h div {
    display: flex;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    position: relative;
    left: 0px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.my_order_row div {
    display: flex;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    left: 0px;
    margin-bottom: 5px;
    margin-top: 5px;
}

.title {
    text-decoration: none !important;
}

/* linear-gradient(180deg, rgb(121 11 11) 0%, rgb(0 0 0) 48%, rgba(0, 19, 49, 1) 93%) */



/* ********************** foter ***********************  */

  /* Style for the footer navigation */
  .footer-navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .footer-navbar ul{
    padding: 0;
    margin: 0;
    border: none !important;
  }
  .footer-app {
      /* background-color:#e40a16; */
      color: #fff;
      text-align: center;
      padding: 0px 7px 0 7px;
      position: fixed;
      bottom: 0;
      width: 100%;
    }

    /* Style for the footer navigation */
    .footer-navbar {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    .footer-navbar li {
      display: inline-block;
      margin-right: 10px;
      border: none !important;
    display: inline-block;
    font-size: 11px;
    width: 16%;
    box-shadow: none !important;
}


    .footer-navbar li a {
        color: #fff;
        text-decoration: none;
        display: block;
        padding: 0px 10px 0px 10px !important;
        text-align: center;
        /* border: 1px solid red; */
        background: #e40a16 !important;
        border: 1px solid #e40a16 !important;
        font-family: Arial, Helvetica, sans-serif;
        letter-spacing: 1px;
        font-weight: 400 !important;
        font-family: "Outfit", sans-serif !important;
    }

    .footer-navbar li a i {
      display: block;
      font-size: 16px; /* Adjust icon size */
      margin-bottom: 5px; /* Space between icon and text */
      border: none !important;
    }
    /* ********************** foter ***********************  */

    /* <style> */
    .gamelist{
     display: flex;
     justify-content: space-between;
     align-items: center;
     /* color: #710a0a; */
     margin-bottom: 10px;
     font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .btn-play i{
        /* padding-right: 5px; */
    }
    .gamelist{
        padding: 4px 10px;
        border-radius: 2px;
        font-family: "Teko", sans-serif;
  font-optical-sizing: auto;
    }
    .gamelist h5{
        margin-top: 0;
        font-weight: 600;
        margin-bottom: 5px;
    }
     .gamelist small{
        font-weight: 900;
        font-size: 17px;
        font-family: "Nanum Pen Script", cursive;
        letter-spacing: 0.2;
     }
     .btn-play i{
        font-size: 14px;
        color: rgb(255, 255, 255);
        /* border: ; */
        /* box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; */
     }
     .name-list{
        text-transform: capitalize;
     }

/* Ensure page header uses white background and plain bold text across listed pages */
.header.back-btn {
    background: #ffffff !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.header.back-btn a.white, .header.back-btn a.white h4 {
    color: #111 !important;
    font-family: 'Outfit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: 800 !important;
    font-style: normal !important;
}

/* Make sure nested h4 doesn't inherit cursive fonts */
.header.back-btn h4 { font-style: normal !important; }

/* Strong global override to ensure header is white and non-cursive on every page */
body .header.back-btn {
    background-color: #ffffff !important;
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
}

/* Force header text to plain bold sans-serif and prevent cursive */
body .header.back-btn h4,
body .header.back-btn a,
body .header.back-btn .white,
body .header.back-btn a.white {
    color: #111 !important;
    font-family: 'Outfit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: 800 !important;
    font-style: normal !important;
    text-transform: none !important;
}

/* Also ensure any icons or small headings inside header use non-cursive */
body .header.back-btn * {
    font-style: normal !important;
}
    .btn-play{
        border: none;
        color: #fff;
        /* border: 2px solid #fff; */
        background-color: #0ea800;
        border-radius: 5px;
        font-size: 18px;
        padding: 2px 15px;
        display: flex;
        gap: 5px;
        align-items: center;
        font-weight: 800;
        letter-spacing: 0.5px;
        /* box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; */
        /* font-style: italic; */
        font-family: "Nanum Pen Script", cursive;
        border: 3px solid #fff;
    }
    .cornblue{
        background-color:  #00f6ff;
        color: #000;
    }
    .yellow{
        background: #faba12;
        color: #000;
    }
    .perano{
        background-color: #00ff43 !important;
        color: #000;
    }
    .waikawa{
        background-color: #ffb27a !important;
        color: #000;
    }
    .purple{
        background-color: #d80ad6;
        color: #000;
    }
/* </style> */

.my-winnig{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.my-winnig h5{
    font-size: 20px;
    font-weight: 500;
    font-family: "Teko", sans-serif;
    
}
.my-winnig p{
    margin-bottom: 0;
    margin-bottom: 0;
    font-family: "Nanum Pen Script", cursive;
    font-size: 23px;
    font-weight: 800 !important;
}
}


/* <style> */
  .table-head{
    display: flex;
    text-align: center;
    justify-content: space-between;
    background-color: #faba12;
    padding: 5px;
  }
  .list-table-numer{
    width: 100%;
    text-align: center;
    /* border: 1px solid #fff; */
  }
  .table-input{
    display: flex;
    justify-content: space-between;
  }
  .table-input input{
    border: 1px solid #faba12;
    width: 100%;
    background: transparent;
    height:34px ;
    outline: none;
  }
  .table-nav {
    background-color: black;
    padding: 10px 0;
}

.table-nav ul {
    padding: 0;
    text-align: center;
    margin: 0;
}

.table-nav ul li {
    text-align: center;
    color: #fff;
    padding: 3px 7px;
    position: relative; /* Ensure relative positioning for absolute positioning of borders */
}

.table-nav ul li.active {
    border-bottom: 2px solid #fff; /* Initial border for active item */
}

.table-nav ul li.active:before {
    content: "";
    position: absolute;
    bottom: -1px; /* Position the pseudo-element just below the li */
    left: 0;
    width: 100%; /* Stretch the pseudo-element across the li */
    border-bottom: 1px solid #fff; /* Create the moving border effect */
}

  .btn-bottom{
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 6px 0;
  }
  .btn-bottom{
    display: flex;
    justify-content:center;
    background-color: #faba12;
    gap: 10px;
  }
  .active-btn{
    background-color: #eee !important;
  }
  .btn-bottom .btn{
    /* border: 1px solid; */
    padding: 5px 20px;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: #000;
  }
  .btn-play2{
    /* border: 2px solid #eee !important; */
  }
  .jodi-cut h5{
     font-weight: 700;
     color: #fff;
  }
  .formx input{
    width: 100%;
    margin-bottom: 10px;
    padding: 5px;
    outline: none;
  }
  .formx input::placeholder{
    color: gray;
  }
  .btn-yellow{
    background-color: #faba12;
    color: #000;
    font-size: 16px;
  }
  
 .table-link {
    text-transform: capitalize;
 }
/* </style> */



.more-cards{
    text-align: center;
    background-color: #faba12;
    border: none;
   /* width: 150px */
    margin-bottom: 20px;
}

.more-cards i{
font-size: 30px;
padding: 10px;
color:#710a0a;
}
.more-cards .card-footer{
    background-color: #020102;
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 600;
    padding: 5px ;
}
.col-padding .col-6{
    
}

.back-btn{
    background-color: #faba12;
    padding: 10px 0;
  
}
.back-btn i{
    font-size: 20px;
}
.back-btn .d-flex{
    gap: 5px;
    /* align-items: center; */
}
.back-btn h4{
    font-family: "Nanum Pen Script", cursive !important;
    font-size: 23px !important;
    color: #000;
    margin-bottom: 0;
    font-weight: 700;
}

    /* Strong global override: ensure header titles are plain, bold, non-cursive */
    html body .header h4,
    html body .back-btn:not(.no-white-header) h4,
    html body .back-btn:not(.no-white-header) a.white h4,
    html body .col-6 h4 {
        font-family: 'Outfit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
        font-weight: 800 !important;
        font-style: normal !important;
        text-transform: none !important;
    }

.header, .header.back-btn, .back-btn:not(.no-white-header) {
    background: #ffffff !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
}
.header a.white, .header a.white h4, .header h4, .back-btn:not(.no-white-header) h4, .back-btn:not(.no-white-header) {
    color: #111 !important;
    font-family: 'Outfit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: 800 !important;
    font-style: normal !important;
    text-transform: none !important;
}
.menu i, .menu svg, .menu .fa {
    background: transparent !important;
    color: #111 !important;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
}
.header .wallet svg, .wallet svg, .wallet1 svg {
    color: #111 !important;
}
.back-btn .d-flex {
    gap: 8px;
    align-items: center;
}
/* Ensure page-specific Nanum Pen Script header rule is overridden */
.back-btn:not(.no-white-header) h4 {
    font-family: 'Outfit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: 800 !important;
}

/* Broad rule: any element using class `back-btn` should look like the white header (unless excluded) */
.back-btn:not(.no-white-header), .back-btn:not(.no-white-header) h4, .back-btn:not(.no-white-header) a, .back-btn:not(.no-white-header) a.white {
    background: #ffffff !important;
    color: #111 !important;
    font-family: 'Outfit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: 800 !important;
    font-style: normal !important;
}

/* Index page specific styles moved to assets/css/index.css (page-only file) */