body {
    background: #f4f5f8;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.p-10 {
    padding: 10px;
}

.p-20 {
    padding: 20px;
}

.font-15 {
    font-size: 1rem;

}


.font-11 {
    font-size: 11px;
}
.font-12 {
    font-size: 12px;
}
.font-16 {
    font-size: 1.2rem;

}

.font-600 {
    font-weight: 600;
}

.font-700 {
    font-weight: 700;
}

.white_bg {
    background: #fff;
    max-width: 500px;
    margin: 0 auto;
}

.dflex {
    display: flex;
}

.gap_5 {
    gap: 5px;
}

.gap_10 {
    gap: 10px;
}

.gap_15 {
    gap: 15px;
}
.gap_25 {
    gap: 40px;
}

img {
    max-width: 100%;
}

.radius_5 {
    border-radius: 5px;
}

.radius_10 {
    border-radius: 10px;
}

.flex-row {
    display: flex;
    justify-content: space-between;
    justify-items: center;

}

.titileblock {
    background: linear-gradient(180deg, rgba(20, 228, 209, .5), hsla(0, 0%, 100%, 0));

}

.priceblock {
    position: relative;
}

.priceblock .rate {
    background: linear-gradient(90deg, #e15600, #bd0000);
    position: absolute;
    color: #fff;
    padding: 4px 8px;
    border-radius: 10px 10px 0px 0;
    font-size: .89rem;
}

.navleft {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
}

.navright {
    align-items: center;
    display: flex;
}

.c_block {
    position: relative;
}

.icon12 {
    width: 24px;
}

.login_btn {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 16px;
    border-radius: 28px;
    background-color: rgb(32, 137, 220);
    border-color: rgb(32, 137, 220);
    border-width: 0px;
    position: relative;
    background-image: linear-gradient(rgb(0, 181, 18), rgb(0, 145, 14));
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
}

.navbtn {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    font-weight: 700;
}

.submenu-panel {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    background-color: #fff;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    transition: left 0.3s ease;
    z-index: 1050;
    padding: 15px;
}

.submenu-panel.active {
    left: auto;
    margin-left: -10px;
}

.submenu-close-btn {
    position: absolute;
    top: 0;
    right: 10px;
    border: none;
    background: transparent;
    font-size: 34px;
    cursor: pointer;
}

.navleftmenu li {
    border-bottom: 1px solid #fff;
    background-color: rgb(246, 247, 251);
    transition-duration: 0s;
    padding: 3px 3px;

}

.navleftmenu a {
    color: #48505D;
    font-weight: 400;
    font-size: 16px;
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-size: 18px;

}

.dropdown-toggle::after {
    float: right;
    margin-top: 7px;
}

.bottom-modal {
    position: fixed;
    bottom: -300px;
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #dee2e6;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
    text-align: center;
    z-index: 1060;
    transition: bottom 0.3s ease;
}

.bottom-modal.active {
    bottom: 0;
}

.footer {
    position: sticky;
    background: white;
    width: 100%;
    bottom: 0;
    right: 0;
}


.right-modal {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    z-index: 1070;
    transition: right 0.3s ease;
    overflow-y: auto;
}

.right-modal.active {
    width: 100%;
    margin: 0 auto;
    max-width: 500px;
    left: 0;
    right: 0;
}


.nav-tabs .nav-link {
    border: none;
    /* width: 50%; */
    text-align: center;
}

.nav-tabs {
    border-bottom: none;
}

/********* Footer*****/
.m_list {
    width: 20%;
    text-align: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: #48505D;
}

.m_list:hover svg {
    fill: #00B512;
}

.m_list img {
    width: 20px;
}

.m_list:hover {
    color: #00B512;
}

.footer-row {
    display: flex;
    align-items: baseline;

}

.lang_popup {
    display: flex;
    align-items: center;
    font-weight: 700;

}

.language_list li {
    list-style: none;
    text-align: left;
    line-height: 45px;
    position: relative;

}

.language_list li:hover {
    background: rgb(244, 245, 248);
}

.language_list li:hover::after {
    content: '✔';
    /* You can also use ✅ or an SVG as background */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: green;
    font-size: 16px;
    transition: opacity 0.3s ease;
}

.language_list li a {
    text-decoration: none;
    color: #48505D;
    font-size: 14px;
    padding: 10px;


}

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

#loginRegisterTab .nav-item {
    width: 50%;
    text-align: center;

}

#loginRegisterTab .nav-item .active {
    width: 100%;
    text-align: center;

    border-bottom: 2px solid rgb(29, 160, 42);
    background: #57C785;
    background: linear-gradient(360deg, rgb(189, 248, 214) 0%, rgba(255, 255, 255, 1) 100%);
}

.just_center {
    justify-content: center;
}

.just_space {
    justify-content: space-between;
}

.align_center {
    align-items: center;
}

.radius_100 {
    border-radius: 100px;
}

.nav-link {
    width: 100%;

    color: #000;
}

.nav-link:hover {

    color: #000 !important;

}
.inpwi3{
			height:30px;
			width:50px;
			border-color:#666666;
				}
.lgmenu .form-control {
    border: none;
}

.lgmenu .form-control:focus {
    box-shadow: none;
    border-color: inherit;
    outline: none;
}

.frmc {
    box-shadow: none;
    border-color: inherit;
    outline: none;
}



.borderbottom {
    border-bottom: 1px solid #ccc;
}

.loginbtn {
    width: 100%;
    background:#009900;
    border-radius: 100px;
    color: #fff;
    padding: 10px;
    text-transform: uppercase;
    border: none;
    font-weight: 600;

}

.loginbtn:focus {
    width: 100%;
    background:#006633;
    border-radius: 100px;
    color: #fff;
    padding: 10px;
    text-transform: uppercase;
    border: none;
    font-weight: 600;

}

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

.loginbtn:hover {
    width: 100%;
    background:#006600;
    border-radius: 100px;
    color: #fff;
    padding: 10px;
    text-transform: uppercase;
    border: none;
    font-weight: 600;
}

.privacy {
    font-weight: 400;
}

::placeholder {
    color: #ddd;
    font-size: 14px;
}

.iconsimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
}

.w-20 {
    width: 25%;
    background: #fff;
    padding: 10px;
    border-radius: 5px 15px 5px 5px;
    border-top: 2px solid #fff;
}

.w-20:hover {
    width: 25%;
    background: #fff;
    padding: 10px;
    border-radius: 5px 15px 5px 5px;
    background: linear-gradient(rgb(211, 255, 218), rgb(255, 255, 255));
    border-top: 2px solid #00B512;
}

.w-50 {
    width: 50%;
    background: #fff;
    padding: 10px;
    border-radius: 5px 15px 5px 5px;
    border-top: 2px solid #fff;
}

.w-50:hover {
    width: 50%;
    background: #fff;
    padding: 10px;
    border-radius: 5px 15px 5px 5px;
    background: linear-gradient(rgb(211, 255, 218), rgb(255, 255, 255));
    border-top: 2px solid #00B512;
}



.bggrey {
    background: #f4f5f8;
}

.makebutton {
    background: rgb(237, 255, 239);
    padding: 2px 8px;
    border-radius: 5px;
    text-align: center;
}

.dicessbg {
    background: rgb(157, 198, 168);
    padding: 5px;
    border-radius: 5px;
}

.bggreen {

    background: linear-gradient(rgb(203, 243, 207), rgb(232, 255, 237));
    padding: 1rem;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.countbox {
    display: flex;
    gap: 2px;
}

.counts {
    background: #000;
    border-radius: 5px;
    color: #fff;
    width: 20px;
    height: 25px;
    text-align: center;
    line-height: 25px;
}

#userTabs .nav-item {
    width: 24.9%;
    background: linear-gradient(rgb(216, 224, 234), rgb(234, 243, 253));
    border-radius: 5px 5px 0 0;
    margin: 0 auto;

}

#userTabs .nav-item .active {
    border: rgba(255, 255, 255, 0.5);
    background: linear-gradient(rgb(0, 181, 18), rgb(0, 181, 18));
    color: #fff;
}

.dies_content {
    background: rgb(190, 202, 210);
    padding: 1rem;
}

.diesbox {

    border-radius: 1rem;
    text-align: center;
    padding: .5rem;
    background: #fff;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    justify-content: center;
    font-size: 12px;
}

.diesbox img {
    width: 50px;
    margin: auto;
}

.tile-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: .5rem;
    background: rgb(190, 202, 210);
    
}
.tilecri{
    background: rgb(190, 202, 210);
    padding: 10px;
    background-image: url(../img/ball-bottom-bg.75ab8e706ec4a7946a67.webp);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;

}

.tile {
    flex: 1 1 calc(25% - 20px);
    /* 4 tiles per row with gap */
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
}

.tile_double {
    flex: 1 1 calc(33% - 20px);
    /* 4 tiles per row with gap */
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
}

@media (max-width: 768px) {
    .tile {
        flex: 1 1 calc(20% - 5px);
        /* 2 tiles per row on smaller screens */
    }

    .tile_double {
        flex: 1 1 calc(30% - 5px);
        /* 2 tiles per row on smaller screens */
    }
}

@media (max-width: 480px) {
    .tile {
        flex: 1 1 calc(20% - 5px);
        /* 1 tile per row on small screens */
    }

}

.balls {
    position: relative;
    height: 55px;
}

.balls img {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;

}

.balls .redclr {
    z-index: 99;
    position: relative;
    font-size: 25px;
    margin-top: 15px;
    color: rgb(206, 0, 6);
    top: 5px;
}

.balls .greenclr {
    z-index: 99;
    position: relative;
    font-size: 25px;
    margin-top: 15px;
    top: 5px;
    color: green;
}

#customTabs .nav-tabs {
    border-bottom: 2px solid #dee2e6;
}

#customTabs .nav-link {
    border: none;
    background: transparent;
    color: #333;
    font-weight: 500;
    width: 100%;
    text-align: center;
    position: relative;
}

#customTabs .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 3px;
    background-color: #0d6efd;
    transition: width 0.3s ease;
}

#customTabs .nav-link.active::after {
    width: 100%;
}

#customTabs .tab-content {
    padding: 20px;
    border: 1px solid #dee2e6;
    border-top: none;
}

#customTabs .nav-item {
    width: 25%;
}


.w-50-p {
    width: 50% !important;
}

.addbtn {
    background: rgb(0, 181, 18);
    color: #fff;
   /* opacity: .2;*/
    font-weight: 600;
    text-transform: uppercase;
}

.addbtn:hover {
    background: rgb(0, 181, 18);
    color: #fff;
    opacity: 10;
}

.win {
    background: linear-gradient(1.5708rad, rgb(201, 113, 255), rgba(255, 153, 96, 0));
    padding: 0 0 0 5px;
    display: flex;
    align-items: center;
    border-radius: 0 0 0 15px;
}

.quickbtn {
    background: #fafafa;
    font-size: 13px;
    font-weight: 600;
    color: #666;

}

.col_sec {
    background: #fff;
    margin: 1rem 0;
   
}

.inpwi {
    width: 55px;
    padding: 0;
    background: #fafafa;
}



.div-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-family: Arial, sans-serif;
}

.div-table-header {
    display: table-row;
    background-color: #f8f9fa;
    font-weight: bold;
}

.div-table-row {
    display: table-row;
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
}

.div-table-cell {
    display: table-cell;
    padding: 7px 7px;
    vertical-align: middle;
    text-align: left;
}

.status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.875rem;
    color: #fff;
}

.status.active {
    background-color: #28a745;
}

.status.inactive {
    background-color: #6c757d;
}

.status.pending {
    background-color: #ffc107;
    color: #000;
}

.div-table-row:nth-child(even) {
    background-color: #f2f2f2;
}

.preview {
    background: linear-gradient(rgb(248, 250, 254), rgb(239, 241, 245));
    padding: 5px;
    border: 5px;

}

.preview img {
    width: 15px;
    transform: rotate(90deg);
}

.nextbtn {
    background: linear-gradient(rgb(248, 250, 254), rgb(239, 241, 245));
    padding: 5px;
    border: 5px;

}

.nextbtn img {
    width: 15px;
    transform: rotate(270deg);
}

.dimondview img {
    width: 30px;
}

.dview img {
    width: 40px;
}

.numberstable {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    padding: 15px;

}

.smnumber {
    background: rgb(246, 247, 251);
    width: 27px;
    font-size: 11px;
    text-align: center;
    line-height: 15px;
    padding: 3px 0;



}

.tred {
    color: brown;
}

.tgreen {
    color: green;
}

.tblue {
    color: blue;
}

.btext {
    color: rgb(141, 151, 171);
}

.boxnumbers {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid rgb(216, 224, 234);
    border-right: 0;

    border-bottom: 0;
}

.boxn {

    font-size: 11px;
    text-align: center;
    line-height: 15px;
    border-right: 1px solid rgb(216, 224, 234);
    border-bottom: 1px solid rgb(216, 224, 234);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    flex: 1 1 calc(40px - 10px);
}

.cir_red {
    background: rgb(207, 44, 44);
    color: #fff;
    width: 25px;
    height: 25px;
    display: inline-block;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cir_green {
    background: rgb(57, 207, 69);
    color: #fff;
    width: 25px;
    height: 25px;
    display: inline-block;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cir_blue {
    background: rgb(41, 39, 156);
    color: #fff;
    width: 25px;
    height: 25px;
    display: inline-block;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#myTab .nav-link {
    background: #f0f0f0;
    border: 2px solid #fff;

}

#myTab .nav-link.active {
    background: #fafafa;
    border-top: 2px solid green !important;
    width: 100%;
}

#myTab .nav-item {
    width: 25%;
    font-weight: 400;
}

.die_status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    gap: 10px;
}

.numbertabs {
    background: rgb(190, 202, 210);
}

.bggrey_dark {
    background: rgb(181, 193, 202);
}

.nspa {
    border: 1px solid #ccc;
    width: 25px;
    display: inline-block;
    border-radius: 100px;
    height: 25px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nsnum {
    display: flex;
    gap: 5px;
}

#forgot .div-table-cell:nth-child(2) {
    width: 50%;
}

.greencircle {
    background: rgb(237, 255, 239);
    padding: 10px;
    border-radius: 10px;
    margin: 0 0 0 25px;
    position: relative;
}

.greentext {
    color: green;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 25px;
    font-size: 20px;
    text-align: center;
    top: 18px;
}

.green_lg {
    border-radius: 10px;
    margin: 0 0 15px 0;
    position: relative;
    width: 16%;
    text-align: center;
}

.green_lg_text {
    color: green;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Make span take full width of parent */
    height: 100%; /* Make span take full height of parent */
    font-size: 20px;
    font-weight: bold; /* Make text bolder */
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}


.redtext {
    color: green;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 25px;
    font-size: 20px;
    text-align: center;
    top: 18px;
}

.red_lg {
    border-radius: 10px;
    margin: 0 0 15px 0;
    position: relative;
    width: 16%;
    text-align: center;
}

.red_lg_text {
    color: rgb(184, 7, 51);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Make span take full width of parent */
    height: 100%; /* Make span take full height of parent */
    font-size: 20px;
    font-weight: bold; /* Make text bolder */
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

.w-50 {
    width: 50%;
    background: #fff;
}

.redcolor {
    background: rgb(184, 7, 51);
    height: 20px;
    width: 20px;
    border-radius: 100px;
}

.greenclr1 {
    background: green;
    height: 20px;
    width: 20px;
    border-radius: 100px;
}

#customTabsContent .div-table-cell:nth-child(2) {
    text-align: center;
    width: 80%;
}
.greencircl{
    background: url(../img/green-lg.webp);
    height: 50px;
    width: 50px;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: green;
}

.redcircl{
    background: url(../img/red_lg.webp);
    height: 50px;
    width: 50px;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: green;
}


.num_green {
    background: orange;
    width: 35px;
    height: 35px;
    color: #fff;
    text-align: center;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.num_blue {
    background: rgb(32, 170, 14);
    width: 35px;
    height: 35px;
    color: #fff;
    text-align: center;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.num_orange {
    background: rgb(218, 76, 11);
    width: 35px;
    height: 35px;
    color: #fff;
    text-align: center;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.numdis {
    padding: 10px 10px;
    gap: 25px;
}

.smgreen {
    background: green;
    width: 30px;
    height: 30px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    color: #fff;
    align-items: center;
}

.smred {
    background: red;
    width: 30px;
    height: 30px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    color: #fff;
    align-items: center;
}

.smblue {
    background: blue;
    width: 30px;
    height: 30px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    color: #fff;
    align-items: center;
}
.bggrey{
    padding:5px;
}
.green{
    color: #00B512;
}

.gbtn {
    background: linear-gradient(rgb(39, 212, 78), rgb(4, 141, 2));
    height: 40px;
    border-radius: 10rem 0 0rem 10rem;
    color: #fff;
    width: 100%;
    border: none;
    font-weight: 600;
    font-size: 18px;
}

.vilotbtn {
    background: linear-gradient(rgb(163, 35, 249), rgb(55, 0, 174));
    height: 40px;
    color: #fff;
    width: 100%;
    border: none;
    font-weight: 600;
    font-size: 18px;
}

.redbtn {
    background: linear-gradient(rgb(245, 7, 39), rgb(178, 0, 22)); /* Reverted to original red gradient */
    height: 40px;
    border-radius: 0 10rem 10rem 0rem;
    color: #fff;
    width: 100%;
    border: none;
    font-weight: 600;
    font-size: 18px;
}

/* Added grey button variants */
.gbtn-grey {
    background: linear-gradient(rgb(210, 210, 210), rgb(136, 136, 136));
    height: 40px;
    border-radius: 10rem 0 0rem 10rem; /* Copied from .gbtn */
    color: #fff;
    width: 100%;
    border: none;
    font-weight: 600;
    font-size: 18px;
}

.vilotbtn-grey {
    background: linear-gradient(rgb(210, 210, 210), rgb(136, 136, 136));
    height: 40px;
    color: #fff;
    width: 100%;
    border: none;
    font-weight: 600;
    font-size: 18px;
}

.redbtn-grey {
    background: linear-gradient(rgb(210, 210, 210), rgb(136, 136, 136));
    height: 40px;
    border-radius: 0 10rem 10rem 0rem; /* Copied from .redbtn */
    color: #fff;
    width: 100%;
    border: none;
    font-weight: 600;
    font-size: 18px;
}

.wd {
    width: 33%;
}

.threebtnbg {
    background: linear-gradient(rgb(196, 207, 202), rgb(206, 220, 214));
}

.mybets {
    background: rgb(202, 214, 209);
    padding: 1rem;
    margin-top: 1px;
}

.fixed-bottom-popup {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    transition: bottom 0.3s ease;
    z-index: 1055;
    padding: 20px;
}

.fixed-bottom-popup.active {
    bottom: 0;
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
}

.btn-primary-1 {
    background: #ccc;
    color: #000;
    padding: 10px 25px;

}

.btn-primary-1:hover {
    background: green;
    color: #fff;

}

.btn-primary-12 {
    background: #ccc;
    color: #000;
    padding: 0px 15px;
	height:30px;

}

.btn-primary-12:hover {
    background: green;
    color: #fff;

}

.w20 {
    width: 40px;
    padding: 0;
    height: 40px;
}

.w50 {
    width: 80px;
    padding: 0;
    height: 40px;
}

.totbtn {
    background: linear-gradient(rgb(39, 212, 78), rgb(4, 141, 2));
    border-radius: 100px;
    color: #fff;
    border: none;
    width: 100%;
}

.greenbtnsm {
    background: rgb(160, 235, 160);
    padding: 5px;
    width: 100%;
}
.bgbed{
    position: relative;
}
.betbgsd{
    position: absolute;
    top: 31px;
    width: 99%;
    margin: 0 auto;
    right: 0;
    left: 0;
}
.betsbld{
    border-radius: 10px;
}
.ballbox{      
    border-radius: 10px;
    padding: 20px;      
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    height: 75px;
    background: linear-gradient(rgb(75, 89, 97), rgb(128, 146, 156));
    position: relative;
    overflow: hidden;
}
.ballbox .bgset{
    position: absolute;
    left: 0;
    bottom: 0;
}

  
                
.dice-box {
    width: 25px;
    height: 25px;
    overflow: hidden;                   
    border-radius: 10px;
    position: relative;
  }

  .dice-2{
    width: 55px;
    height: 55px;
    overflow: hidden;                   
    border-radius: 10px;
    position: relative;
  }

  .dice-strip {
    position: absolute;
    top: 0;
    width: 100%;
    animation: roll 1s ease-in-out; /* Faster speed with reduced duration */
  }

  .dice-strip img {
   
    display: block;
  }

  @keyframes roll {
    0% { top: 0; }
    25% { top: -100px; }
    50% { top: -200px; }
    75% { top: -300px; }
    100% { top: -400px; } /* Roll through all dice faces */
  }
.redbtn2 {
    background: linear-gradient(rgb(245, 7, 39), rgb(178, 0, 22));
    height: 40px;
    color: #fff;
    width: 100%;
    border: none;
    font-weight: 600;
    font-size: 18px;
}
.gbtn2 {
    background: linear-gradient(rgb(39, 212, 78), rgb(4, 141, 2));
    height: 40px;
    color: #fff;
    width: 100%;
    border: none;
    font-weight: 600;
    font-size: 18px;
}

.w-30 {
    width: 25%;
    background: #fff;
    padding: 10px;
    border-radius: 5px 15px 5px 5px;
    background: linear-gradient(rgb(211, 255, 218), rgb(255, 255, 255));
    border-top: 2px solid #00B512;
}
.violetclr {
   background: linear-gradient(rgb(163, 35, 249), rgb(55, 0, 174));
    height: 20px;
    width: 20px;
    border-radius: 100px;
}
.error
{
	color:#FF0000;

}
 .pagination { margin-top: 10px; display: flex; justify-content: center; gap: 10px; }
    .page-btn { cursor: pointer; padding: 5px 10px; background: #eee; border: 1px solid #aaa; }
    .active-page { background: #333; color: white; }
	
	.balls .redclr2 {
    z-index: 99;
    position: relative;
    font-size: 10px;
    margin-top: 15px;
	padding-left:8px;
    color: rgb(206, 0, 6);
    
}

.balls .greenclr2 {
    z-index: 99;
    position: relative;
    font-size: 10px;
    margin-top: 15px;
	padding-left:8px;
    color: green;
}
.w-55 {
    width: 50%;
    background: #fff;
    padding: 10px;
    border-radius: 5px 15px 5px 5px;
    background: linear-gradient(rgb(211, 255, 218), rgb(255, 255, 255));
    border-top: 2px solid #00B512;
}

.inpwi2 {
    width: 100px;
    padding: 0;
    background: #fafafa;
}
 .dig_footer {
                padding: 10px;
                background: #fff;
                position: fixed;
                bottom: 0;
                width: 400px;
                box-shadow: 0px 0 4px 0px #ccc;
            }