@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* @import url('../css/mobile-matrixlive.css'); */

html {
    scroll-behavior: smooth;
    font-family: "Poppins", sans-serif;
}

body,
a,
p {
    font-family: "Poppins", sans-serif;
}

* {
    box-sizing: border-box;
}
*::before {
    box-sizing: border-box;
}
*::after {
    box-sizing: border-box;
}

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

::selection {
    color: #fff;
    background: #40798c;
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #0b0a0a;
    margin: 0;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    line-height: 1.5em;
    /* font-weight: normal; */
}

.section-xs {
    padding: 30px 0;
}
.section-b {
    padding-bottom: 62px !important;
    /* padding-bottom: 75px !important; */
}
.margin-top {
    margin-top: -10px;
}

.text-lightwhite {
    color: #54526a !important;
}

/* Section */
.bg-appImage {
    background-color: #0e0a3b;
    background-image: url(../../assets/images/matrix/bg-blue.png);
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    /* padding-bottom: 100px !important; */
}
.bg-section {
    background-image: url(../../assets/images/matrix/bg.webp);
    background-position: 80% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}
.bg-section::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background-color: #080122;
    opacity: 0.9;
    z-index: -1;
}
/* .bg-section{
    background: #92B4EC;
    min-height: 100vh;
    position: relative;
    z-index: 1;
} */
.bg-section-light {
    background: #d3e1f6;
    min-height: 90vh;
    position: relative;
    z-index: 1;
}
.bg-section-dark {
    background: #92b4ec;
    min-height: 90vh;
    position: relative;
    z-index: 1;
}
.inReview-img {
    padding: 17px 0;
    min-height: 70px;
}
.inReview-img img {
    width: 50%;
}
/* ----------------------------------------------------------
  :: Classy Navbar
  ---------------------------------------------------------- */
header {
    padding: 0;
}
header .navbar.navbar-expand-lg {
    height: 92.66px;
    max-height: 70px;
    transition: 500ms ease;
    padding: 0;
}
.navbar.scrolled {
    background: #2a3548;
    box-shadow: 0 2px 28px 0 #0000003d;
    padding: 0.5rem 0;
}

.navbar-nav .nav-item {
    list-style: none;
    margin-right: 30px;
    position: relative;
    transition: all 0.3s ease-in-out;
    display: inline-block;
    vertical-align: middle;
}

.navbar-nav .nav-item:last-child {
    margin-right: 0;
}
.navbar-nav .nav-item .nav-link {
    color: #fff;
    font-size: 0.9rem;
    display: block;
    line-height: 30px;
    font-weight: 600;
    padding: 5px 0;
    opacity: 1;
    text-transform: capitalize;
    position: relative;
    z-index: 1;
}
.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item .nav-link:active {
    color: #f6ad02;
}
.navbar-nav .nav-item .nav-link:focus-visible {
    box-shadow: none;
}

/* Prevent hover effects on disabled elements */
.navbar-nav .nav-item .nav-link[disabled],
.navbar-nav .nav-item .nav-link[disabled]:hover,
.navbar-nav .nav-item .nav-link[disabled]:active {
    color: inherit !important;
    cursor: not-allowed;
    pointer-events: none;
}
/* .navbar-nav .nav-item .nav-link:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: ".";
    color: transparent;
    background: #e9c46a;
    height: 1px;
    transition: all 0.5s;
} */
.navbar-nav .nav-item .nav-link:hover::before {
    width: 100%;
}
.navbar-nav .dropdown-toggle:after {
    display: none;
}
.navbar-nav .dropdown-menu {
    padding: 0;
}
.navbar-nav .dropdown-menu li {
    border-bottom: 1px solid #3d31c4;
    width: 100%;
}
.navbar-nav .dropdown-menu li .dropdown-item {
    padding: 0.5em 0.5em;
    color: #01222e;
    line-height: 24px;
    text-transform: capitalize;
    transition: all 500ms ease;
    white-space: normal;
}
.navbar-nav .dropdown-menu li .dropdown-item {
    padding: 0.5em 0.5em;
    color: #fff;
    line-height: 24px;
    background-color: #110d40;
    text-transform: capitalize;
    transition: all 500ms ease;
    white-space: normal;
}

.navbar-nav-right {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch !important;
    flex-direction: row !important;
}

.navbar-nav .dropdown-menu li .dropdown-item .active,
.navbar-nav .dropdown-menu li .dropdown-item:hover,
.navbar-nav .dropdown-menu li .dropdown-item:active {
    color: #fff;
    background-color: #3d31c4;
    padding-left: 0.8em;
}

.nav-item.nav-profile .nav-link {
    display: inline-flex;
    align-items: center;
}
.nav-item.nav-profile .nav-link img {
    width: 45px;
    height: 45px;
    border-radius: 25px;
    box-shadow: 0 3px 3px 0 #7a7777;
    object-fit: cover;
    object-position: top center;
    background-color: #110d41;
}
.dropdown-menu {
    border: none;
    box-shadow: 0px 3px 21px 0px #0003;
}
.navbar-nav .dropdown-menu {
    font-size: 0.9rem;
    margin-top: 0;
    position: absolute !important;
    top: 63px;
    cursor: pointer;
    left: auto;
    right: 0;
    max-width: 120px;
    box-shadow: 0px 0px 13px -3px #0000001a;
    border-radius: 4px;
    border: 1px solid #b6b6b61a;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
}
.dropdown-item {
    margin-bottom: 0;
    padding: 0.687rem 1.562rem;
    cursor: pointer;
}
.dropdown-item:active {
    background-color: #01222e0f;
    color: #000;
}

.nav-item.nav-profile .nav-link span {
    margin-left: 10px;
}

.nav-item.nav-profile.dropdown .dropdown-toggle ::after {
    display: none;
}

.count-indicator {
    position: relative;
    padding: 0;
    height: auto;
    max-width: 20px;
}
.count-indicator i {
    font-size: 1.25rem;
    margin-right: 0;
    vertical-align: middle;
}
.count-indicator .count {
    position: absolute;
    left: 36%;
    min-width: 20px;
    min-height: 20px;
    width: auto;
    height: auto;
    border-radius: 25px;
    background: #ffba2e;
    top: 0px;
    border: 1px solid #000;
    overflow: hidden;
    line-height: 1;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    vertical-align: middle;
}
.count-indicator:before,
.nav-profile .nav-link:before {
    display: none;
}

.offcanvas {
    background: transparent linear-gradient(180deg, #92b4ec 0%, #ffffff 100%) 0%
        0% !important;
}
.navbar-toggler,
.navbar-toggler:focus {
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    box-shadow: none;
}
.offcanvas-header .btn-close {
    filter: invert(1);
    opacity: 1;
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 10px;
    display: inline-block;
}
#navbarOffcanvasLg .navbar-nav .nav-item .nav-link {
    line-height: 24px;
    color: #000000;
}

.sub-menu-items {
    padding-left: 1.2rem;
}
.sub-menu-items li a {
    font-weight: normal !important;
    font-size: 0.8rem !important;
    padding: 1px 0 !important;
}
.sub-menu-items li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 47%;
    height: 2px;
    width: 5px;
    background: #58678c;
}
.sub-menu-items li {
    position: relative;
    padding-left: 12px;
}
#navbarOffcanvasLg .navbar-nav .nav-item .nav-link:before {
    display: none;
}

#navbarOffcanvasLg .nav-item.nav-profile {
    background: #a3bfed;
    margin-right: 0;
}
#navbarOffcanvasLg .nav-item.nav-profile .nav-link {
    position: relative;
    left: -40px;
}
#navbarOffcanvasLg .nav-item.nav-profile .nav-link .profile-image-container {
    width: 90px !important;
    height: 90px !important;
    border-radius: 10px;
    border: 2px dashed #f5b700;
    padding: 5px;
}
#navbarOffcanvasLg .nav-item.nav-profile .nav-link img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 5px;
    /* position: absolute; */
    /* left: -42px; */
    /* z-index: 99; */
    /* top: -10px; */

    /* padding: 4px; */
    box-shadow: none;
}
.offcanvas-body {
    overflow: visible;
    height: 100vh;
    padding: 0;
}

#navbarOffcanvasLg .navbar-nav {
    justify-content: start !important;
    padding: 0 !important;
    overflow-y: auto;
    /* height: clamp(380px, 70vh, 100%); */
    height: 82%;
}
#navbarOffcanvasLg .nav-item {
    padding: 0 20px;
}
.details-mobile {
    color: #262f49;
    font-weight: 600;
    font-size: 0.875rem;
}
.footer-m {
    position: absolute;
    bottom: 18px;
}

.graybtn-bg {
    background-color: #ffffff4f;
    border-radius: 4px;
    padding: 5px 0.7rem !important;
}

/* Cards board */
.light-border-bottom {
    border-bottom: 1px solid #ffffff52;
}

.red-color {
    background-color: #ff0000;
}
.green-color {
    background-color: #00ff00;
}
.yellow-color {
    background-color: #ffff00;
}
.light-blue-color {
    background: #3d31c4 !important;
}
.notificationblock.light-blue-color {
    background: #ffe69a !important;
}
.light-blue-color1 {
    background: #241e64 !important;
}
.dark-blue-color {
    background: #110d41 !important;
}
.text-yellow {
    color: #ecb018;
}
.border-color {
    border-color: #1e1f69 !important;
}
.text-dark-blue {
    color: #110d41 !important;
}
/* Change color for checked radio buttons */
.form-check-input {
    background-color: #b3cbf2;
    border-color: #0057e6;
}
.form-check-input:checked {
    background-color: #110d41;
    border-color: #ffffff;
}

.color-indicator {
    height: 17px;
    width: 17px;
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    position: absolute;
    right: -3px;
    top: 0;
}
.totalcardavailable {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.verticle {
    position: absolute;
    right: 13.5px;
    top: 31px;
    height: 70%;
    width: auto;
}
.horizontal {
    position: absolute;
    bottom: 13px;
    left: 6%;
    height: auto;
    width: 70%;
    z-index: 1;
}
.horizontal img,
.verticle img {
    height: 100%;
    width: 100%;
}
.glass-effect {
    position: relative;
    min-height: 100px;
    /* width: 450px; */
    border-radius: 12px;
    /* background: rgba(255, 255, 255, 0.2); */
    background: rgb(36 31 100 / 23%);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    padding: 12px 20px;
}
.ring {
    height: 400px;
    width: 400px;
    border-radius: 50%;
    background: transparent;
    border: 50px solid rgba(255, 255, 255, 0.1);
    bottom: -250px;
    right: -210px;
    box-sizing: border-box;
    position: absolute;
    z-index: -1;
}
.ring::after {
    content: "";
    position: absolute;
    height: 480px;
    width: 480px;
    border-radius: 50%;
    background: transparent;
    border: 30px solid rgba(255, 255, 255, 0.1);
    bottom: -80px;
    right: -90px;
    box-sizing: border-box;
}
/* .horizontal span{
    background: #122b10;
}
.horizontal:before {
    content: '';
    position: absolute;
    background: #fff;
    height: 1px;
    width: 62%;
    left: 40px;
    top: 8px;
    z-index: -1;
} */
.card-baord {
    /* padding: 40px; */
    position: relative;
    z-index: 1;
    padding: clamp(1.7rem, 2vw + 1rem, 1.7rem) 1.7rem 2rem
        clamp(0.6rem, 2vw + 1rem, 1.6rem);
    /* padding: clamp(1.7rem, 2vw + 1rem, 1.7rem) 2rem 2rem clamp(1rem, 2vw + 1rem, 1.7rem); */
}
/* .result-summary.card-baord {
    padding: clamp(1rem, 2vw + 1rem, 1.3rem);
} */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    /* box-shadow: 0 0 6px #ffffff4a; */
    /* border-radius: 52px; */
}
.overlay img {
    height: 100%;
    width: 100%;
}

.border-slicing {
    border-image-slice: 52 fill;
    border-image-width: 40px;
    /* border-image-width: clamp(30px, 7vw, 40px); */
    border-image-outset: 0px;
    border-image-repeat: round;
}

.border-silver {
    border-image-source: url(../images/matrix/border-silver.png);
}

.border-gold {
    border-image-source: url(../images/matrix/border-gold.png);
}

.border-main {
    border-image-source: url(../images/matrix/border-main.png);
}
.cards {
    overflow: hidden;
    background: #fff;
    position: relative;
    border-radius: 4px 4px 0 0;
    /* padding: 5px; */
    padding: 3px 5px 5px 5px;
    line-height: 0;
    box-shadow: 0 -2px 5px 5px #00000029;
    height: 37px;
    cursor: pointer;
}
.card-baord .row:nth-last-child(2) .cards,
.card-baord .row.last-row .cards {
    /* height: calc(15vh - 10px);
    border-radius: 4px; */
    height: 100%;
    border-radius: 4px;
    aspect-ratio: 2.5 / 3.5;
}

.card-baord .row:nth-last-child(2) .cards .card-icons,
.card-baord .row.last-row .cards .card-icons {
    height: 25px;
    width: 25px;
}
.card-baord .row:nth-last-child(2) .cards .card-icons img {
    /* max-width: 40%; */
    margin: 10px 0 0;
}
.card-baord .row:nth-last-child(2) .cards .result-declared .card-icons {
    position: relative;
    bottom: -31px;
}
.card-icons {
    text-align: center;
    padding: 3px 0 0 0;
    /* height: 14px;
    width: 14px; */
    margin: 0 auto;
    width: clamp(12px, 2vw, 13px);
    height: clamp(12px, 2vh, 13px);
}
.card-icons img {
    /* height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center; */
    aspect-ratio: 1 / 1;
}

.cards .card-name span {
    font-size: clamp(0.69rem, 2vw, 0.785rem);
    font-weight: 600;
    line-height: 12px;
    color: initial;
}

.cards.selected-card .card-name span {
    color: #ffffff;
}

/* Row Sum */
.row-col-sum {
    /* font-size: .75rem; */
    font-size: clamp(0.58rem, 1vw, 0.75rem);
    font-weight: 600;
    background: #241f64;
    color: #fff;
    border: 1px solid #3d31c4;
    text-align: center;
    border-radius: 4px;
    padding: 12px 3px;
    position: relative;
    line-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.rowsum:before {
    content: "";
    position: absolute;
    left: -28px;
    /* top: 13px; */
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    width: 30px;
    background: transparent;
    z-index: -1;
    border-bottom: 2px solid white;
}
/* Col Sum */

.colsum:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -20px;
    height: 20px;
    width: 2px;
    background: transparent;
    z-index: -1;
    border-left: 2px solid #fff;
}

@keyframes blink {
    0%,
    100% {
        background: linear-gradient(to top, #28bc36, #0c5e14);
    }
    50% {
        background: linear-gradient(to top, #0c5e14, #28bc36);
    }
}

.btn-custom {
    background: linear-gradient(to top, #28bc36, #0c5e14);
    border: 1px solid #28bc36;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 0.7rem;
    white-space: nowrap;
    /* animation: blink 1s linear infinite; */
}
.btn-custom:hover {
    background: linear-gradient(to bottom, #28bc36, #0c5e14);
    color: #fff !important;
}
.btn-custom-green {
    background: linear-gradient(to bottom, #28bc36, #0c5e14) !important;
    border: 1px solid #28bc36 !important;
    color: #fff !important;
    text-transform: capitalize;
    font-size: clamp(0.67rem, 1vw, 0.75rem);
    font-weight: 600;
    white-space: nowrap;
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
}

.btn-golive {
    border: 1px solid #a90101;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 0.7rem;
    white-space: nowrap;
    background: #a90101;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 120px;
    margin: 0 auto;
}
.btn-golive:hover,
.btn-golive:active,
.btn-golive:focus {
    background: #a90101 !important;
    color: #fff !important;
    border: 1px solid #a90101 !important;
}
/* top-section */
.top-section {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}
.flex-1 {
    flex: 1;
}

.section-title h1 {
    font-size: 1.2rem;
    /* color: #fff; */
    color: #1c1850;
    font-weight: 600;
    text-align: center;
}
.game-title {
    position: absolute;
    left: 45px;
    top: 3px;
    z-index: 2;
    background: #0d021dd6;
    padding: 2px 5px;
    border-radius: 5px;
    border: 1px solid #ffc107;
}
.game-title h1,
.right-float h2 {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}

.subsection-title h1 {
    color: #000;
    background-color: #92b4ec;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 0;
}
.subsection-titles h1 {
    /* font-size: 1.2rem; */
    font-size: clamp(0.785rem, 1vw, 1.1rem);
    color: #373394;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(to bottom, #bad2fd, #87b1f7);
    border-radius: 4px;
    padding: 0.5rem;
    display: inline-block;
    border: 2px solid #fff;
}

.color-indicators li {
    display: inline-block;
    color: #fff;
    margin-right: 5px;
    position: relative;
    padding-left: 13px;
    font-size: 0.75rem;
    cursor: pointer;
}
.color-indicators li:before {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    left: 0;
    top: 3px;
}
.color-indicators li:first-child:before {
    background: #00ff00;
}
.color-indicators li:nth-child(2):before {
    background: #ffff00;
}
.color-indicators li:last-child:before {
    background: #ff0000;
}

.ftButtons {
    background: #110d41;
    padding: 10px;
}

.live-section {
    display: inline-flex;
    color: #07b819;
    align-items: center;
    justify-content: start;
    font-weight: 600;
}
.live-watch-count {
    font-size: 0.75rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.review-section {
    color: #ffea00;
}
.margin-top-refresh {
    margin-top: -35px;
    position: relative;
}
.refresh-btn {
    line-height: 22px;
    min-height: 70px;
}
/* .refresh-btn:hover {
    background: #0057e6;
    color: #fff;
    border: 1px solid #0057e6;
} */
.refresh_btn_bg {
    background: #0057e6;
    color: #fff;
    border: 1px solid #0057e6;
}

.rotate {
    animation: rotate_icon 0.9s ease-out;
}

@keyframes rotate_icon {
    0% {
        transform: rotate(0);
        opacity: 0;
    }
    100% {
        transform: rotate(360deg);
        opacity: 1;
    }
}

.header-section {
    /*  position: sticky;
    top: 0;
    left: 0;
    z-index: 2;
    background: #000;*/
    background: #2a3548;
}
.reloadtimer {
    display: flex;
    justify-content: center;
    align-items: center;
}
.reloadtimer span {
    font-size: 0.75rem;
    color: #fff;
    margin-right: 10px;
}
.progress-circle {
    width: 50px;
    height: 50px;
    background: conic-gradient(#ffc839 0deg, #ffc839 0deg, #ddd 0deg);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.progress-circle::before {
    content: "";
    width: 36px;
    height: 36px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
}
#timer {
    position: absolute;
    font-size: 0.751rem;
    font-weight: 600;
    color: #333;
}

footer {
    padding: 30px 0 20px;
    /* background: #16122d; */
    background: #2a3548 0% 0% no-repeat padding-box;
    font-size: 0.9rem;
    font-weight: 300;
    color: #fff;
}

.upsports-anchor {
    text-decoration: none;
    color: #fff;
}
.upsports-anchor:hover {
    color: #ffc839;
}

/* Help & Support */
.msger-chat {
    flex: 1;
    overflow-y: auto;
}
.overflow-yscroll {
    height: 420px;
}
.msger-chat::-webkit-scrollbar {
    width: 6px;
}
.msger-chat::-webkit-scrollbar-track {
    background: #ddd;
}
.msger-chat::-webkit-scrollbar-thumb {
    background: #bdbdbd;
}
.msg {
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
}
.msg:last-of-type {
    margin: 0;
}

.msg-img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 50%;
    padding: 2px;
    position: relative;
    overflow: hidden;
}
.msg-img::before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(../images/matrix/circle.webp);
    position: absolute;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-size: 100%;
}
.msg-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}
.msg-bubble {
    width: 64%;
    padding: 5px 10px;
    border-radius: 15px;
    background: #fff;
    position: relative;
}
.left-msg .msg-bubble:before {
    content: "";
    height: 30px;
    width: 30px;
    position: absolute;
    left: -13px;
    bottom: 0;
    background: url(../images/matrix/chatbox-l.png) left center / contain
        no-repeat;
    z-index: -1;
}
.right-msg .msg-bubble:before {
    content: "";
    height: 30px;
    width: 30px;
    position: absolute;
    right: -13px;
    bottom: 0px;
    background: url(../images/matrix/chatbox-r.png) right center / contain
        no-repeat;
    z-index: -1;
}
.msg-info-name {
    font-size: 0.85em;
}
.msg-info-time {
    font-size: 0.7em;
    text-align: end;
}
.msg-text {
    font-size: 0.9em;
    font-weight: 600;
}
.left-msg .msg-bubble {
    border-bottom-left-radius: 0;
}

.right-msg {
    flex-direction: row-reverse;
}
.right-msg .msg-bubble {
    background: #ffe69a;
    color: #000;
    border-bottom-right-radius: 0;
}
.right-msg .msg-img {
    margin: 0 0 0 10px;
}
.show-transactions {
    padding: 5px 10px;
    border-radius: 10px;
    background: #fff;
}
.show-transactions p {
    margin: 0;
    color: #000;
}
.game-info-name {
    display: flex;
    align-items: center;
    font-size: 0.8em;
    justify-content: space-between;
    font-weight: 600;
}
.show-transactions span {
    margin: 0;
    color: #000;
    font-size: 0.7em;
}

.help-support-chat .btn-effect-white {
    box-shadow: none;
}
.help-support-chat .btn-effect-white.active {
    background: #ffe69a !important;
    border: 1px solid #70707085;
    color: #000;
}

/* New Code */
/* .boardsection {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
} */

/* .boardsection.active {
    display: block;
    opacity: 1;
} */

/* Home Page MobileView Only */
.game-services {
    color: #373394;
    /* background: #252067; */
    background: radial-gradient(#ffffff 10%, #9cbef2);
    overflow: hidden;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 1px 3px 7px 0px #00000040;
}
.border-normal {
    color: #fff;
    padding: 5px;
    background: #252067;
    border-radius: 20px;
}
.border-curve {
    padding: 5px;
    border-radius: 10px;
}

.font-p {
    font-size: clamp(0.65rem, 1vw, 0.785rem);
    margin: 0;
}
.games-images {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.img-height {
    height: 140px;
}
.img-height-tournament {
    height: 90px;
}
.img-viewbox img {
    object-view-box: inset(11% 0 28% 0);
}
.games-images > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.games-images:before,
.curve-imgoverlay:before {
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    background-image: url(../images/matrix/shadow-image.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
}
.tempContainer {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0px !important;
}
.club-flame-welcomeBg {
    width: 100%;
    height: 100%;
    min-height: 90vh;
    background-image: url(../images/matrix/welcome-background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
    display: flex;
    justify-content: center;
    align-items: center;
}
.image-parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
.winningImg {
    width: 85% !important;
    height: 60% !important;
}
.welcome-bonus-container {
    position: relative;
    top: clamp(-25px, -16px + 1vw, -22px);
    text-align: center;
}
.home-section {
    min-height: 100vh;
}

.home-fullscreen {
    min-height: 100vh;
}

#pastTournamentSwiper .swiper-button-next,
#pastTournamentSwiper .swiper-button-prev {
    background: #fff;
    color: #000;
    height: 30px;
    width: 30px;
    border-radius: 50%;
}
#pastTournamentSwiper .swiper-button-next:after,
#pastTournamentSwiper .swiper-button-prev:after {
    font-size: 12px;
    font-weight: 700;
}
#pastTournamentSwiper .swiper-button-prev,
#pastTournamentSwiper .swiper-rtl .swiper-button-next {
    left: auto;
    right: 50px;
}
#pastTournamentSwiper .swiper-wrapper {
    padding-top: 40px;
}
#pastTournamentSwiper .swiper-button-next,
#pastTournamentSwiper .swiper-button-prev {
    top: var(--swiper-navigation-top-offset, 10%);
}
#pastTournamentSwiper.swiper {
    margin-top: -40px;
}
/* fullScreenMode */
.new-card-game .cards.cardsHeight,
.new-card-game.card-baord .row:nth-last-child(2) .cards.cardsHeight,
.new-card-game .card-baord .row.last-row .cards.cardsHeight {
    aspect-ratio: 2.8 / 3.5;
}
@media screen and (max-width: 992px) and (min-width: 320px) {
    .bazi-logo img{
        width: 130px;
    }
    .footervisible {
        display: none;
    }
    .btn-start {
        position: fixed !important;
        left: 0;
        bottom: 0 !important;
    }
    .new-card-game .cards.cardsHeight,
    .new-card-game.card-baord .row:nth-last-child(2) .cards.cardsHeight,
    .new-card-game .card-baord .row.last-row .cards.cardsHeight {
        aspect-ratio: 2.5 / 3.5;
    }
    .new-card-game .cards.cardsHeight .wrap {
        display: flex;
    }
    #snapSection .new-card-game .cards.cardsHeight .wrap {
        display: block;
    }
}
@media screen and (max-width: 768px) {
    #pastTournamentSwiper .swiper-button-next,
    #pastTournamentSwiper .swiper-button-prev {
        top: var(--swiper-navigation-top-offset, 14%);
    }
    .footervisible {
        display: none;
    }
    .gamedetails-section.section-xs {
        padding-top: 0;
    }
    .margin-top-refresh {
        margin-top: -40px;
    }
    .home-section {
        min-height: 100vh;
    }
    .welcome-bonus-container {
        top: clamp(-20px, -16px + 1vw, -14px);
    }
    .club-flame-welcomeBg {
        min-height: 90vh;
    }

    .winningImg {
        margin-top: -100px;
        width: 88% !important;
        height: 33% !important;
    }
}
.shadow-images::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    box-shadow: inset 0 4px 9px rgb(0 0 0 / 30%);
}
.past-tournaments {
    color: #fff;
    padding: 5px;
    background: #252067;
    border-radius: 20px;
}

/* New Past Game */
.past-game {
    color: #000;
    background: radial-gradient(#ffffff 10%, #9cbef2);
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    height: clamp(150px, calc(50vh - 10rem), 280px);
    /* height: 180px; */
}
.games-declared {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    background: rgb(255, 255, 255);
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(156, 190, 242, 1) 100%
    );
    padding: 2px;
}
.past-game > img {
    /* object-view-box: inset(17% 0 1% 0); */
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 50% 80%;
}
/* Games Page */
.shadow-blue {
    box-shadow: 0px 3px 0px 0px #241c86;
}
.games-list {
    /* background: radial-gradient(#d1b1d6, #a970b1); */
    /* background: transparent radial-gradient(closest-side at 50% 50%, #D3B2D8 0%, #A970B1 100%) 0% 0% no-repeat padding-box; */
    border: 1px solid #ffba2e;
    border-radius: 5px;
    background: url("../images/matrix/games-bg.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.games-list > a {
    /* padding: 10px; */
    display: flex;
    flex-direction: column;
}
.games-img-banner {
    border: 1px solid #b29146;
    border-bottom: 4px solid #b29146;
    border-radius: 5px;
}
.games-info {
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    position: relative;
    display: flex;
    height: 50px;
    min-width: 90px;
    align-items: center;
}
.games-info img {
    position: absolute;
    left: -5px;
    top: 5px;
    height: 40px;
    width: 40px;
}
.games-info span {
    background: transparent linear-gradient(180deg, #0057e6 0%, #002c73 100%);
    box-shadow: inset 0px 3px 6px #0000003d;
    border: 1px solid #ffba2d;
    border-left: none;
    padding: 0.2rem 0.5rem 0.2rem 1.5rem;
    border-radius: 4px;
    /* font-size: clamp(0.7rem, 1vw, 0.875rem); */
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.fs-m {
    font-size: clamp(0.7rem, 1vw, 0.85rem);
}
.gradient-color {
    /* background: transparent radial-gradient(closest-side at 50% 50%, #D3B2D8 0%, #a970b1 100%) 0% 0% no-repeat padding-box;
     */
    background: linear-gradient(to top, #00000014, transparent);
}
.text-blue {
    color: #241c86;
}
/* Game Details Page */
.padding-tb {
    padding: 0 10px 15px;
}
.bg-skydark {
    background-color: #759ee0;
    padding: 0 10px 0 0;
}
.games-Page .btn-custom-green {
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
}
.common-game-banner {
    position: relative;
    /* height: clamp(250px, 35vh, 200px); */
    height: clamp(120px, 13vw, 200px);
}
.common-game-banner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    /* background: #0000003d; */
    background: linear-gradient(to top, #00000094, transparent);
}
.common-game-banner > img {
    height: 100%;
    width: 100%;
    object-position: center;
    object-fit: cover;
    object-view-box: inset(2% 0 0% 0);
    /* object-position: center;
    object-fit: contain;
    object-view-box: inset(25% 22% 30% 22%); */
}
.game-content {
    /* background: url("../images/matrix/game-details-bg.png"); */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 5px;
}
.overlay-content {
    position: absolute;
    width: 100%;
    top: auto;
    height: auto;
    bottom: 0;
    padding: 10px;
}
.overlay-content-top {
    position: absolute;
    top: 0;
    right: 0;
    height: auto;
    bottom: auto;
    padding: 5px;
}
.how-to-play-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(0.68rem, 1vw, 0.75rem);
    font-weight: 600;
    background: #186920;
    color: #fff !important;
    border: 2px solid #186920 !important;
    text-align: center;
    border-radius: 4px;
    padding: 0.2rem 0.3rem;
}

.rank-crown {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-img-overlay-bottom {
    top: auto;
    bottom: 9px;
}
/* .game-details-table tbody tr:first-child td .card-img-overlay-bottom {
    top: auto;
    bottom: 16px;
} */
.game-details-table tbody td .card-img-overlay-bottom {
    line-height: 1;
    height: 100%;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rank-crown img {
    width: 30px;
}

.tbl-width {
    width: 88%;
    margin: 0 auto;
}

.game-details-table thead tr th {
    background: transparent;
    border: none;
    vertical-align: top;
    text-align: center;
    color: #000;
    font-size: clamp(0.6rem, 1vw, 0.9rem);
    font-weight: 600;
    padding: 0.2rem 0.2rem;
}
.game-details-table tbody tr td {
    background: #f0f1f4;
    border: none;
    vertical-align: middle;
    text-align: center;
    color: #000;
    font-size: clamp(0.7rem, 1vw, 0.9rem);
    font-weight: 600;
    padding: 0.3rem 0.2rem;
}
.game-details-table thead tr {
    background: #ffd24c;
    border-top: 2px solid #ffd24c;
}
.game-details-table tbody tr {
    border-top: 1px solid #dbdbdb;
}
.game-details-table tbody tr td .winx {
    /* height: 30px; */
    max-width: 30px;
}
.game-details-table tbody tr td .winx img {
    height: 100%;
    width: 100%;
}
.prize-top-div {
    background: url(../images/matrix/prize-top-m.png);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 2px 5px;
    font-size: clamp(0.8rem, 1vw, 0.9rem);
    font-weight: 600;
    position: relative;
    top: 2px;
    min-height: clamp(23px, 3vw, 38px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress {
    position: relative;
    /* background-color: #110d40; */
    background-color: #164906;
    height: 35px;
    border-radius: 5px;
    overflow: hidden;
    border: 2px solid #164906;
    width: 120px;
}

.neon-progress-bar {
    background: linear-gradient(to bottom, #31bb06, #196908);
}

.progress-bar {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.progress-text {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: clamp(0.785rem, 2vw, 0.85rem);
    color: #fff;
    left: 0;
    top: 0;
    height: 100%;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 6px 10px;
}
.progress-text img {
    filter: brightness(37);
}
.progress-bar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 12px;
    width: 100%;
    background: url("../images/matrix/fillbar-line.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.btn-start {
    background: #186920 !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 1.5rem;
    height: 50px;
    position: sticky;
    right: 0;
    bottom: 50px;
    background: #92b4ec;
    padding: 5px 10px 10px;
    width: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin: 20px 0 0;
}
/* Desktop Home Page */
.button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    gap: 12px;
    margin-top: 4px;
}
.game-btn {
    border: 3px solid #ffffff29;
    padding: 2px;
    transition: 0.6s;
    border-radius: 5px;
    height: 100%;
    width: 100%;
    /* max-width: 190px; */
    cursor: pointer;
    background: #ffffff21;
    backdrop-filter: blur(60px);
    /* margin: 0 0 10px; */
}
.game-btn.active {
    border: 3px solid #ffca10;
    background: #ffca10;
}

.game-btn:before {
    content: "";
    position: absolute;
    right: -30px;
    top: 0px;
    width: 30px;
    height: 30px;
    border-left: solid 18px #ffca10;
    border-bottom: solid 18px transparent;
    border-top: solid 18px transparent;
    z-index: -1;
    opacity: 0;
    transition: 0.6s;
}
.game-btn.active:before {
    opacity: 1;
}
.game-btn .bannerbox {
    /* height: 130px; */
    height: clamp(130px, calc(40vh - 11rem), 180px);
    width: 100%;
    overflow: hidden;
    /* padding: 10px; */
    transition: 0.6s;
    border-radius: 3px;
    position: relative;
}
.game-btn .bannerbox > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.overlay-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: auto;
    width: 100%;
    padding: 0.2rem;
    background: linear-gradient(to top, #000, #0000000d);
    font-size: 0.65rem;
    color: #fff;
    font-weight: 600;
    border-radius: 3px;
}

.bannerbox .card-img-overlay p {
    /* background: linear-gradient(to top, #0000002b, #000000cf); */
    font-size: 0.65rem;
    color: #fff;
    text-align: end;
    padding: 0.2rem;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* .overlay-bottom div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
} */
.max-widthIcon {
    max-width: 20px;
}

.obj-viewbox {
    object-view-box: inset(20% 0% 28% 0);
}
.game-btn.active .bannerbox {
    padding: 0;
}

.main-div .boardsection {
    padding: 10px 20px;
    border-radius: 5px;
    /* min-height: 100vh; */
}

.tournament-closed-msg {
    background: #2d164f;
    padding: 20px;
    border-radius: 5px;
    min-height: 100vh;
}
.matrix-hotline-bg {
    background: #2d164f;
}
.matrix-moon-bg {
    background: #0b0b40;
}
.matrix-sun-bg {
    background: #080108;
}
.matrix-oneline-bg {
    background: #1a0a4f;
}

.sticky {
    position: sticky;
    top: 8%;
}

/* Similar to app screen */
.btn-prize {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    background: #241f64 !important;
    color: #fff !important;
    border: 2px solid #3d31c4 !important;
    text-align: center;
    border-radius: 10px;
    /* padding: 12px 3px; */
    padding: 0.5rem;
    position: relative;
    line-height: 1;
}
/* .btn-prize i{
    margin-right: 3px;
} */
.btn-prize:hover,
.btn-prize:active {
    background: linear-gradient(to bottom, #e4aa17, #bf450f) !important;
    color: #fff !important;
    border: 2px solid #e4aa17 !important;
}
.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    color: #fff;
}
.form-control,
.form-control:focus {
    box-shadow: none;
    background-color: #b3cbf2;
    color: #000000;
    border: 2px solid #0057e6;
}
.form-control:disabled {
    background-color: #110d41;
    opacity: 1;
    border: 2px solid #241f64;
}
.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
}
.form-floating > label {
    background: transparent !important;
}
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: rgb(255 255 255 / 65%) !important;
}
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
    background-color: transparent !important;
}
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: rgb(0 0 0 / 65%) !important;
}
.btn:focus {
    outline: none;
    box-shadow: none;
    text-decoration: none;
}
.btn-effect-primary {
    background: linear-gradient(to bottom, #e4aa17, #bf450f);
    color: #fff;
    border: 1px solid #dc9515;
    padding: 0.5em 0.75em;
    position: relative;
    border-radius: 4px;
    /* z-index: 1; */
    overflow: hidden;
    min-width: 120px;
    text-transform: capitalize;
    font-size: 0.9rem;
}
.btn-11 {
    border: none;
    background: linear-gradient(to bottom, #e4aa17, #bf450f);
    color: #fff;
    overflow: hidden;
    position: relative;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 0.7rem;
}
.btn-11:hover {
    text-decoration: none;
    color: #fff;
}
.btn-11:before {
    position: absolute;
    content: "";
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1 3s ease-in-out infinite;
}

.btn-11:active {
    box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.3),
        -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
        inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2),
        inset 4px 4px 6px 0 rgba(0, 0, 0, 0.2);
}

@keyframes shiny-btn1 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0;
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}

.btn-effect-primary-animation {
    /* background: linear-gradient(to top, #28bc36, #0c5e14); */
    border: 1px solid #dc9515;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 0.7rem;
    white-space: nowrap;
    animation: blink_1 1s linear infinite;
}

@keyframes blink_1 {
    0%,
    100% {
        background: linear-gradient(to bottom, #e4aa17, #bf450f);
    }
    50% {
        background: linear-gradient(to top, #bf450f, #e4aa17);
    }
}

.btn-width-auto {
    min-width: 100%;
}
.btn-filterIcon {
    background: transparent;
    border: none;
    padding: 0.2em;
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.back-btn {
    background: transparent;
    border: none;
    padding: 0.2em;
    position: relative;
    color: #000;
    z-index: 1;
    overflow: hidden;
    text-transform: capitalize;
    font-size: 0.9rem;
    white-space: nowrap;
    text-align: center;
    font-weight: 600;
    /*  display: flex;
    align-items: center;
    justify-content: center; */
}
.back-btn img {
    height: 26px;
    width: 26px;
}
.btn-effect-yellow {
    background: #ffd24c !important;
    border: none;
    padding: 0.2em 0.5em;
    position: relative;
    color: #000;
    z-index: 1;
    overflow: hidden;
    text-transform: capitalize;
    font-size: 0.9rem;
    white-space: nowrap;
    text-align: center;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-effect-white {
    background: #ffffff !important;
    box-shadow: 0px 3px 9px #0000002e;
    border: 1px solid #70707085;
    padding: 0.2em;
    position: relative;
    border-radius: 7px;
    color: #000;
    z-index: 1;
    overflow: hidden;
    min-width: 180px;
    text-transform: capitalize;
    font-size: 0.9rem;
    white-space: nowrap;
    text-align: center;
    font-weight: 600;
}
.btn-effect-success {
    background: #186920;
    color: #fff;
    border: 1px solid #186920;
    padding: 0.5em 0.75em;
    position: relative;
    border-radius: 4px;
    z-index: 1;
    overflow: hidden;
    /* min-width: 120px; */
    text-transform: capitalize;
    font-size: 0.9rem;
    white-space: nowrap;
}
.btn-effect-success:disabled {
    background: #232033;
    color: #fff;
    border: 1px solid #232033;
}
.btn-effect-info {
    background: #0d7fd2;
    color: #fff;
    border: 1px solid #0d7fd2;
    padding: 0.5em 0.75em;
    position: relative;
    border-radius: 4px;
    z-index: 1;
    overflow: hidden;
    min-width: 120px;
    text-transform: capitalize;
    font-size: 0.9rem;
}
.btn-effect-success:hover,
.btn-effect-success:focus {
    background: #186920 !important;
    color: #fff !important;
    border: 1px solid #186920;
}
.btn-effect-info:hover,
.btn-effect-info:focus {
    background: #0d7fd2 !important;
    color: #fff !important;
    border: 1px solid #0d7fd2;
}
.btn-effect-primary:hover {
    background: linear-gradient(to top, #e4aa17, #bf450f);
    color: #fff;
    border: 1px solid #dc9515;
}
.btn-effect-secondary {
    background: #b3cbf2;
    color: #000000;
    border: 1px solid #0057e6;
    text-align: center;
    border-radius: 4px;
    padding: 0.5em 0.75em;
    position: relative;
    border-radius: 3px;
    z-index: 1;
    overflow: hidden;
    min-width: 120px;
    text-transform: capitalize;
    font-size: 0.9rem;
}
.btn-effect-secondary:hover,
.btn-effect-secondary:active,
.btn-effect-secondary:focus {
    background: #0057e6;
    color: #fff;
}

.btn-effect-danger {
    background: #dc3545;
    color: #fff;
    border: 1px solid #dc3545;
    padding: 0.5em 0.75em;
    position: relative;
    border-radius: 4px;
    z-index: 1;
    overflow: hidden;
    min-width: 120px;
    text-transform: capitalize;
    font-size: 0.9rem;
}
.btn-effect-danger:hover,
.btn-effect-danger:active,
.btn-effect-danger:focus {
    background: #6f0404 !important;
    color: #fff !important;
    border: 1px solid #6f0404;
}

.form-control::placeholder {
    color: #000000b8;
}

/* Input Field */
.input-container {
    position: relative;
}

/* .input-container .form-control::placeholder {
    color: #000000b8;
} */
.input-container label {
    position: absolute;
    top: -12px;
    left: 10px;
    transition: all 0.2s ease;
    padding: 0 5px;
    pointer-events: none;
    font-size: 0.875rem;
    background: linear-gradient(to top, #b3cbf2, #92b4ec);
    color: #000000;
}
.input-container input:focus + label,
.input-container input:not(:placeholder-shown) + label {
    top: -12px;
    left: 10px;
}
.input-container .form-control,
.input-container .form-control:focus {
    background-color: #b3cbf2;
    color: #000000;
    border: 2px solid #0057e6;
    box-shadow: none;
    height: 48px;
    font-size: 0.9rem;
}
.input-container input:disabled + label {
    color: #6c757d;
    cursor: not-allowed;
}

.input-container .form-control:disabled {
    border: 2px solid #1d1a38;
}
/* Style for reset button */

.totalamt-wrap {
    /* display: flex;
    align-items: center;
    justify-content: space-between; */
    position: relative;
}

.totalamt-wrap button {
    border: none;
    padding: 7px 10px;
    font-size: 0.9em;
    color: #fff;
    background: #7c79a2;
    /* background-color: #7a4eba; */
    border-radius: 5px;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.19);
    /* position: absolute; */
    left: 5px;
    line-height: 0;
    top: 5px;
}
.form-input {
    padding: 0.375rem 0.75rem 0.375rem 3rem;
}

.reset_clicked {
    background: #6f34c5 !important;
}
.bule-theme-block {
    background: #241f64;
    color: #fff;
    border: 2px solid #3d31c4;
}
.ht {
    height: 38px;
    border-radius: 4px;
    width: 100%;
    text-align: end;
    padding: 0.2rem;
}

/* Arrow */
.direction {
    height: 30px;
    width: 30px;
    position: absolute;
    z-index: 2;
    cursor: pointer;
}

.direction img {
    width: clamp(18px, 2vw, 23px);
    height: clamp(18px, 2vw, 23px);
}
/* Position arrows */
.boardactive {
    position: relative;
    /* overflow: hidden; */
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 10px 6px;
}
.up {
    /* top: 0; */
    top: -6px;
    left: 48%;
    transform: rotate(0deg);
}

.down {
    bottom: -10px;
    left: 48%;
}

.left {
    top: 47%;
    /* top: 42%; */
    /* left: 0px; */
    left: -8px;
    transform: rotate(270deg);
}

.right {
    top: 50%;
    /* top: 43%; */
    /* right: 0; */
    right: -8px;
    transform: rotate(90deg);
}

#snapTimeStamp {
    text-align: end;
    white-space: nowrap;
    font-size: 0.875rem;
}
/*
.screenshotDiv {
    display: none;
    width: 100%;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.5s, opacity 0.5s;
}
.screenshotDiv.visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
} */
.main-game-board {
    position: relative;
    display: block;
}

.card-name {
    display: flex;
    flex-direction: column;
}

.selected-prize .wrap,
.purchase-card .wrap,
.result-declared .wrap {
    display: flex;
    justify-content: space-between;
    align-items: start;
}
/* Slection of cards */
.selected-card {
    background: #0fafff;
}
.selected-card:active,
.selected-card:focus {
    background: #0fafff;
}

.selected-card span {
    color: #fff;
}
.selected-prize .card-icons {
    text-align: left;
    margin: 0;
}
.selected-card .color-indicator {
    z-index: -1;
}
.white-icon {
    display: none;
}

.selected-card .color-icon {
    display: none;
}

.selected-card .white-icon {
    display: block;
}
.selected-amount {
    text-align: center;
    /*  width: 40px;
    height: 40px; */
    width: 29px;
    height: 29px;
    display: none;
}
.result-declared .selected-amount {
    width: 40px;
    height: 40px;
}
.show-selected-amount {
    display: block;
}
.add-to-cart-card {
    background: #5045c8; /* Change to your desired color */
}
.add-to-cart-card:active,
.add-to-cart:focus {
    background: #5045c8;
}

.coinchip {
    background: url(../images/matrix/coinchip.webp);
    border-radius: 25px;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin: -2px 2px 0 0;
}
.wincrown {
    background-image: url(../images/matrix/crown.png);
    background-size: 99%;
    background-position: 50% 0;
    background-repeat: no-repeat;
}
.card-baord .row:nth-last-child(2) .result-declared .wrap,
.card-baord .row:nth-last-child(2) .selected-prize .wrap,
.card-baord .row:nth-last-child(2) .chipset-lastcard .wrap,
.card-baord .row.last-row .result-declared .wrap {
    display: block;
}
/* .card-baord .row:nth-last-child(2) .result-declared .show-selected-amount, .chipset-lastcard .show-selected-amount {
    display: block;
    margin: -26px auto;
} */
.card-baord .row:nth-last-child(2) .result-declared .card-icons,
.card-baord .row:nth-last-child(2) .selected-prize .card-icons,
.card-baord .row:nth-last-child(2) .chipset-lastcard .card-icons,
.card-baord .row.last-row .result-declared .card-icons {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100% !important;
}

.card-baord .row:nth-last-child(2) .result-declared .card-icons img,
.card-baord .row:nth-last-child(2) .selected-prize .card-icons img,
.card-baord .row:nth-last-child(2) .chipset-lastcard .card-icons img,
.card-baord .row.last-row .result-declared .card-icons img {
    margin: 0 auto;
    height: 18px;
    width: 18px;
    padding: 0;
}
.card-baord .row:nth-last-child(2) .result-declared .show-selected-amount,
.card-baord .row:nth-last-child(2) .selected-prize .show-selected-amount,
.card-baord .row:nth-last-child(2) .chipset-lastcard .show-selected-amount,
.card-baord .row.last-row .result-declared .show-selected-amount {
    display: block;
    margin: -7px auto;
}
.card-baord .row:nth-last-child(2) .chipset-lastcard .coinchip {
    margin: 0 auto;
}
.selected-amount span {
    font-size: 0.65rem;
    font-weight: 600;
    color: #fff;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.purchase-card .selected-amount {
    display: block;
}
.result-declared .selected-amount span {
    color: #000;
}

/* Summary */
.table-custom,
.table-1 {
    vertical-align: middle;
}
.table-custom tbody tr td,
.table-custom tfoot tr td,
.table-1 tbody tr td,
.table-1 tfoot tr td {
    background: transparent;
    color: #000;
    font-size: 1rem;
    border: none;
}
.table-custom tbody tr td:last-child,
.table-custom tfoot tr td:last-child,
.table-1 tbody tr td:last-child,
.table-1 tfoot tr td:last-child {
    text-align: right;
}
.table-custom tfoot tr {
    border-top: 2px dashed #3d31c4;
}
.table-1 tfoot tr {
    border-top: 2px solid #3d31c4;
}
.boder-tbl {
    border: 2px solid #3d31c4;
}
.table-body tr td {
    width: 100%;
}
.table-1 {
    border-radius: 6px;
}
.btn-remove-circle {
    border: 2px solid #ffff !important;
    border-radius: 50%;
    color: #fff !important;
    background: #241e64 !important;
}

table.table-custom .table-body td:last-child .totalbetbox {
    color: #000;
    padding: 6px 6px;
    background-color: #b3cbf2;
    border: 1px solid #0057e6;
    text-align: center;
    position: relative;
    border-radius: 3px;
    text-transform: capitalize;
    width: 80px;
    margin: 0 0 0 auto;
}
.table-custom tbody tr:last-child {
    border-bottom: 1px solid transparent;
}
table .table-body {
    display: block;
    max-height: 300px;
    overflow-y: auto;
}

table .table-body::-webkit-scrollbar {
    width: 5px; /* Width of the scrollbar */
}

table .table-body::-webkit-scrollbar-track {
    background: #d3d3d3; /* Color of the track (background of scrollbar) */
    border-radius: 10px;
}

table .table-body::-webkit-scrollbar-thumb {
    background: #0057e6; /* Color of the scroll thumb (draggable part) */
    border-radius: 5px;
}

table .table-body::-webkit-scrollbar-thumb:hover {
    background: #0057e6; /* Color of the scroll thumb on hover */
}

.table-body-scroll thead,
.table-body-scroll tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.table-body-scroll tbody {
    display: block;
    max-height: 200px; /* Adjust the height as needed */
    overflow-y: auto;
}

.table-body-scroll th,
.table-body-scroll td {
    width: 33.33%; /* Ensure th and td take equal width */
}

.table-body-scroll th {
    background-color: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 2;
}

.table-body-scroll tbody::-webkit-scrollbar {
    width: 5px; /* Width of the scrollbar */
}

.table-body-scroll tbody::-webkit-scrollbar-track {
    background: #ffffff; /* Color of the track (background of scrollbar) */
    border-radius: 10px;
}

.table-body-scroll tbody::-webkit-scrollbar-thumb {
    background: #3d31c4; /* Color of the scroll thumb (draggable part) */
    border-radius: 5px;
}

.table-body-scroll tbody::-webkit-scrollbar-thumb:hover {
    background: #3d31c4;
}

/* Success / Error Modal */
.modal-content {
    /* background: #241f6480;
    color: #fff;
    border: 2px solid #3d31c4; */
    background: #b3cbf2b0;
    color: #000000;
    border: 2px solid #0057e6;
    backdrop-filter: blur(32px);
}

.modal-content h3 {
    font-size: 1.5rem;
    color: #fff;
}
/* .modal-content p {
    color: #fff;
} */
.close {
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 0;
    top: 0;
    /*  background: #3d31c4;
    border: 1px solid #3d31c4; */
    background: #0057e6;
    border: 1px solid #0057e6;
    padding: 5px;
    line-height: 0;
    height: 25px;
    width: 25px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 0 4px;
    z-index: 1;
}

.image-block {
    height: 80px;
    width: 80px;
    margin: -85px auto 10px;
}

/* Result Declared */
#resultPopup .modal-body {
    padding: 0;
}
#resultPopup .modal-body .serviceBlock {
    padding: 30px 20px;
}
.winning-cards {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}
.winning-card-bg {
    padding: 0 0 5px;
    background: #dcdee3;
    border-radius: 4px;
}
.winning-cards a {
    text-decoration: underline;
    color: #fff;
}
.winning-cards span {
    color: #fff;
    font-size: 0.875rem;
    text-transform: lowercase;
    font-weight: 600;
}
.winning-cards img {
    border: 1px solid #787b82;
    border-radius: 3px;
}
/* .mySwiper .swiper-wrapper {
    padding-bottom: 20px;
} */
.mySwiper
    .swiper-wrapper
    .swiper-scrollbar.swiper-scrollbar-horizontal::-webkit-scrollbar {
    width: 5px; /* Width of the scrollbar */
}

.mySwiper
    .swiper-wrapper
    .swiper-scrollbar.swiper-scrollbar-horizontal::-webkit-scrollbar-track {
    background: #ffffff; /* Color of the track (background of scrollbar) */
    border-radius: 10px;
}

.mySwiper
    .swiper-wrapper
    .swiper-scrollbar.swiper-scrollbar-horizontal::-webkit-scrollbar-thumb {
    background: #3d31c4; /* Color of the scroll thumb (draggable part) */
    border-radius: 5px;
}

.mySwiper
    .swiper-wrapper
    .swiper-scrollbar.swiper-scrollbar-horizontal::-webkit-scrollbar-thumb:hover {
    background: #3d31c4; /* Color of the scroll thumb on hover */
}
.mySwiper .swiper-wrapper {
    justify-content: start;
}
/* winningCardsSwiper */
/* .winningCardsSwiper .swiper-wrapper {
    padding-bottom: 20px;
} */
.winningCardsSwiper
    .swiper-wrapper
    .swiper-scrollbar.swiper-scrollbar-horizontal::-webkit-scrollbar {
    width: 5px;
}

.winningCardsSwiper
    .swiper-wrapper
    .swiper-scrollbar.swiper-scrollbar-horizontal::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: 10px;
}

.winningCardsSwiper
    .swiper-wrapper
    .swiper-scrollbar.swiper-scrollbar-horizontal::-webkit-scrollbar-thumb {
    background: #3d31c4;
    border-radius: 5px;
}

.winningCardsSwiper
    .swiper-wrapper
    .swiper-scrollbar.swiper-scrollbar-horizontal::-webkit-scrollbar-thumb:hover {
    background: #3d31c4; /* Color of the scroll thumb on hover */
}

/* #resultPopup .swiper-scrollbar.swiper-scrollbar-horizontal {
    visibility: hidden;
} */
.swiper-scrollbar-drag {
    background: #3d31c4 !important;
}
.swiper-scrollbar.swiper-scrollbar-horizontal {
    background: rgb(113 107 186) !important;
    opacity: 1 !important;
}
/* Login/Registration */
.text-a {
    text-decoration: none;
    color: #f6ad02;
}
.text-a:hover {
    text-decoration: underline;
    color: #f6ad02;
}
.serviceBlock {
    background: #110d41;
    padding: 30px 20px;
    /* border: 2px solid #f6ad02; */
    border-radius: 5px;
}
.modal .modal-body .serviceBlock {
    background: #92b4ec;
}
.serviceBlock-new {
    padding: 30px 0px;
}
.title-lg {
    color: #1c1850;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
}
h3.title-md {
    color: #1c1850;
    font-size: 1rem !important;
    text-transform: uppercase;
    font-weight: 300;
}
/* .form-floating>label{
    color: #fff;
}
.form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label, .form-floating>.form-control:focus~label {
    color: #888;
}
.form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after, .form-floating>.form-control:focus~label::after {
    background-color: transparent!important;
} */
label {
    /* color: #fff; */
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.otp-container {
    display: flex;
    gap: 10px;
    justify-content: start;
    align-items: center;
}

.otp-input {
    /* width: 40px; */
    height: 40px;
    /* text-align: center; */
    font-size: 20px;
    background: #241f64;
    color: #fff;
    border: 2px solid #3d31c4;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.3s;
    padding: 0 0 0 10px;
}

.otp-input:focus {
    border-color: #007bff;
}

/* Edit Profile */
.avatar-upload {
    position: relative;
}
.profile_pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.file-upload {
    display: none;
}

.circle {
    border-radius: 50%;
    overflow: hidden;
    width: 128px;
    height: 128px;
    border: 2px dashed #0057e6;
    /* position: absolute; */
    /* top: 0; */
    position: relative;
    padding: 5px;
    margin: 0 auto;
}

.p-image {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #ffffff;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: #92b4ec;
    width: 100%;
    text-align: center;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-image:hover {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.upload-button {
    font-size: 1.2em;
    color: #000;
}

.upload-button:hover {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: #999;
}

/* AddCash */
.button--effect-4.button-bgcolor {
    border: 1px solid #110d41 !important;
    background: #241e64 !important;
}
.addcash-section .bg-blue-color {
    background: #ffffff !important;
}
.addcash-section .boder-tbl {
    border: 2px solid #0057e6;
}
.addcash-section .table-1 tfoot tr {
    border-top: 2px solid #0057e6;
}
.addcash-section .table-1 tbody tr td,
.addcash-section .table-1 tfoot tr td {
    color: #000000;
}
.addcash-section .btn-remove-circle {
    border: 2px solid #ffd24c !important;
    border-radius: 5px;
    color: #000000 !important;
    background: #ffd24c !important;
    font-size: 0.76rem;
    padding: 1px 5px;
    font-weight: 600;
}
/* Leaderboard */

.modal-bg-none {
    background: transparent;
    border: none;
}
.text-tl {
    color: #ffc107;
    text-transform: uppercase;
    font-size: 1.5rem;
}
.fs-lg {
    font-size: 1.5rem;
    font-weight: 600;
}

.filteredData {
    background-color: #b3cbf2;
    color: #000000;
    border: 1px solid #c9ddff;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    margin-right: 10px;
}

.filteredData .btn-remove-circle {
    background: #ffd24c !important;
    color: #000000 !important;
    border: 1px solid #ffe9a9 !important;
    font-size: 0.75rem;
    padding: 0;
    line-height: 0;
    width: 22px;
    height: 22px;
}
.mainfilterDiv {
    background: #b3cbf2;
    border: 2px solid #0057e6;
    border-radius: 8px;
    overflow: hidden;
    color: #000000;
}
.mainfilterDiv label {
    color: #000;
}
.mainfilterDiv .nav-link {
    position: relative;
    color: #fff;
    background-color: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    border: 0;
    border-bottom: 2px solid transparent;
    border-top: 2px solid transparent;
    border-radius: 0;
}
.mainfilterDiv .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: #241e64;
    border: 0;
    border-bottom: 2px solid #3e36a6;
    border-top: 2px solid #3e36a6;
    border-radius: 0;
}
.mainfilterDiv .tab-content > .active {
    display: block;
    height: 100%;
    border-left: 2px solid #3e36a6;
    border-bottom: 2px solid #3e36a6;
    padding: 1rem;
}

.mainfilterDiv .nav-pills .nav-item:first-child .nav-link.active {
    border-top: 2px solid transparent;
}
.mainfilterDiv .tab-content {
    height: 100%;
    display: block;
    background: #241e64;
}
.mainfilterDiv .nav-pills .nav-link.active:before {
    content: "";
    height: 100%;
    width: 10px;
    background: #241e64;
    right: -2px;
    top: 0px;
    position: absolute;
    border-left: 2px solid #241e64;
}
.bg-blue-color {
    background: #241e64;
}
.yellow-circle {
    height: 30px;
    width: 30px;
    background: #ffbb2c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #110d40;
}
.service-content {
    background: #110d40;
    border: 2px solid #3d31c4;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: start;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.service-content:hover {
    background: #186920;
    border: 2px solid #186920;
}

.service-content.active {
    background: #186920;
    border: 2px solid #186920;
}

.filterDiv .form-check-input {
    border-color: #3d31c4;
}
.servicebox-effect-1 {
    border: 2px solid #2d2929;
    padding: 20px;
    transition: 0.3s linear;
}
.safe-card-icon {
    font-size: 3rem;
    color: #f6ad02;
}
.servicebox-effect-1 .text-content {
    font-size: 0.9rem;
    color: #fff;
}
.servicebox-effect-1:hover {
    background: #1e1e1e;
}

.unit {
    display: flex;
    flex: 0 1 100%;
    background: #241e64;
    border: 1px solid #241e64;
}
.unit .unit-left,
.unit .unit-right {
    flex: 0 0 auto;
    max-width: 100%;
}
.unit .unit-left .icon,
.unit .unit-right .icon {
    position: relative;
    display: inline-block;
    font-weight: 400;
    font-style: normal;
    padding: 10px;
    border-radius: 5px;
}
.unit .unit-left.icons-circle,
.unit .unit-right .icons-circle {
    height: auto;
    width: 150px;
    overflow: hidden;
}

.unit .icons-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.unit .unit-body {
    flex: 0 1 auto;
    color: #fff;
    padding: 10px 10px 10px 20px;
}
.unit .unit-body a {
    text-decoration: none;
    color: inherit;
}
.unit .unit-body a:hover {
    color: #fff;
}
.declared-check-icon {
    color: #fdba30;
}

.servicebox-list {
    border: 1px solid #2b2b2b21;
    /* background: #1a145a; */
    background: #f2f3f6;
    text-decoration: none;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.servicebox-1 li a {
    border: 1px solid #2b2b2b21;
    background: #241e64;
    text-decoration: none;
    padding: 0.5rem;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.recent-img {
    width: 30%;
    position: relative;
    overflow: hidden;
}
.recent-img img {
    height: 100%;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
}
.tag {
    position: absolute;
    left: -76px;
    top: 16px;
    height: auto;
    width: 200px;
    color: #fff;
    transform: rotate(-45deg);
    text-align: center;
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 600;
}
.tag.green-color {
    background-color: #08ae1b;
}
.tag.red-color {
    background-color: #d1001b;
}
.recent-details .btn-effect-success {
    padding: 0.5em;
    font-size: 0.75rem;
}
.recent-details h6 {
    line-height: 1.1;
    margin-bottom: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}
.recent-details h6 img {
    margin-right: 3px;
}
.recent-details p {
    font-size: 0.8rem;
}
.awaiting-spin {
    color: #feba2e;
    font-size: 0.875rem;
    font-weight: 400;
}
.spin {
    animation: spin-pause 1s linear infinite;
}
@keyframes spin-pause {
    0% {
        transform: rotate(0deg);
    }
    80% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.shape-block {
    padding: 30px;
    color: #fff;
    position: relative;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.overshape {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}
.overshape img {
    height: 100%;
    width: 100%;
}

/* Modal popup */
/* The Modal (background) */
#mediaModal .modal-content {
    background-color: #9abaee;
}
.modal .youtube-video-modal {
    display: none;
    z-index: 1024;
}

/* Modal Content */
.youtube-video-modal .modal-content {
    background-color: #ffffff73;
    margin: auto;
    border: 1px solid #a9a9a9;
    width: 100%;
    max-width: 700px;
    backdrop-filter: blur(32px);
}
.youtube-video-modal .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(
        0,
        0,
        0,
        0.5
    ); /* Semi-transparent black background */
    z-index: -1; /* Ensure backdrop is behind modal content */
}

/* The Close Button */
.youtube-video-modal .close {
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: -10px;
    top: -10px;
    background: #fbb627;
    padding: 5px;
    line-height: 0;
    height: 25px;
    width: 25px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    z-index: 1;
}

.youtube-video-modal .close:hover,
.youtube-video-modal .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Notification */
.notificationblock {
    /* color: #fff;
    background-color: #241e64; */
    color: #121212;
    background-color: #b3cbf2;
    padding: 10px;
    border-radius: 4px;
    font-size: 1rem;
}
.psmall {
    color: #b8b8b8 !important;
    font-size: 0.875rem !important;
    margin: 0;
}

/* Transaction */

.filter-div {
    display: flex;
    overflow-x: scroll;
    white-space: nowrap;
    position: relative;
    border-bottom: 1px solid #2e2e2e;
    padding: 1rem 0;
}

.btn-filter {
    background: #2e2e2e;
    color: #fff;
    border: 1px solid #2e2e2e;
    padding: 0.5em 0.75em;
    position: relative;
    border-radius: 4px;
    z-index: 1;
    margin-right: 10px;
    display: inline-block;
    text-transform: capitalize;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}
.btn-filter.active,
.btn-filter:hover {
    background: #186920 !important;
    color: #fff;
    border: 1px solid #186920 !important;
}
.data-item {
    display: none;
    color: #fff;
}
.stsmall {
    font-size: 0.75rem;
}
.filter-div::-webkit-scrollbar {
    height: 0.4em;
}
.filter-div::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
.filter-div .cover-bar {
    position: absolute;
    background: transparent;
    height: 100%;
    top: 0;
    right: 0;
    width: 0.4em;
    transition: all 0.5s;
    opacity: 1;
}
.filter-div:hover .cover-bar {
    opacity: 0;
    transition: all 0.5s;
}

.transaction-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    background: #090126bd;
    color: #fff;
    border-bottom: 1px solid #ffffff4a;
    padding: 20px 0;
}
.fa-inr {
    font-size: 0.9em;
    padding-right: 1px;
}
.tbl-transaction tr {
    background: #090126bd;
}

.tbl-list tbody td {
    background: transparent !important;
    /* color: #fff; */
    color: #000;
    /* border-bottom: 1px solid #ffffff4a; */
    font-size: 0.875rem;
    vertical-align: middle;
}
.tbl-list tbody tr {
    border-bottom: 1px solid #2a354833;
}
.tbl-list thead th:last-child,
.tbl-list tbody td:last-child {
    text-align: end;
}
.tbl-transaction td {
    background: transparent !important;
    color: #fff;
    border-bottom: 1px solid #ffffff4a;
    padding: 20px 0;
}
.tbl-showdata tbody tr {
    border-top: 2px dashed #2b2d95;
    border-bottom: 2px dashed #2b2d95;
}
.tbl-showdata tbody tr td {
    background: transparent !important;
    color: #fff;
    font-size: 0.875rem;
    border: 0;
    vertical-align: middle;
}
.tbl-showdata tr td:first-child {
    width: 46%;
}
.headtop {
    /* background: #16174b; */
    padding: 20px;
    border-radius: 4px;
    background-color: #b3cbf2;
    color: #000000;
    border: 1px solid #0057e6;
    box-shadow: none;
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
}
.modal .modal-body .headtop .text-white {
    color: #000 !important;
}
.modal .modal-body .headtop {
    background: #92b4ec;
}
.modal .modal-body .tbl-showdata tbody tr td {
    color: #000000;
}
.winimag {
    background-image: url(../../assets/images/matrix/bg1.png);
    background-position: 80% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 30px;
    text-align: center;
    padding: 10px;
}
.text-gradient {
    background: -webkit-linear-gradient(#0057e6, #0057e6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.headtop hr {
    border-color: #fff;
}
.text-warning {
    color: #f1f73b !important;
}

/* Leaderboard inner webpage */
.bg-top {
    background: #241e64;
    border-radius: 4px;
    box-shadow: 0 0 9px 7px #0000001f;
}
.wincard-bg {
    background: #241e64;
    padding: 0.5rem;
    border-radius: 3px;
    min-height: 90px;
}
.hightlight {
    background: #ffe69a;
}
.winprize {
    /*  background: #241E64;
    border: 2px solid #3d31c4; */
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}
.winx {
    position: relative;
    overflow: hidden;
}
.winx span {
    position: absolute;
    top: 1px;
    left: 0;
    color: #241e64;
    font-size: clamp(0.58rem, 1vw, 0.62rem);
    font-weight: 700;
    text-align: center;
    width: 100%;
    height: 100%;
}
.bazi h2 {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}
.bazi span {
    background: #fdba30;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    padding: 3px;
    line-height: 0;
    color: #241e64;
    font-weight: 800;
    margin-right: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.usericon {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    display: inline-block;
    overflow: hidden;
}
.usericon img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Raise Ticket */
.raise-ticket {
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
}
.fileName {
    color: #000;
    font-size: 0.65rem;
}
.attach-file-section {
    position: relative;
}
.attach-file-container img.preview {
    position: relative;
    pointer-events: none;
    height: 30px;
    width: 30px;
    top: auto;
    transform: none;
    margin: 0 4px 0 0;
}
.attach-file-container lable {
    color: #fff;
    font-weight: 600;
}
.attach-file-container input[type="file"] {
    opacity: 0;
    position: absolute;
    left: 0;
}
.attach-file-section img {
    width: 25px;
    filter: invert(1);
}
.previewImage {
    background: #b3cbf2;
    color: #000;
    border: 2px solid #0057e6;
    box-shadow: none;
    display: flex;
    justify-content: start;
    align-items: center;
    visibility: hidden;
    flex-wrap: wrap;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.removed-attach-file {
    cursor: pointer;
    margin-left: 10px;
    filter: invert(1);
    position: absolute;
    right: 8px;
}

.chipset-lastcard .wrap {
    display: block;
}

/* .chipset-lastcard .card-icons {
    position: relative;
    top: 50%;
    transform: translateY(20px);
    height: 20px !important;
    width: 20px !important;
} */
/* .chipset-lastcard .card-icons {
    position: relative;
    top: 50%;
    transform: translateY(35px);
    height: 20px !important;
    width: 20px !important;
}
.chipset-lastcard .coinchip {
    margin: -20px auto;
}
 */

/* Initial hidden state */
.onlylivegame.hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s;
}
.snapSection {
    /* display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    z-index: 1;
    height: 100%;
    width: 100%;
}

/* Swipe in animations */
.swipe-up {
    animation: swipe-up 0.5s forwards;
}
.swipe-down {
    animation: swipe-down 0.5s forwards;
}
.swipe-left {
    animation: swipe-left 0.5s forwards;
}
.swipe-right {
    animation: swipe-right 0.5s forwards;
}

@keyframes swipe-up {
    from {
        transform: translate(-50%, -200%);
    }
    to {
        transform: translate(-50%, -50%);
    }
}

@keyframes swipe-down {
    from {
        transform: translate(-50%, 100%);
    }
    to {
        transform: translate(-50%, -50%);
    }
}

@keyframes swipe-left {
    from {
        transform: translate(-200%, -50%);
    }
    to {
        transform: translate(-50%, -50%);
    }
}

@keyframes swipe-right {
    from {
        transform: translate(100%, -50%);
    }
    to {
        transform: translate(-50%, -50%);
    }
}

.timeLeft {
    border: 2px solid #feba2e;
    padding: 0.2rem;
    background-color: transparent;
    min-width: 70px;
    text-align: center;
    border-radius: 4px;
    line-height: 1;
}
.timeLeft p {
    font-size: 0.65rem;
    margin: 0 0 2px;
}
.timeLeft span {
    font-size: 0.8rem;
    font-weight: 600;
    display: block;
    white-space: nowrap;
}

/* Basic styles for the loader container */
.loader {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    text-align: center;
}
/* Styles for rotating circle image */
/* .loader::before {
    content: '';
    height: 100px;
    width: 100px;
    left: 0;
    top: -25px;
    background: url('../website/images/circle.webp') no-repeat center center;
    background-size: contain;
    position: absolute;
    animation: spin 2s linear infinite;
} */
.loader img {
    position: relative;
    z-index: 1;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Styles for the overlay */
.loaderoverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

/* Spinner Loader */

.loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(17 13 65 / 76%);
    z-index: 10;
    transition: opacity 0.3s ease-in-out;
}

.load-refresh {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(0.7rem, 1vw, 0.9rem);
    font-weight: 600;
}
.load-refresh p {
    font-size: 0.6rem;
    text-align: center;
    margin: 0;
}

.load-refresh p span {
    font-size: 0.9rem;
    text-align: center;
}

.loader-spin {
    width: 80px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side, #107d32 150%, transparent)
            top/8px 8px no-repeat,
        conic-gradient(transparent 30%, #107d32);
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 8px),
        #000 0
    );
    mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 0);
    animation: spinLoader 5s infinite linear;
}
.loader-overlay img {
    width: clamp(90px, 6vw, 100px);
    animation: spinLoader 5s infinite linear;
}
@keyframes spinLoader {
    100% {
        transform: rotate(1turn);
    }
}

.button--effect-4 {
    border: 1px solid #110d41 !important;
    background: #110d41 !important;
    font-weight: 400;
    font-size: 1rem;
    vertical-align: middle;
    color: #fff !important;
    text-decoration: none;
    transition: all 0.1s linear;
    max-width: 60vw;
    border-radius: 4px;
}
.button--effect-5 {
    border: 1px solid #ffd24c !important;
    background: #ffd24c !important;
    font-weight: 600;
    vertical-align: middle;
    color: #16174b !important;
    text-decoration: none;
    transition: all 0.1s linear;
    max-width: 60vw;
    border-radius: 4px;
    padding: 0.2em;
}
.button--effect-5:hover {
    border: 1px solid #ffd24c;
    background: #ffd24c;
    color: #16174b;
}

/* ResultSummary */
.result-summary .cards/* , .card-baord .row:nth-last-child(2) .cards */ {
    height: 100%;
    border-radius: 4px;
    /* aspect-ratio: 2.5 / 3.5; */
    aspect-ratio: 2.6 / 3.9;
    padding: 3px;
}

.result-summary .totalcardavailable {
    display: none;
}
.result-summary .margin-top {
    margin-top: 0;
    margin-right: 5px;
}
.result-summary .wrap {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: column;
    height: 100%;
}
.revealed-number {
    text-align: center;
    width: 80%;
    margin: -4px auto 2px;
    position: relative;
    top: 0;
    /* height: clamp(25px, 3vh + 1rem, 35px); */
    height: clamp(25px, 3vh + 2rem, 50px);
}

.revealed-number span {
    /*     font-size: 0.65rem;
    font-weight: bold;
    color: #000;
    position: absolute;
    width: 100%;
    bottom: 10px;
    left: 0;
    line-height: 0; */
    font-size: clamp(0.5rem, 1vw, 0.65rem);
    font-weight: bold;
    color: #000;
    position: absolute;
    width: 100%;
    left: 0;
    line-height: 1;
    top: 70%;
    transform: translateY(-70%);
}
.rsltverticle-scroll .selected-amount.coinchip {
    /* margin: 0 auto; */
    margin: 0 auto -1px;
}
.rsltverticle-scroll {
    height: 400px !important;
    /* height: clamp(390px, 70vh + 1rem, 550px) !important; */
    overflow-y: auto;
    overflow-x: hidden;
}
.verticle-scroll.rsltverticle-scroll::-webkit-scrollbar-thumb {
    background: #9c3c3a;
    border-radius: 5px;
}

.verticle-scroll.rsltverticle-scroll::-webkit-scrollbar-track {
    background: rgb(255 255 255 / 41%);
}

.verticle-scroll.rsltverticle-scroll::-webkit-scrollbar-thumb:hover {
    background: #9c3c3a;
}
.result-summary.card-baord .row:nth-last-child(2) .cards .card-icons {
    /* height: 14px !important;
    width: 14px !important; */
    height: clamp(9.5px, 2vw, 12px) !important;
    width: clamp(9.5px, 2vw, 12px) !important;
}
.result-summary.card-baord .row:nth-last-child(2) .cards .card-icons img {
    margin: 0 !important;
}
.bg-brown-color {
    background: #41190d !important;
}
.winningCardsSwiper .swiper-scrollbar-drag {
    background: #9c3c3a !important;
}
.winningCardsSwiper .swiper-scrollbar.swiper-scrollbar-horizontal {
    background: rgb(255 255 255 / 41%) !important;
    opacity: 1 !important;
}

.brown-popup .modal-content {
    border: 2px solid #833f3e;
}

.brown-popup .close {
    background: #ffc107;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 0px;
}
.rsltscard-icons {
    text-align: center;
    height: 27px;
    /* height: 22px; */
    width: 22px;
    margin: 0 auto;
}
.result-declared.rsltscard-icons {
    text-align: center;
    height: 22px;
    width: 22px;
    margin: 0 auto;
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100% !important;
}
.result-declared.rsltscard-icons img {
    height: 20px;
    width: 20px;
}
.timestamp {
    position: relative;
    overflow: hidden;
    left: -3px;
    top: -4px;
    height: 100%;
    width: 120%;
}
.timestamp img {
    width: 100%;
    height: 100%;
}

.timestamp span {
    position: absolute;
    left: 4px;
    top: 0px;
    font-size: clamp(0.6rem, 2vw, 0.75rem);
    /* font-size: .785rem; */
    color: #481a19;
    font-weight: 700;
    line-height: 12px;
    text-transform: uppercase;
    width: 100%;
    height: 100%;
    transform: rotate(-25deg);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timestamp .silverstamp {
    top: 6px;
    left: 0px;
}

/* Silver Screen */
.bg-silver-color {
    background: #2a2a2a;
}
.bg-silver-color .swiper-scrollbar-drag {
    background: #1e1e1e !important;
}
.bg-silver-color .swiper-scrollbar.swiper-scrollbar-horizontal {
    background: rgb(96 96 96) !important;
    opacity: 1 !important;
}

/* bg-silver-gold-blue img */
.bg-tiles-image {
    background-image: url(../../assets/images/matrix/tilesbg.png);
    background-repeat: repeat;
}

/* Coupon */
.couponBox {
    padding: 0.5rem;
    /* border-bottom: 1px solid #3d31c4; */
    border-radius: 5px;
}
.couponBox:nth-child(odd) {
    background: #9dbcee;
}
.verticle-scroll {
    height: 200px;
    overflow-y: auto;
}
.cheight {
    min-height: 400px;
    overflow-y: auto;
}
.verticle-scroll::-webkit-scrollbar {
    width: 5px;
}

.verticle-scroll::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: 10px;
}

.verticle-scroll::-webkit-scrollbar-thumb {
    background: #3d31c4;
    border-radius: 5px;
}

.verticle-scroll::-webkit-scrollbar-thumb:hover {
    background: #3d31c4;
}
/* Transaction */

.filter-div {
    display: flex;
    overflow-x: scroll;
    white-space: nowrap;
    position: relative;
    border-bottom: 1px solid #2e2e2e;
    padding: 0 0 1rem 0;
}
.btn-filter {
    background: #2e2e2e;
    color: #fff;
    border: 1px solid #fdd13e;
    padding: 0.5em 0.75em;
    position: relative;
    border-radius: 4px;
    z-index: 1;
    margin-right: 10px;
    display: inline-block;
    text-transform: capitalize;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}
.btn-filter.active,
.btn-filter:hover {
    background: #186920 !important;
    color: #fff;
    border: 1px solid #fdd13e !important;
}
.data-item {
    display: none;
    color: #fff;
}
.stsmall {
    font-size: 0.75rem;
}
.filter-div::-webkit-scrollbar {
    height: 0.4em;
}
.filter-div::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
.filter-div .cover-bar {
    position: absolute;
    background: transparent;
    height: 100%;
    top: 0;
    right: 0;
    width: 0.4em;
    transition: all 0.5s;
    opacity: 1;
}
.filter-div:hover .cover-bar {
    opacity: 0;
    transition: all 0.5s;
}

.transaction-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    background: transparent;
    color: #000000;
    font-weight: 600;
    padding: 20px 10px;
    border-bottom: none;
}
.transaction-list .psmall {
    color: #000000 !important;
    font-weight: 500;
}
.transcation-section .filter-div {
    border-bottom: none;
}
.transactions-list .transaction-item:nth-child(odd) .transaction-list {
    background: #9dbcee;
}
.fa-inr {
    font-size: 0.9em;
    padding-right: 1px;
}
.tbl-transaction tr {
    background: #090126bd;
}

.tbl-list thead th {
    background: #2a35481c !important;
    color: #000;
    border-bottom: 1px solid transparent;
    font-size: 0.875rem;
}

.tbl-list thead th:last-child,
.tbl-list tbody td:last-child {
    text-align: end;
}
.tbl-transaction td {
    background: transparent !important;
    color: #fff;
    border-bottom: 1px solid #ffffff4a;
    padding: 20px 0;
}

.raise-ticket {
    /* display: none; */
}
.navbar-nav .nav-item .current-menu-item {
    color: #f6ad02;
}
.dropdown-menu .dropdown-item.active {
    color: #f6ad02 !important;
}
.backDetailsBtn {
    width: max-content;
    margin-bottom: 20px;
    background: linear-gradient(to bottom, #e4aa17, #bf450f) !important;
}
.overlay-bottom span.text-center.vsmall-fs {
    text-transform: lowercase;
}

/* New Theme */
.service-block-new {
    background: #fff;
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    overflow: hidden;
}

/* New Demo & MatrixGame Popup */

.popup-container {
    background: #110d41 !important;
    border: 2px solid #f6ad02 !important;
    border-radius: 20px;
    padding: 0;
}
.demoVideoScreen button {
    border: 0;
    background-size: 100% 100%;
    padding: 12px;
    background-color: transparent;
    margin-bottom: 12px;
}
.demoVideoScreen button.btn-right {
    background-image: url(../images/matrix/BTN-Blu.png);
}
.demoVideoScreen button.btn-left {
    background-image: url(../images/matrix/BTN-Org.png);
}
.demoVideoScreen button a {
    color: #fff6e1;
    font-weight: 600;
    font-family: "Ubuntu Sans", sans-serif;
    text-decoration: none;
}
.demoVideoScreen .popup-container p {
    font-size: 19px;
    font-weight: 400;
    line-height: 30px;
    font-family: "Oswald", sans-serif;
}
.demoVideoScreen label {
    font-weight: 400;
    font-size: 0.85rem;
}
.demoVideoScreen p.popup__learn {
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    font-size: 14px;
}
.demoVideoScreen .popup-container p img {
    width: 18px;
}
.popup-content .popup-section {
    position: relative;
    flex: 1;
}

.btn-skip {
    background-color: #000;
    color: #fff;
    font-weight: 600;
    padding: 6px 12px;
    width: auto;
    box-shadow: 0 0 5px #f7b82b;
    font-size: 0.75rem;
    vertical-align: middle;
    text-decoration: none;
    transition: all 0.1s linear;
    max-width: 60vw;
    border-radius: 4px;
}
span.color-span {
    color: #f7b82b;
}
.demoVideoScreen .modal-footer {
    background: url(../images/matrix/footerBg.png) 100%;
    border-radius: 0 0 20px 20px;
    padding: 10px;
    background-position: bottom;
    justify-content: space-around;
    border-top: 1px solid;
    border-image: url(../images/matrix/borderBottom.png) 100%;
    border-image-slice: 1;
}
.popup-content .popup-section:nth-of-type(2):before {
    content: "";
    background: url(../images/matrix/border-left.png) 100% 100% no-repeat;
    background-size: contain;
    position: absolute;
    left: -12px;
    height: 100%;
    width: 10px;
}
.heading {
    font-size: clamp(0.8rem, 2vw, 1.1rem);
    font-weight: 600;
    color: #fff;
}
.popup-content-homepage button a {
    color: #fff6e1;
    font-weight: 600;
    font-family: "Ubuntu Sans", sans-serif;
    text-decoration: none;
    font-size: 0.785rem;
}
.popup-content-homepage button {
    border: 0;
    background-size: 100% 100%;
    padding: 0.2rem 0.7rem 0.3rem;
    background-color: transparent;
    margin-bottom: 12px;
}
.popup-content-homepage p.popup__learn {
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    line-height: 18px;
}

.popup-content-homepage .popup__learn img {
    width: 14px !important;
}
.bg-tiles-image-light {
    background-image: url(../../assets/images/matrix/bg.png);
    background-repeat: repeat;
}
.popup-content-homepage .popup-section:nth-of-type(2):before {
    content: "";
    background: url(../images/matrix/border-left.png) 100% 100% no-repeat;
    background-size: contain;
    position: absolute;
    left: -12px;
    height: 100%;
    width: 10px;
    filter: brightness(3);
}
.popup-content-homepage .popup-section {
    position: relative;
    flex: 1;
    width: 50%;
    text-align: center;
}
.popup-content-homepage {
    padding: 10px;
}
@media screen and (max-width: 600px) {
    #resultPopup #matrixCardBoard {
        padding: clamp(1.7rem, 2vw + 1rem, 1.7rem) 1rem 2rem
            clamp(1rem, 2vw + 1rem, 1rem);
    }
    #resultPopup #matrixCardBoard .timestamp {
        left: -4px;
    }
    .popup-content .popup-section:nth-of-type(2):before {
        left: 0;
        height: 100%;
        width: 100%;
        bottom: 0;
        top: 100%;
        right: 0;
        transform: rotate(270deg);
    }
    .popup-content .popup-section:nth-of-type(1) {
        margin: 24px auto 0;
        z-index: 99;
    }
    .popup-content .popup-section:nth-of-type(2) {
        margin: 0 auto 24px;
    }
    .popup-content {
        flex-direction: column-reverse;
    }
    .game-details-section {
        padding-top: 0 !important;
    }
}
/* Responsive */

@media only screen and (max-width: 320px) {
    /*  .cards .card-name span {

        font-size: .7rem;

    } */

    /* .row-col-sum {

        font-size: .6rem;

    } */

    /* .card-baord {

        padding: 2.5rem 1.5rem !important;

    } */
    .recent-details h6 {
        margin-bottom: 6px;
    }
    /* .chipset-lastcard .card-icons {
        position: relative;
        top: 50%;
        transform: translateY(17px);
        height: 17px !important;
        width: 17px !important;
    } */
    .card-baord .row:nth-last-child(2) .chipset-lastcard .card-icons {
        bottom: 3px;
    }
    .card-baord .row:nth-last-child(2) .chipset-lastcard .card-icons img {
        height: 15px;
        width: 15px;
    }
    #resultPopup .modal-body .serviceBlock {
        padding: 30px 10px;
    }
    /*  .left, .right {
        top: 42%;
    } */
    /*  .down {
        bottom: 110px !important;
    } */

    .game-title {
        left: 10px;
    }
    /* .game-title h1 {
        font-size: 0.65rem;
    } */
    .timestamp span {
        /* font-size: clamp(0.55rem, .65vw, .75rem); */
        line-height: 1;
    }
    .timestamp {
        top: 5px;
        width: 130%;
    }
    .vstack .font-p {
        font-size: clamp(0.6rem, 1vw, 0.785rem);
    }
}

@media screen and (min-width: 320px) {
    /*  .card-baord {
       padding: 2.5rem 1.7rem !important;
    } */
    .game-title {
        left: 27px;
    }

    /*  .down {
        bottom: 110px !important;
    } */
}
@media screen and (max-width: 600px) {
    .inReview-img img {
        width: 60%;
    }
    #profileUpdateBtn {
        width: max-content;
        margin: 0 auto;
    }
    .close {
        right: 8px;
        top: 5px;
        border-radius: 4px;
    }
    /* .timestamp span {
        font-size: clamp(0.5rem, 0.5vw, 0.45rem);
    } */

    .padding-t1 {
        padding-top: 10px !important;
    }
    /* .down {
        bottom: 110px;
    } */
    .vsmall-fs {
        font-size: 0.67rem;
    }
    .notificationblock {
        font-size: 11px;
    }
    .psmall {
        font-size: 11px !important;
    }
    .recent-details p {
        font-size: 0.75rem;
    }
    .tbl-transaction td {
        font-size: 0.875rem;
    }
    .transaction-list {
        font-size: 0.875rem;
    }
    .recent-details h6 {
        margin-bottom: 6px;
    }
    /* .card-baord {

        padding: 50px;

    } */

    .refresh-btn {
        font-size: 0.6rem;
    }
    /* .verticle {
        right: -150px;
    } */
    .game-btn.active:before {
        opacity: 0;
        display: none;
    }
    .section-xs {
        padding: 25px 0;
    }
    .main-div .boardsection {
        padding: 10px 0px 0;
        border-radius: 5px;
    }
    .card-baord .row:nth-last-child(2) .chipset-lastcard .card-icons img {
        height: 15px;
        width: 15px;
    }
    /* .timestamp span {
        font-size: .65rem;
    } */
    .selected-amount.coinchip span {
        font-size: 0.56rem;
    }
    .selected-amount.coinchip {
        width: 25px;
        /* height: 25px; */
        margin: 0;
    }
    /* .left, .right {
        top: 42%;
    }
    .right{
        top:43%;
    } */
}
@media screen and (min-width: 600px) {
    /* .card-baord {

        padding: 2.3rem 2.5rem !important;

    } */
    .game-title {
        left: 45px;
    }
    /*  .down {
        bottom: 110px;
    }
    .left{
        top: 42%;
    }
    .right {
        top: 43%;
    } */
    /*  .timestamp span {
        font-size: .785rem;
    } */
    /*  .selected-amount.coinchip span {
        font-size: .6rem;
    } */
    .card-baord .row:nth-last-child(2) .selected-prize .card-icons {
        bottom: 14px;
    }
}

/* Mobile specific styles */
@media (max-width: 767px) {
    /* .down {
        bottom: 100px !important;
    } */
    .section-xs {
        padding: 15px 0;
    }
    .button-container {
        gap: 10px;
        white-space: nowrap;
        margin: 0 auto;
        display: block;
    }
    .game-btn {
        /*  padding: 0;
        margin: 3px; */
        flex: 0 0 auto;
    }
    .game-btn.active:before {
        opacity: 0;
        display: none;
    }
    .sticky {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        background: #000;
        z-index: 1024;
        padding: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        overflow-x: auto;
    }
    .game-btn .bannerbox {
        height: 80px;
        /* padding: 3px; */
    }
    /* .card-icons {
        height: 10px;
        width: 10px;
    } */
    .card-baord .row:nth-last-child(2) .cards .card-icons {
        height: 17px;
        width: 17px;
    }
    .card-baord .row:nth-last-child(2) .cards .result-declared .card-icons {
        position: relative;
        bottom: -16px;
    }
    .qrcode-click-here {
        display: block !important;
    }
    .top-section {
        display: block;
        padding: 0 12px;
    }
    .top-section {
        position: relative;
    }
    /*  div#liveTimeStamp div {
        justify-content: space-between;
        display: inline-block !important;
    }
    .live-watch-count {
        display: inline-block;
        color: #07b819 !important;
        font-weight: 700;
    }
    .live-watch-count i {
        display: none;
    }*/
}
@media screen and (min-width: 992px) {
    .mobile-menu {
        display: none;
    }
    .vsmall-fs {
        font-size: 0.75rem;
    }
    .section-xs {
        padding: 25px 0;
    }
    .button-container.sticky {
        flex-direction: column;
    }
    /*  .game-btn {
        margin: 3px;
    } */
    .section-xs {
        padding: 25px 0;
    }
    /* .card-baord {
        padding: 20px;
    } */
    .card-baord .row:nth-last-child(2) .chipset-lastcard .card-icons {
        bottom: 3px;
    }
    .card-baord .row:nth-last-child(2) .chipset-lastcard .card-icons img {
        height: 15px;
        width: 15px;
    }
    /*  .down {
        bottom: 0;
    }
    .left{
        top: 50%;
    }
    .right {
        top: 51%;
    } */
    /*  .timestamp span {
        font-size: .785rem;
    } */
    .qrcode-click-here {
        display: none !important;
    }
    .card-baord .row:nth-last-child(2) .selected-prize .card-icons {
        bottom: 10px;
    }
    .section-xs {
        padding: 25px 0;
    }
    .maibhibazigar-banner picture {
        /* height: clamp(170px, 20vw, 250px); */
        display: inline-block;
    }
    .maibhibazigar-banner a {
        width: 100%;
        display: inline-block;
    }
    .maibhibazigar-banner img {
        width: 100%;
        height: 250px;
        object-fit: contain;
    }
}
@media screen and (min-width: 1024px) {
    .timestamp {
        width: 150%;
    }
    /* .rank-crown img {
        width: 40px;
    } */
    .swiper-slide .winning-cards span {
        color: #fff;
    }
}
@media screen and (min-width: 1200px) {
    .new-card-game .revealed-number {
        width: 70%;
        /* width: 55%; */
    }
    .totalamt-wrap button:hover {
        background: #6f34c5;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.19);
    }

    /*  .down {
        bottom: 0 !important;
    }
    .left {
        top: 50%;
    } */
    /* .card-baord {
        padding: 45px !important;
    } */
    /* .result-summary.card-baord {
        padding: 50px;
    } */
    .card-baord .row:nth-last-child(2) .chipset-lastcard .card-icons {
        bottom: 10px;
    }
    .card-baord .row:nth-last-child(2) .chipset-lastcard .card-icons img {
        height: 20px;
        width: 20px;
    }
    /* .timestamp span {
        font-size: .785rem;
    }*/
    .timestamp {
        width: 120%;
    }
    .new-card-game .timestamp {
        width: 100%;
        left: 10px;
    }
    #resultPopup .card-baord {
        padding: clamp(1.7rem, 2vw + 1rem, 1.7rem) 1.7rem 2rem
            clamp(1rem, 2vw + 1rem, 1.7rem);
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 80%;
    }
}

.img-blur {
    filter: blur(4px);
}
.retry-qr {
    position: absolute;
    top: 58%;
    left: 48.5%;
}
.timestamp-pos-left {
    left: -16px;
    margin-top: -62px;
}
form span.error {
    width: 100%;
    color: #dc3545;
    font-weight: normal;
}
.navbar-nav .nav-item .nav-link:hover .fill-img,
.navbar-nav .nav-item .nav-link:active .fill-img {
    display: block;
}
.navbar-nav .nav-item .nav-link:hover .trans-img,
.navbar-nav .nav-item .nav-link:active .trans-img {
    display: none;
}
.games-end .hstack {
    padding: 0 5px;
}
select.form-select {
    position: relative;
    z-index: 9;
}

select.form-select option {
    position: relative;
}
.stickyBottom-row .col:nth-last-child(2) {
    padding: 0 10px 0 0;
}
@media (max-width: 1024px) {
    select.form-select {
        max-height: 300px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    div#geoLocationPermissionMobAlert {
        margin-top: 15px;
    }
}
.location-permission-svg {
    width: 100%;
    margin: 10px auto 0;
    display: block;
    object-fit: cover;
    object-position: center;
}

.attempt-bg-yellow {
    background: #ffe69a !important;
}
.blue-bg-dark {
    background-color: #92b4ec !important;
}
.text-dark {
    color: #000 !important;
}
/* #resultPopup .card-baord{
    padding: clamp(1.7rem, 2vw + 1rem, 1.7rem) 1rem 2rem clamp(1rem, 2vw + 1rem, 1.7rem);
} */
.fixedBottom {
    position: fixed;
    left: 0;
    bottom: 50px;
    background: #92b4ec;
    padding: 5px 10px 10px;
    height: 50px;
    width: 100%;
    z-index: 1;
}

/* 12Cards */
.new-card-game .cards,
.new-card-game.card-baord .row:nth-last-child(2) .cards,
.new-card-game .card-baord .row.last-row .cards {
    height: 100%;
    border-radius: 4px;
    padding: 5px;
    aspect-ratio: 3.1 / 3.5;
    /* aspect-ratio: 2.8 / 3.5; */
}
.new-card-game .card-name {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    /* align-items: baseline;
    justify-content: start;
    height: 100%; */
}
.new-card-game .card-icons,
.new-card-game.card-baord .row:nth-last-child(2) .cards .card-icons {
    margin: 0 auto;
    width: clamp(25px, 2vw, 40px) !important;
    height: clamp(25px, 2vh, 40px) !important;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    /* padding: 10px 0 20px 0; */
    padding: clamp(20px, 2vw, 20px) 0 clamp(20px, 3vw, 20px) 0;
}

.new-card-game.card-baord
    .row:nth-last-child(2)
    .result-declared
    .card-icons
    img {
    width: auto;
    height: auto;
}

.new-card-game .cards .card-icons img {
    margin: 0 auto !important;
}

.new-card-game .cards .wrap {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: column;
    height: 100%;
}
.new-card-game.card-baord .selected-prize .wrap,
.new-card-game .purchase-card .wrap,
.new-card-game .group-selected .wrap {
    display: block;
}
.new-card-game .group-selected span {
    color: #000;
}
.new-card-game .show-selected-amount,
.new-card-game .row:nth-last-child(2) .selected-prize .show-selected-amount {
    display: block;
    margin: 0 auto;
}

.new-card-game .result-declared .wrap {
    display: block;
}
.new-card-game .selected-prize .card-icons,
.new-card-game .purchase-card .card-icons,
.new-card-game .result-declared .card-icons,
.new-card-game .group-selected .card-icons {
    position: absolute;
    bottom: clamp(5px, 2vw, 14px) !important;
    left: 0;
    right: 0;
    padding: 0;
}
.new-card-game.revealed-number {
    margin: -8px auto 2px;
}
.new-card-game .margin-top {
    margin-top: 0px;
}

.new-card-game .cards .card-name span {
    font-size: clamp(0.86rem, 1vw, 1rem);
}

.new-card-game .row-col-sum {
    font-size: clamp(0.85rem, 1vw, 1rem);
}
.new-card-game .row-col-sum.rowsum {
    top: 20px;
}
.new-card-game .purchase-card .selected-amount,
.new-card-game .result-declared .selected-amount {
    display: block;
    margin: 0 auto;
}
.new-card-game .purchase-card .selected-amount {
    width: 29px;
}

.new-card-game .totalcardavailable {
    display: block;
}

.new-card-game .color-indicator {
    height: 19px;
    width: 19px;
    right: 0;
}

.new-card-game .result-declared .selected-amount {
    width: 40px;
    height: 40px;
}

.new-card-game.result-summary .card-icons,
.new-card-game.result-summary.card-baord
    .row:nth-last-child(2)
    .cards
    .card-icons {
    margin: 0;
    width: clamp(12px, 2vw, 13px) !important;
    height: clamp(12px, 2vh, 13px) !important;
    align-items: start;
    justify-content: start;
    padding: 3px 0;
}

.new-card-game.result-summary .card-name {
    align-items: stretch;
    justify-content: start;
    flex: 0 auto;
}
.new-card-game .revealed-number {
    top: -5px;
}
.new-card-game .revealed-number span,
.new-card-game .selected-amount span {
    font-size: clamp(0.9rem, 1vw, 1rem);
    font-weight: bold;
}

.new-card-game.revealed-number.timestamp {
    left: 0 !important;
    width: 110% !important;
}

.new-card-game.card-baord
    .row:nth-last-child(2)
    .selected-prize
    .card-icons
    img {
    height: auto;
    width: auto;
    /* aspect-ratio: 1 / 1; */
}

/* Mai Bhi Bazigar */
.section-xxs {
    padding: 15px 0;
}
.maibhibazigar-banner picture {
    /* height: clamp(170px, 20vw, 250px); */
    overflow: hidden;
    /* background: #060605; */
    border-radius: 10px;
    display: inline-block;
    border: 2px solid #ea2e72;
}
.maibhibazigar-banner img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
}
.maibhibazigar-section {
    min-height: 90vh;
    background: rgb(15, 2, 50);
    background: linear-gradient(
        90deg,
        rgba(15, 2, 50, 1) 0%,
        rgba(132, 5, 114, 1) 100%
    );
}
.title-heading {
    margin-bottom: 10px;
}
.title-heading h1 {
    color: #ffac01;
    font-size: 1.3rem;
    font-weight: 700;
    font-style: italic;
    text-align: center;
}
.title-heading h2 {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
}
/* .flame-container {
    position: absolute;
    left: 0;
    top: 0;
} */
/* .flame{
    position: relative;
}
.flame .card-img-overlay {
    padding: 8px;
    font-weight: 600;
    font-size: clamp(1rem, 2vw, 1.1rem);
    color: #500455;
    text-transform: uppercase;
    padding: clamp(.5rem, 2vw + 1rem, .5rem) 0.5rem 1rem clamp(.5rem, 2vw + 1rem, .5rem);
} */
.inner-content {
    padding: 5px;
    border: 2px solid #ffa601;
    border-image-slice: 52;
    border-image-width: 15px;
    border-image-outset: 0px;
    border-image-repeat: round;
    border-image-source: url(../images/matrix/rectborder.png);
    overflow: hidden;
    /* min-height: 58vh; */
    display: flex;
    flex-direction: column;
}
.bg-gradient-new {
    background: linear-gradient(
        90deg,
        rgb(148 28 138 / 31%) 0%,
        rgb(143, 6, 129) 100%
    );
    border-radius: 6px;
}
.inner-content p {
    font-size: clamp(0.78rem, 2vw, 0.9rem);
    font-weight: 600;
}
.main-container {
    flex: 1;
    min-height: 380px;
    /* min-height: calc(84vh - 24vh); */
    max-height: 100%;
}
.time-fontsize {
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: clamp(0.78rem, 2vw, 0.9rem);
    display: block;
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
}
.next-slide-container {
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 10px 0;
}
ul.ulcardlist {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
}

.ulcardlist li {
    display: inline-block;
    text-align: center;
}

.resultcard span {
    position: relative;
    text-align: center;
    color: #fff;
    display: block;
    padding: 3px;
    border: 1px solid #ffa601;
    border-radius: 6px;
    margin: 20px 0 0;
    z-index: 1;
    background: #ffffff17;
    font-size: 1.1rem;
    font-weight: 600;
}
.resultcard span:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -20px;
    height: 20px;
    width: 30px;
    background: url(../images/matrix/connector.png);
    z-index: -1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
.resultcard img {
    width: 100%;
    aspect-ratio: 2.4 / 3.5;
    border: 1px solid #140335;
}
.btn-claim {
    border: 0;
    padding: 0.3rem 0.5rem;
    background: url(../images/matrix/claimbtnbg.png);
    background-color: transparent;
    border-radius: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #5c005e;
    text-transform: uppercase;
    font-size: clamp(0.786rem, 2vw, 1rem);
    font-weight: 700;
}
.btn-claim.disabled {
    color: #5c005e;
}
.btn-playmatrix {
    border: 0;
    background: url(../images/matrix/btn-bg.png);
    background-color: transparent;
    border-radius: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #fff;
    text-transform: uppercase;
    font-size: clamp(0.786rem, 2vw, 1rem);
    font-weight: 600;
    padding: 0.3em 0.75em;
    position: relative;
    z-index: 1;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}
.maibhibazigar-section .swiper.claimslider {
    padding: 0 0 40px 0;
}
.maibhibazigar-section .swiper-pagination-bullet {
    background: #e3e3e3;
    height: 10px;
    width: 10px;
    border-radius: 25px;
    opacity: 0.9;
}
.maibhibazigar-section .swiper-pagination-bullet-active {
    background: #ffa601;
    opacity: 1;
    box-shadow: 0 0 8px #ffa601;
}
/* 2nd slider css */
.next-slide-container .grid-container {
    grid-gap: 10px;
}
.next-slide-container ul.ulcardlist {
    grid-gap: 3px;
}
.next-slide-container .resultcard img {
    height: auto;
    aspect-ratio: 2.1 / 3.5;
}
/* Video section */
.video-section {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}
.video-section .card-img-overlay {
    display: flex;
    flex: 1;
    justify-content: end;
    align-items: end;
}
.video-section a {
    transition: transform 0.6s ease-in-out;
    transform: scale(1);
    padding: clamp(3px, 1vw, 10px);
    opacity: 0.9;
}

.video-section a:hover {
    transform: scale(1.1);
    opacity: 1;
}

/* Mai bhi bazigar FAQ */
/* .maibhibazigar-faq{
    background-color: #150235;
    background: linear-gradient(180deg, #3b0054 0%, #11003a 50%, #3b0054 100%);
} */
.accordion-item,
.accordion-item:not(:first-of-type),
.accordion-item:first-of-type {
    border: 2px solid #bcb4ff;
    background: #13033f;
    border-radius: 10px;
    margin: 0 0 10px 0;
}
.accordion-item:last-child {
    margin-bottom: 0;
}
.accordion-header {
    background: transparent;
    line-height: normal;
}
.accordion-body {
    color: #fff;
    padding: 0 20px 20px;
}
.accordion-body p {
    margin: 0;
    font-size: 0.865rem;
    text-align: justify;
}
.accordion-button,
.accordion-button:not(.collapsed) {
    background: transparent;
    color: #fff;
    box-shadow: none;
    padding: 10px;
}
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
    transition: all 0.5s;
    filter: invert(8);
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}
.accordion-button::after {
    transition: all 0.5s;
}

/* Terms & Condition */
.terms-cond-section p {
    font-size: 0.865rem;
    text-align: justify;
}
.terms-list {
    list-style-type: decimal;
    line-height: 1.6;
    margin-left: 20px;
}
.terms-list li {
    font-size: 0.865rem;
    text-align: justify;
    margin-bottom: 10px;
}
.ullist li {
    position: relative;
    padding-left: 13px;
    font-size: 0.86rem;
    margin-bottom: 0;
}
.ullist li::before {
    content: "";
    position: absolute;
    height: 6px;
    width: 6px;
    background: #fff;
    top: 7px;
    left: 0;
    border-radius: 10px;
}
/* Past Results */

.table-pastresult tr th {
    color: #fff;
    font-size: clamp(0.85rem, 2vw, 0.9rem);
    background-color: transparent;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #998ade;
    padding: 0.5rem 0.3rem;
    font-weight: 600;
}
.table-pastresult tr td {
    color: #fff;
    font-size: clamp(0.768rem, 2vw, 0.8rem);
    vertical-align: middle;
    background-color: transparent;
    border: 1px solid #998ade;
    padding: 0.5rem 0.3rem;
    text-align: center;
}

.table-pastresult {
    background-color: #3f1d83;
}
.table-pastresult tr .tbl-heading {
    background-color: #4939c1;
    border: 1px solid #998ade;
    font-size: clamp(0.9rem, 2vw, 1rem);
}
.tablecard img {
    width: clamp(18px, 3vw, 32px);
}
/* Wallet */
.wallet-section .btn-custom-green {
    font-size: 0.9rem;
    padding: 0.5rem 0.7rem;
}
/* Withdraw */
.linknow-btn {
    background: #fff !important;
    padding: 6px 5px;
    border-radius: 5px;
    color: #000000;
    border: 1px solid #0057e6;
}
.widthdraw-link {
    background-color: #b3cbf2;
    color: #000000;
    border: 1px solid #0057e6;
    box-shadow: none;
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
}
@media screen and (max-width: 768px) {
    .past-game {
        height: 130px;
    }
    /*  .next-slide-container .grid-container, ul.ulcardlist {
        grid-gap: .5px;
    } */
    .next-slide-container .grid-container {
        grid-gap: 4px;
    }
    .next-slide-container ul.ulcardlist {
        gap: 1px;
    }
    header .navbar.navbar-expand-lg {
        height: 92.66px;
        max-height: max-content;
    }
    .btn-start {
        position: fixed;
        left: 0;
        bottom: 0;
    }
    .new-card-game.result-summary .cards .wrap {
        display: flex;
        justify-content: start;
        align-items: start;
        flex-direction: column;
        gap: 0;
    }
    .new-card-game.result-summary .cards,
    .new-card-game.result-summary .row:nth-last-child(2) .cards {
        aspect-ratio: 2.5 / 3.5 !important;
    }
    .new-card-game .cards .card-name span {
        margin-bottom: 0;
    }
    #resultPopup .card-baord {
        padding: clamp(1.7rem, 2vw + 1rem, 1.7rem) 1rem 2rem
            clamp(1rem, 2vw + 1rem, 1.7rem);
    }
    #resultPopup #matrixCardBoard {
        padding: clamp(1.7rem, 2vw + 1rem, 1.7rem) 1.2rem 2rem
            clamp(1.2rem, 2vw + 1rem, 1.2rem);
    }
    .ht {
        height: 33px;
    }
    .totalamt-wrap button {
        padding: 4px;
    }
    .btn-effect-primary {
        padding: 0.3em 0.75em;
    }
    .timestamp {
        left: -9px;
    }
    .boardsection .btn-prize {
        border-radius: 7px;
    }
    .border-slicing {
        border-image-width: 35px;
    }
    .timeLeft p {
        font-size: 0.6rem;
        margin: 0;
    }
    .card-baord .row:nth-last-child(2) .cards,
    .card-baord .row.last-row .cards {
        aspect-ratio: 2.8 / 3.5;
    }
    .result-summary .row:nth-last-child(2) .cards {
        aspect-ratio: 2.6 / 3.9;
    }
    .card-baord .row.last-row .cards {
        aspect-ratio: 2.5 / 3.5;
    }
    .bg-brown-color.bg-tiles-image {
        background-image: url(../../assets/images/matrix/tilesbg.png) !important;
        background-repeat: repeat;
    }

    #resultPopup .timestamp-pos-left,
    #matrixResultSummaryCardBoardCont .timestamp-pos-left {
        left: -5px;
        margin-top: -35px;
    }
    .snapSection .timestamp {
        left: -3px;
    }
    .rsltverticle-scroll .selected-amount.coinchip {
        flex-grow: 1;
        height: clamp(25px, 3vh + 1rem, 35px);
    }
    .btn-read {
        font-size: 0.785rem;
        padding: 0;
    }
    .stickyBottom {
        position: sticky;
        right: 0;
        bottom: 50px;
        background: #92b4ec;
        padding: 5px 10px 10px;
    }
    /* .timeLeft{
        position: absolute;
        top: 0;
        right: 0;
    }*/
    #liveTimeStamp > div {
        flex-direction: row-reverse;
    }
    /*  #liveTimeStamp > div > div:nth-child(2){
            flex-direction: row-reverse;
            width: 100%;
    } */
    .top-section {
        margin-bottom: 2px;
    }
    /*  .timeLeft {
        display: flex;
        justify-content: center;
        align-items: center;
    } */
    .timeLeft p {
        margin: 0 5px 0 0;
    }
    .live:first-of-type {
        display: flex !important;
        flex-direction: row;
        align-items: center;
    }
    .live-watch-count i {
        display: none;
    }
    .live-watch-count {
        display: inline-block;
        color: #07b819 !important;
        font-weight: 700;
        margin-left: 7px;
        font-size: 0.875rem;
    }

    table .table-body::-webkit-scrollbar-track {
        background: #d3d3d3;
    }
    table .table-body::-webkit-scrollbar-thumb {
        background: #0057e6;
    }

    .home-section .cards {
        height: 39px;
    }
    #summaryPopup .table-custom tbody tr td,
    #summaryPopup .table-custom tfoot tr td {
        color: #000;
    }

    .mainfilterDiv label {
        color: #000 !important;
    }

    #filterDiv .btn-effect-secondary,
    #summaryPopup table.table-custom .table-body td:last-child .totalbetbox,
    .mainfilterDiv,
    .btn-effect-secondary {
        background-color: #b3cbf2 !important;
        color: #000000 !important;
        border: 1px solid #0057e6 !important;
    }
    .filteredData {
        background-color: #b3cbf2;
        color: #000000;
        border: 1px solid #c9ddff;
    }
    .filteredData .btn-remove-circle {
        background: #ffd24c !important;
        color: #000000 !important;
        border: 1px solid #ffe9a9 !important;
    }

    .overlay-content {
        top: auto;
        height: auto;
        bottom: 0;
        padding: 10px;
    }
    .attach-file-section img {
        filter: invert(1);
    }
    .text-danger {
        color: #ff0000 !important;
    }
    .text-warning {
        color: #f1f73b !important;
    }
    .text-success {
        color: #00691f;
    }
    /*   .input-container .form-control, .input-container .form-control:focus {
        background-color: #b3cbf2;
        color: #000000;
        border: 2px solid #0057E6;
    }
    .input-container label {
        background: linear-gradient(to top, #b3cbf2, #92b4ec);
        color: #000000;
    }
    .input-container .form-control::placeholder{
        color: #000000b8;
    } */

    .text-gradient {
        background: -webkit-linear-gradient(#0057e6, #0057e6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .notificationblock {
        color: #121212;
        background-color: #b3cbf2;
    }
    .notificationblock .psmall,
    .headtop .psmall {
        color: #000000 !important;
    }
    .light-blue-color {
        background: #ffe69a !important;
    }

    .width-m {
        min-width: 38%;
        text-align: end;
        white-space: nowrap;
    }
    .close {
        background: #0057e6;
        border: 1px solid #0057e6;
    }
    .modal-content {
        background: #b3cbf2b0;
        color: #000000;
        border: 2px solid #0057e6;
    }
    .bg-brown-color {
        background: #41190d !important;
    }
    .bg-brown-color .winning-cards span {
        color: #fff;
    }
    .modal .modal-body .serviceBlock {
        background: #92b4ec;
    }
    .modal .modal-body .title-lg,
    .modal .modal-body .title-md {
        color: #1c1850;
    }
    .form-check-input {
        background-color: #b3cbf2;
        border-color: #0057e6;
    }
    .my-profile .form-control:disabled {
        background-color: #99aed2;
        color: #00000078;
        border: 2px solid #8a9bb7;
    }
    label {
        color: #000;
    }

    .subsection-titles .bg-title {
        background: linear-gradient(to top, #8d89c0, #c2d0f5);
        background: url(../images/matrix/title-bg.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .bg-img-1 {
        background: url("../images/matrix/games-bg-1.png");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .bg-img-2 {
        background: url("../images/matrix/games-bg-2.png");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .games-Page .fs-m {
        font-size: clamp(0.75rem, 1vw, 0.85rem);
    }
    .games-Page .recent-img {
        width: 40%;
    }
    .games-content .section-title h1 {
        font-size: 1.4rem;
    }
    .header-section {
        /* background: #d3e1f6; */
        background: #2a3548;
    }
    .outline-div {
        background-color: #b3cbf2;
        color: #000000;
        border: 1px solid #0057e6;
        box-shadow: none;
        border-radius: 10px;
        overflow: hidden;
    }

    .game-details-table tbody tr td {
        color: #000;
    }
    .tbl-list tbody td {
        color: #000;
    }
    .winning-cards a {
        text-decoration: underline;
        color: #000;
    }
    .winning-cards span {
        color: #000;
    }
    .tbl-list thead th {
        background: #2a35481c !important;
        color: #000;
        border-bottom: 1px solid transparent;
        font-size: 0.875rem;
    }
    .servicebox-list {
        background: #f2f3f6;
    }
    .section-title h1 {
        color: #1c1850;
    }

    .subsection-title h1 {
        color: #000;
        background-color: #92b4ec;
        font-weight: 700;
        font-size: 1.2rem;
        padding: 0;
        /* padding: 0.5rem 0; */
    }
    .form-control::placeholder {
        color: #000000b8;
    }
    .btn-prize-light {
        background-color: #b3cbf2 !important;
        color: #000000 !important;
        border: 2px solid #0057e6 !important;
        width: 100%;
    }
    .navbar-nav .nav-item {
        margin-right: 15px;
    }

    .offcanvas.offcanvas-end {
        width: 230px;
    }
    .dropdown-item {
        color: #ffff;
    }
    .offcanvas-body {
        overflow: visible;
        height: 100vh;
        padding: 0;
    }
    .dropdown-toggle::after {
        display: none;
    }
    li.nav-item.small-font {
        color: #fff;
        font-size: 10px;
        margin: 10px 0 10px;
    }

    hr.border-blue {
        border: 1px solid #7898cd !important;
        margin: 0.5rem 0 0.8rem;
    }

    /* #navbarOffcanvasLg .nav-item.nav-profile .nav-link {
        display: inline-flex;
        align-items: center;
        margin-bottom: 0px;
    } */
    #navbarOffcanvasLg .navbar-nav .dropdown-menu {
        position: unset !important;
    }
    a#howToPlayDropdown:after {
        content: "";
        position: absolute;
        right: 0;
        display: inline-block;
        left: 100%;
        vertical-align: 10px !important;
        bottom: 18px;
        margin-right: 0;
        margin-left: 25%;
    }
    /* .offcanvas.show:not(.hiding),
    .offcanvas.showing {
        transform: none;
    } */

    /* Mobile Menu */
    .mobile-menu.offcanvas {
        background-color: #110d40;
        background: transparent
            linear-gradient(180deg, #92b4ec 0%, #ffffff 100%) 0% 0% no-repeat
            padding-box;
    }
    nav.navbar.mobile-menu {
        /* background-color: #110D41; */
        background: #2a3548 0% 0% no-repeat padding-box;
        border: 1px solid #707070;
        margin: 0 auto;
        text-align: center;
        position: fixed;
        width: 100%;
        bottom: 0;
        display: none;
        z-index: 9;
    }
    .mobile-menu .offcanvas .offcanvas-body {
        justify-content: center;
    }
    .mobile-menu ul.navbar-nav {
        display: contents;
        text-align: center;
        margin: 0 auto;
    }
    .mobile-menu .nav-item .nav-link {
        background: transparent;
        border-radius: 10px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-menu .navbar-nav .nav-item .nav-link:before {
        display: none;
    }

    /* #offcanvasRight {
        width: 200px;
        right: 0;
        left: auto;
    }
    #offcanvasRight .dropdown-item {
        padding: 0.387rem 0.562rem;
        color: #fff;
        font-size: 12px;
    } */
    .mobile-menu .nav-item .nav-link.current-menu-item .trans-img {
        display: none;
    }
    .mobile-menu .nav-item .nav-link.current-menu-item {
        background: #ffffff14;
    }
    .mobile-menu .nav-item .nav-link.current-menu-item .fill-img {
        display: block;
    }

    .fill-img {
        display: none;
    }
    .nav-item.nav-profile .nav-link img {
        width: 35px;
        height: 35px;
    }
    .navbar-nav .nav-item.darknav a {
        display: contents;
        font-size: 12px;
        font-weight: 500;
        color: #fff;
    }
    .navbar-nav .nav-item.darknav a i {
        font-size: 12px;
        font-weight: 500;
    }
    /* .navbar-nav .nav-item.darknav a img{
        filter: brightness(0);
    } */
    .navbar-nav .nav-item.darknav {
        /* background-color: #fff; */
        background-color: #ffffff4f;
        border-radius: 4px;
        padding: 0px 0.2rem;
        /* display: none; */
    }
    /* footer{
        display: none;
    } */
    /* nav.navbar.mobile-menu,.navbar-nav .nav-item.darknav {
        display: block;
    } */

    .new-card-game .cards,
    .new-card-game.card-baord .row:nth-last-child(2) .cards,
    .new-card-game .card-baord .row.last-row .cards {
        height: 100%;
        aspect-ratio: 2.8 / 3.5;
    }

    .new-card-game .cards .wrap {
        display: block;
    }
}

.alert {
    font-size: 14px !important;
}
.alert .alert-success {
    background: #186920 !important;
}
.alert .alert-danger {
    background: #dc3545 !important;
}
.note-text {
    font-size: 14px;
    text-align: center;
}
.btn-prize-light {
    background: #b3cbf2;
    color: #000000;
    border: 2px solid #0057e6 !important;
    width: 100%;
}
.btn-prize-light:hover,
.btn-prize-light:active {
    background: #0057e6 !important;
    color: #fff !important;
}
.input-group-text {
    background-color: #b3cbf2;
    color: #000000;
    border: 2px solid #0057e6;
}
.outline-div {
    background-color: #b3cbf2;
    color: #000000;
    border: 1px solid #0057e6;
    box-shadow: none;
    border-radius: 10px;
    overflow: hidden;
}
.my-profile .form-control:disabled {
    background-color: #99aed2;
    color: #00000078;
    border: 2px solid #8a9bb7;
}
.notificationblock .psmall,
.headtop .psmall {
    color: #000000 !important;
}
.font-14 {
    font-size: 14px;
}
.leaderboardlist-section .sticky-top {
    background: #92b4ec;
}

/* Minimized/Maximized video popup */
#minimizeCustomYoutubeVideoModal {
    display: none;
}
.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 999;
}
.video-popup {
    position: fixed;
    z-index: 1000;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
.video-popup.minimized {
    width: 210px;
    /* height: 200px; */
    bottom: 10px;
    right: 10px;
    top: auto;
}
.video-popup:not(.minimized) {
    width: 95%;
    max-width: 800px;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: auto;
    right: auto;
}
.video-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    padding: 5px 10px;
}
.video-header button {
    background: none;
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
}
.video-header button:hover {
    color: #ff9900;
}
.video-content iframe {
    width: 100%;
    height: 150px;
}
.video-popup:not(.minimized) .video-content iframe {
    /*  width: 100%;
    min-width: 300px;
    max-width: 600px; */
    height: 400px;
}

/* ------:: video Gallery Styles----------- */

.video-gallery > ul > li a {
    border: 2px solid #fff;
    border-radius: 10px;
    display: block;
    overflow: hidden;
    position: relative;
}
.video-gallery > ul > li a > img {
    transition: transform 0.15s ease;
    transform: scale(1);
    width: 100%;
    aspect-ratio: 3.2 / 2;
}
.video-gallery > ul > li a:hover > img {
    transform: scale(1.1);
}
.video-gallery > ul > li a:hover .light-gallery-poster {
    background-color: rgb(255 255 255 / 19%);
    opacity: 1;
    width: 100%;
    height: 100%;
}
.video-gallery > ul > li a:hover .light-gallery-poster > img {
    opacity: 1;
}
.video-gallery > ul > li a .light-gallery-poster {
    background-color: rgba(0, 0, 0, 0.1);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: 0.3s ease-in-out;
    opacity: 1;
    width: 100%;
    height: 100%;
}
.video-gallery > ul > li a .light-gallery-poster > img {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    position: absolute;
    font-size: 30px;
    transition: opacity 0.3s ease;
    width: 55px;
}
.game-details-table tbody tr td .rank-crown.rank-icon-in-minutes {
    font-size: clamp(0.6rem, 1vw, 0.8rem);
}
.custom-youtube-video-modal {
    display: none;
}

.bg-modal {
    background-image: url(../../assets/images/matrix/bg-modal.png);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 20px;
}
.common-alert-modal .btn-effect-success {
    min-width: 120px;
}

/* Welcome Bonus Popup */
.welpopup-container {
    border-radius: 7px;
    position: relative;
    z-index: 1;
}
.animate-text-div {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: #f6ad02;
    border-radius: 5px;
    padding: 0.2rem 0.7rem;
}
.welcome-text {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
}
.welpopup-container .btn-close {
    position: absolute;
    right: -8px;
    top: -8px;
    background: #f6ad02;
    line-height: 1;
    opacity: 1;
    border-radius: 25px;
    border: 1px solid #f6ad02;
    color: #fff;
    height: 15px;
    width: 15px;
}
.welpopup-container p {
    color: #fff;
}

.modal-body.welpopup-container:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: url(../images/matrix/celebration.webp);
    background-position: bottom center;
    background-size: 90%;
    background-repeat: no-repeat;
    opacity: 0.3;
    z-index: -1;
}

#welcomebonus .modal-content {
    border: 2px solid #f6ad02;
}

.claim-bonus {
    border: 0;
    background-size: 100% 100%;
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 0.7rem;
    background-color: transparent;
    margin-bottom: 12px;
    background-image: url(../images/matrix/BTN-Blu.png);
}
.tds-container div span {
    font-size: clamp(0.72rem, 2vw, 0.8rem);
}
.tds-container .top-border {
    border-top: 2px solid #000000;
}
.tds-container {
    position: relative;
}
.show-tds-details-modal {
    display: none;
    position: absolute;
    top: 100px;
    right: 0;
    /* transform: translateX(-63%); */
    min-width: 300px;
    padding: 10px;
    background-color: #b3cbf2;
    z-index: 9999;
    border: 1px solid #0057e6;
    border-radius: 10px;
}
.show-tds-details-modal div span {
    font-size: 0.8rem;
}
.show-tds-details-modal:before {
    content: "";
    border-bottom: 10px solid #b3cbf2;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    right: 10px;
    top: -9px;
}
.show-tds-details-modal .top-border {
    border-top: 2px solid #000000;
    margin-bottom: 10px;
}
/* .welcome-bonus-container{
    margin: 1rem;
} */
.welcome-bonus-container .welcome-text {
    padding: 0;
    text-align: center;
}
.welcome-bonus-container .welcome-game-name {
    font-weight: bold;
}
.welcome-bonus-container .welcome-cash {
    font-weight: bold;
}

.fnt-title {
    font-size: 2.5rem;
    color: red;
    font-family: cursive;
}

#mediaModal .modal-content {
    background-color: #bd8013;
}

/* .welcome-bonus-container img{
    margin-top: -26px;
} */
.game-title.right-float {
    right: 40px;
    left: auto;
}

/* Going for Result */
.pageoverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}
.arrowresult {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.arrowresult span {
    display: block;
    width: 30px;
    height: 30px;
    border: 6px solid;
    border-color: #fff #fff transparent transparent;
    transform: rotate(316deg);
    margin: 3px;
    animation: animate 2s infinite;
}
.arrowresult p {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    text-shadow: 2px 3px 3px #000;
}

.arrowresult span:nth-child(2) {
    animation-delay: -0.2s;
}

.arrowresult span:nth-child(3) {
    animation-delay: -0.4s;
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: rotate(316deg) translate(-40px, 20px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(316deg) translate(0, -20px);
    }
}

/* Card Icon Amnimation */
.icon-animation {
    transform: translate(0%, 0%);
    animation: fade_move_down 6s linear 1;
    /* animation-fill-mode: backwards; */
}

@keyframes fade_move_down {
    0% {
        transform: translate(0, -6px);
        opacity: 0;
    }
    60% {
        transform: translate(0, -30px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

/* Revealed Number Amnimation  */
.revealed-text-animation {
    transform: translate(0%, 0%);
    animation: fade_move_up 4s ease-in-out 1;
}

@keyframes fade_move_up {
    0% {
        transform: translate(0, 10px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}
.card-details {
    font-size: 0.8rem;
}

/* Removed Card Cross Button */
.remove-card {
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    position: absolute;
    right: 2px;
    top: 2px;
    background: #ff0000;
    border: 1px solid #ff0000;
    padding: 0;
    line-height: 0;
    height: 20px;
    width: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    z-index: 999;
    text-decoration: none;
    cursor: pointer;
}
/* Result popup win card flame */
.win-card-flame {
    /* background: #241e64; */
    /* min-height: 90px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* margin-right: 6px; */
    /* flex: 1; */
    padding: 0 6px;
}

.hightlight-cards-sum {
    box-shadow: 0 0 10px #ffffff;
    border: 1px solid #beb8ff;
}
.highlight-timeleft {
    box-shadow: 0 0 10px #ffffff;
    background: #403897;
}
.live-result-board .flame-winning-cards {
    display: none;
}
/* Play Guide Button */
.playing-guide {
    background: #00000061;
    color: #feba2e;
    border: 2px solid #feba2e;
    padding: 0.2em 1em;
    position: relative;
    border-radius: 25px;
    z-index: 1;
    overflow: hidden;
    text-transform: capitalize;
    font-size: clamp(0.78rem, 2vw, 0.9rem);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
}
.playing-guide:hover,
.playing-guide:active {
    background: #feba2e;
    color: #311b52;
}

/* highlight card */
.highlight-card {
    border: 3px solid #c2adad;
    box-shadow: 0 0 10px #ffffff;
}

.highlight-color-indicators li {
    border: 1px solid #ffffffd9;
    box-shadow: 0 0 10px #fff;
}

.highlight-refresh-button {
    background: #0057e6;
    color: #fff;
    border: 1px solid #0057e6;
    box-shadow: 0 0 10px #fff;
}

.totalamt-wrap .highlight-reset-button {
    border: 1px solid #ffffffd9;
    box-shadow: 0 0 10px #fff;
}

.highlight-collect-button {
    border: 3px solid #c2adad;
    box-shadow: 0 0 10px #ffffff;
}

/* New Animation */
.animation-block{
    background-image: url(../images/matrix/bg-m.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
  }
  .animation-block .card_stacks{
      position: absolute;
      bottom: 5px;
      left: 10px;
  }
  /* Flip Card Animation */
  .flip-card-container {
    height: 70%;
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0 auto;
  }
  .flip-card {
      perspective: 1000px;
      display: inline-block;
      width: 50px;
      height: 65px;
      position: relative;
  }
  
  .flip-card-inner {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
  }
  .flip-card-front,
  .flip-card-back {
      backface-visibility: hidden;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
  }
  
  .flip-card-front {
      transform: rotateY(180deg);
      z-index: 1;
  }
  
  .flip-card-back {
      transform: rotateY(0deg);
      z-index: 2;
  } 
 
  .apply-card-translate-animation {
      animation: card-translate-animation 1s ease-in-out 1;
  }
  
  @keyframes card-translate-animation {
      0% {
          transform: translateY(45px) translateX(-70px) rotate(2deg) scale(0.56);
          opacity: 0.9;
      }
  
      100% {
          transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
          opacity: 1;
      }
  }
    .apply-flip-card-animation {
        animation: flip-card-animation 3s ease-in-out forwards;
    }
    @keyframes flip-card-animation {
        0% {
            transform: rotateY(0deg) scale(1);
        }
        40% {
            transform: rotateY(170deg) scale(1.2);
        }
        50% {
            transform: rotateY(180deg)
        }
        100% {
            transform: rotateY(180deg) scale(1);
        }
    }

    .disapeared-card-animation {
        animation: disapeared-card-animation 1s linear 1;
    }
    @keyframes disapeared-card-animation {
        0% {
            transform: translateY(0);
            opacity: 1;
        }
        100% {
            transform: translateY(100%);
            opacity: 0;
        }
    }

  .confetti_img {
    background: url(../images/matrix/conffety.gif);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
}

/* Game Button Confetti - New Implementation */
.game-btn-confetti {
    background: url(../images/matrix/conffety.gif);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    display: none;
    border-radius: inherit;
    pointer-events: none;
}

.game-btn {
    position: relative;
    overflow: hidden;
}


.reset-card-container {
    display: inline;
}
.card-col {
    position: relative;
}

/* board changes */
.btn-custom-effect {
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: center;
    min-width: 90px;
    border-radius: 6px;
    overflow: hidden;
    color: #fff !important;
    font-weight: 600;
    position: relative;
    z-index: 1;
    border: 2px solid transparent;
}
.button_selected {
    border: 2px solid #ffffff;
    color: #fff;
}

.btn-high {
    background-image: url(../images/matrix/bg-green.png);
}
.btn-medium {
    background-image: url(../images/matrix/bg-yellow.png);
}
.btn-low {
    background-image: url(../images/matrix/bg-red.png);
}
.btn-high img,
.btn-medium img,
.btn-low img {
    opacity: 0.3;
    width: 25px;
    transform: rotate3d(0, 0, 1, -35deg);
    position: relative;
    left: 5px;
    position: absolute;
    z-index: -1;
}

.game-name {
    position: absolute;
    /* top: -20px; */
    top: clamp(-20px, -4vw, -13px);
    left: 20px;
    z-index: 2;
}
.game-name img {
    /* width: 125px; */
    width: clamp(100px, 9vw, 125px);
}
.game-modal .modal-dialog {
    transform-origin: 50% 50%;
    transform: scaleX(1) scaleY(1) translateX(0px);
}
.game-modal .modal-content {
    border: none;
    background-color: #1c6060;
    background-image: url(../images/matrix/bg-m.png);
    background-position: center;
    background-size: 100%;
    background-repeat: repeat;
    border: 5px solid #f9cf47;
    border-radius: 40px;
    overflow: hidden;
    min-height: 250px;
}

/* Time Over */
.time-over {
    display: flex;
    align-items: center;
    justify-content: center;
}
.time-over h3,
.game-over h3 {
    font-size: 2rem;
    font-weight: 600;
}
.time-over p {
    font-size: 3rem;
    margin: 0;
    font-weight: 600;
    color: #fff;
}

/* Shine Effect */
.shine {
    position: relative;
    overflow: hidden;
}
.shine::before {
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 100%
    );
    content: "";
    display: block;
    height: 100%;
    left: -75%;
    position: absolute;
    top: 0;
    transform: skewX(-25deg);
    width: 50%;
    z-index: 2;
    animation: shine 0.85s ease-out 3;
    animation-delay: 2s;
    animation-duration: 1s;
}

@keyframes shine {
    0% {
        left: -75%;
    }
    80% {
        left: 125%;
    }
    100% {
        left: 125%;
    }
}

/* Modal Animation */
@keyframes swoopIn {
    0% {
        transform: translateY(-200px) translateX(150px) scale(0);
        opacity: 0;
    }
    100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 1;
    }
}

.swoop-in-animation .modal-dialog {
    animation: swoopIn 0.4s ease-out;
}
#celebrationPopup .modal-content {
    backdrop-filter: none;
}

/* Text Animation */
.animate-text {
    display: inline-block;
    white-space: nowrap;
    /* overflow: hidden; */
}

.animate-text .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(60px);
    animation: letter-appear 0.3s ease-out forwards;
}

@keyframes letter-appear {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* .revealed-number .animate-text span {
    position: static;
} */
/* .revealed-number .animate-text,
.row-col-sum .animate-text {
    display: inline-flex;
} */

.revealed-number .animate-text .letter,
.row-col-sum .animate-text .letter {
    display: inline-flex;
    opacity: 0;
    transform: translateY(60px);
    animation: digits-appear 0.5s ease-out forwards;
}
.new-card-game .revealed-number {
    top: -5px;
    align-content: flex-end;
}
@keyframes digits-appear {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Card Icon Animation */
.cardicon-animation {
    animation: slidedown 0.6s ease-out;
}

@keyframes slidedown {
    0% {
        transform: translateY(-50px) scale(0);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}
.cardicon-roateteanimation {
    animation: rotate 0.6s ease-out;
}

@keyframes rotate {
    0% {
        transform: translateY(50px) translateX(50px) rotate(2deg) scale(0);
        opacity: 0;
    }
    100% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

.card-animation {
    animation: scale 0.9s ease-out forwards;
}

@keyframes scale {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
        background: #1ccffc;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.card-win-animation {
    animation: zoomIn 0.9s ease-out;
}
@keyframes zoomIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.card-wincrown-animation {
    animation: cardscale 0.9s ease-out;
}

@keyframes cardscale {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.card-sum-animation {
    animation: cardsumscale 0.9s ease-out;
}

@keyframes cardsumscale {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    50% {
        transform: scale(1.4);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Spark Animation Effect */
.sparkeffect {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 100%;
}
.sparkeffect img {
    height: 100%;
    width: 100%;
}

.new-card-game.result-summary .row-col-sum {
    line-height: normal;
    padding: 0;
}

.celebration-modal .modal-dialog:before {
    background: url(../images/matrix/confetti.gif);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
}
.totalamt-wrap .form-control::placeholder {
    color: #f5f5f5;
    font-size: clamp(0.6rem, 2vw, 0.6rem);
}
.totalamt-wrap input,
.totalamt-wrap input:focus {
    background: transparent;
    color: #fff;
    border: none;
}
.totalamt-wrap .reset-btn {
    padding: 0.2rem;
    width: 23px;
    height: 23px;
}

.totalamt-wrap .fa-inr {
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 5px;
}
.p-s {
    padding: 0.2rem;
}
.hts {
    height: 38px;
}
.play-live-game-btn {
    display: none;
}

.play-live-game-btn, .green-gradient-btn {
    background: linear-gradient(to bottom, #0be50b, #078c07);
}
.loading-new-game-btn {
    background-image: url(../images/matrix/loaderanimation.gif);
    display: inline-flex;
    align-items: baseline;
    border-radius: 5px;
}

#resultText1 p {
    font-size: clamp(13px, 2vw, 16px);
    margin: 0;
}

#resultText2 p {
    font-size: clamp(1rem, 2vw, 1.5rem);
    margin: 0;
}
#resultText4Coutdown {
    position: relative;
    top: 30px;
}
#countdown {
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-block;
    transform: translate(-50%, -50%);
    transition: 1s;
    font-size: 0vw;
    opacity: 50%;
    color: #fff;
}
.loadingdots {
    width: 25px;
    aspect-ratio: 3;
    --_g: no-repeat radial-gradient(circle closest-side, #fff 90%, #0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100% / 2) 50%;
    animation: loading_dots 1s infinite linear;
}
@keyframes loading_dots {
    20% {
        background-position: 0% 0%, 50% 50%, 100% 50%;
    }
    40% {
        background-position: 0% 100%, 50% 0%, 100% 50%;
    }
    60% {
        background-position: 0% 50%, 50% 100%, 100% 0%;
    }
    80% {
        background-position: 0% 50%, 50% 50%, 100% 100%;
    }
}
.card-animation .card-icons,
.new-card-game.card-baord .row:nth-last-child(2) .card-animation .card-icons {
    margin: 0;
    width: clamp(12px, 2vw, 13px) !important;
    height: clamp(12px, 2vh, 13px) !important;
    align-items: start;
    justify-content: start;
    padding: 3px 0;
}
.animated-game-board .cards {
    height: 100%;
    border-radius: 4px;
    padding: 5px;
    aspect-ratio: 2.8 / 3.5;
}
.animated-game-board .new-card-game .card-name {
    align-items: stretch;
    justify-content: start;
    flex: 0 auto !important;
}
.animated-game-board .rsltscard-icons {
    height: 30px;
    width: 30px;
}
/* Search Player */
.search-player {
    position: relative;
    padding: 15px;
    border-radius: 5px;
    background-color: #b3cbf2;
    color: #000000;
    border: 2px solid #0057e6;
    z-index: 1;
}
.select-container {
    position: relative;
}
.dropdown-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
    pointer-events: none;
    font-size: 18px;
}
span#walletAmt {
    font-size: clamp(0.768rem, 2vw, 0.9rem);
}
.search-player .dropdown {
    position: absolute;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ccc;
    background: #b3cbf2;
    display: none;
    z-index: 10;
}
.search-player .dropdown div {
    padding: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 1px solid #fff;
}
.search-player .dropdown div:last-child {
    border-bottom: none;
}
.search-player .dropdown div:hover {
    background: #0057e6;
    color: #fff;
}
.search-player .dropdown {
    position: absolute;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ccc;
    background: #b3cbf2;
    display: none;
    z-index: 10;
    top: calc(100% + 5px); /* Small gap below input */
    left: 0;
    transform: translateY(0); /* Reset default transform */
    transition: transform 0.2s ease-in-out;
}
.search-player .dropdown.open-up {
    top: auto;
    bottom: calc(100% + 5px); /* Open upwards when necessary */
    transform: translateY(-5px);
}

@media screen and (max-width: 768px) {
    .animated-game-board .new-card-game .cards .wrap {
        display: flex;
        justify-content: space-between;
        align-items: start;
        flex-direction: column;
        height: 100%;
    }
    .animated-game-board .new-card-game .cards,
    .animated-game-board .row:nth-last-child(2) .cards,
    .animated-game-board
        .new-card-game.card-baord
        .row:nth-last-child(2)
        .cards {
        aspect-ratio: 2.5 / 3.5;
    }
    .animated-game-board.new-card-game .cards .wrap {
        display: flex;
        justify-content: start;
        align-items: start;
        flex-direction: column;
        gap: 0;
    }
}
.font-s {
    font-size: clamp(0.78rem, 2vw, 0.9rem);
}

/* .game-details-table tbody {
    overflow-y: auto;
}
.tbody-height {
    height: 200px;
}
.game-details-table tbody tr {
    width: 100%;
    display: block;
}
.game-details-table tbody td {
    width: 200px;
} */
/* .game-details-table tbody td:nth-child(1) {
    width: 16%;
}
.game-details-table tbody td:nth-child(2) {
    width: 25%;
} */

/* .game-details-table .table-body::-webkit-scrollbar-thumb {
    background: #7e7e7e !important;
    border-radius: 5px;
} */

.game-details-table .table-body::-webkit-scrollbar-thumb:hover {
    background: #7e7e7e !important; /* Color of the scroll thumb on hover */
}

.highlight-values {
    color: #000000;
    background: #e0e0e1;
    border-radius: 4px;
    padding: 0 2px;
    border: 1px solid #bd8e02;
    font-size: clamp(0.68rem, 1vw, 1rem);
}
/* All Results */
.all-resultsection .border-slicing {
    border-image-width: clamp(18px, 2vw, 30px);
    padding: clamp(10px, 1vw, 20px);
}
.all-resultsection .game-name {
    left: 0;
    top: clamp(-2.5%, 1vh + -1rem, -3%);
}
.all-resultsection .game-name img {
    width: clamp(60px, 5vw, 100px);
}
.all-resultsection .game-title.right-float {
    right: 9%;
    padding: 1px 4px;
}
.all-resultsection .right-float h2 {
    font-size: clamp(0.56rem, 2vw, 0.7rem);
}
.all-resultsection .result-summary .color-indicator {
    height: clamp(10px, 2vw, 17px);
    width: clamp(10px, 2vw, 17px);
}
.all-resultsection .result-summary .cards,
.all-resultsection .card-baord .row:nth-last-child(2) .cards {
    aspect-ratio: 3.2 / 3.5;
    border-radius: 2px;
    padding: 2px 3px;
}
.all-resultsection .cards .card-name span {
    font-size: clamp(0.4rem, 1vw, 0.7rem);
    line-height: 1;
}
.all-resultsection .rsltscard-icons {
    width: 40%;
    height: auto;
}
.all-resultsection .revealed-number {
    width: clamp(70%, 3vh + 2rem, 80%);
    height: clamp(25px, 3vh + 2rem, 35px);
}
.all-resultsection .card-baord .row:nth-last-child(2) .result-declared .wrap {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: column;
    height: 100%;
}
.all-resultsection .row-col-sum {
    line-height: normal;
    padding: 0;
    border-radius: 2px;
    font-size: clamp(0.45rem, 1vw, 0.75rem);
}
.all-resultsection .timestamp span {
    font-size: clamp(0.3rem, 1vw, 0.53rem);
    line-height: 1;
    left: 2px;
}
.all-resultsection .margin-top-refresh {
    margin-top: clamp(-24px, -5vw, -16px);
}
.all-resultsection .timestamp {
    left: -5px;
    top: 1px;
}
.all-resultsection .revealed-number span {
    font-size: clamp(0.3rem, 1vw, 0.7rem);
    bottom: 0;
    line-height: normal;
}
.result-container {
    border: 3px solid transparent;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    background-color: #41190d;
    background-image: url(../../assets/images/matrix/tilesbg.png);
    background-repeat: repeat;
}
.highlight-container-border {
    border: 3px solid #c8cf5d;
    box-shadow: 0 0 6px -3px #000;
}
.amt-fs {
    font-size: clamp(0.4rem, 1vw, 0.65rem);
    margin-top: 2px;
}
.result-win-card-flame {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 3px;
}
.played-text {
    background: #c8cf5d;
    position: relative;
    z-index: 1;
}
.played-text:before {
    content: "";
    /* background: #51f361; */
    background: linear-gradient(45deg, #ffffff, #c8cf5d);
    width: clamp(34px, 3.2vw, 60px);
    height: clamp(34px, 3.2vw, 60px);
    top: -1px;
    right: -1px;
    z-index: -1;
    position: absolute;
    clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.played-text span {
    color: #41190d;
    font-size: clamp(0.4rem, 1vw, 0.65rem);
    font-weight: 700;
    text-decoration: underline;
    position: absolute;
    right: 0px;
    top: 7px;
    transform: rotateZ(45deg);
}
.result-win-card-flame img {
    width: clamp(15px, 2vw, 27px);
}
.all-resultsection .result-summary .margin-top {
    margin-right: 0;
}
.game-details-table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 10px;
}
.game-details-table tbody tr:last-child td:last-child {
    border-radius: 0 0 10px 0px;
}
.game-details-table tbody tr:first-child {
    border-top: none;
}

.datepicker-label {
    font-size: 0.75rem;
    font-weight: 500;
    margin: 0;
}
.all-resultsection .mainfilterDiv .form-control {
    background: #ffffff;
    border: 1px solid #7badff;
    padding: 0.2rem 0.3rem;
    border-radius: 3px;
    font-size: 0.8rem;
}

.winning-cards span:last-child {
    font-size: clamp(0.65rem, 1vw, 0.785rem);
    font-weight: 400;
    margin-top: 0.25rem;
}
.all-resultsection .mainfilterDiv .btn-custom-green,
.all-resultsection .mainfilterDiv .btn-effect-secondary {
    font-size: clamp(0.67rem, 1vw, 0.75rem);
    padding: 0.3rem 0.75rem;
    font-weight: 600;
}
.open-result-modal {
    cursor: pointer;
}
.all-resultsection .boardactive {
    padding-bottom: 0;
}
.text-base {
    font-size: clamp(0.65rem, 2vw, 0.9rem);
}
.result-win-card-flame span:first-child {
    font-size: clamp(0.5rem, 2vw, 0.9rem);
    font-weight: 600;
}
#filterForm .error {
    font-size: 12px;
}
.welcome-section {
    min-height: 90vh;
    background-image: url(../../assets/images/matrix/background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main-div {
    position: relative;
}
.btn-image {
    background-image: url(../../assets/images/matrix/btn-green.png);
    border: 0;
    background-size: 100% 100%;
    padding: 3px 5px;
    background-color: transparent;
    border-radius: 25px;
    color: #fff;
    font-weight: 600;
    min-width: 100px;
    box-shadow: 0 3px 3px 3px #0000002e;
    position: absolute;
    bottom: clamp(48px, 6vw, 120px);
    right: 50%;
    transform: translate(50%);
}
.middle-details {
    background: #2d164f;
    padding: 5px;
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.game-btn .btn-effect-success {
    padding: 0.3em 0.75em;
    font-size: 0.75rem;
}
.game-btn .card-img-overlay {
    height: 20%;
    background: linear-gradient(to bottom, #0000004d, #00000000);
}
.button--effects {
    display: inline-block;
    color: #fff;
    font-weight: 600;
    font-size: 0.75rem;
    transition: 0.6s;
    text-decoration: none;
    border-radius: 3px;
    text-align: center;
    background: #241f64;
    color: #fff;
    border: 1px solid #3d31c4;
    padding: 0.3rem 0.5rem;
}
.button--effects:hover {
    color: #fff;
    background: #186920;
}
.gamename-title h2 {
    font-size: 1.2rem;
    color: #fff;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

#loginModal,
#loginOTPModal {
    z-index: 9999;
}
.h-vh {
    min-height: 59ch;
    height: 100%;
    max-height: min-content;
}

.new-card-game .revealed-number span,
.new-card-game .selected-amount span {
    font-size: clamp(0.69rem, 1vw, 0.85rem);
}
.new-card-game .result-declared .selected-amount {
    width: clamp(3rem, 10vw, 4rem);
    height: clamp(3rem, 10vw, 4rem);
}

.new-card-game.card-baord .row:nth-last-child(2) .selected-prize .card-icons {
    padding: 0;
}
.show-tickets {
    background: #efefef;
    backdrop-filter: none;
    border-radius: 0;
    border-top: 4px dashed #0e0a3a;
    border-bottom: 4px dashed #0e0a3a;
    color: #000;
}
.total {
    border: 1px solid #000;
    text-align: center;
    font-weight: 600;
}
.cardlist li {
    display: inline-block;
    /* background: #cacaca; */
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 1rem;
    margin-right: 8px;
    border: 1px solid #6a6868;
    font-weight: 600;
    min-width: 50px;
    text-align: center;
}
.print-summary {
    width: 58mm; /* Adjust for your thermal printer's width (58mm, 80mm, etc.) */
    text-align: left;
    padding: 5px;
}
.timeLeft-font span {
    font-size: 1.1rem;
}
.wincards {
    background: #241f64;
    color: #fff;
    border: 1px solid #3d31c4;
    font-size: 1rem;
    padding: 3px 5px;
    text-align: center;
    text-decoration: none;
}
.winamt {
    font-size: 48px;
    color: #0c5e14;
}
.msgtext {
    color: #0057e6;
    font-size: clamp(1.2rem, 2vw, 7.875rem);
    text-align: center;
    min-height: 72px;
    display: inline-flex;
    align-items: center;
}
.font-wc {
    font-size: clamp(0.6rem, 1vw, 0.67rem);
    white-space: nowrap;
}
.collect-btn {
    font-size: 1rem;
    padding: 0.3em 0.75em;
}
.threedots {
    background: #ffffff4f;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 0 0.7rem;
    font-size: 1rem;
}
.removeRecharge {
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 0;
    top: 0;
    background: #0057e6;
    border: 1px solid #0057e6;
    padding: 5px;
    line-height: 0;
    height: 25px;
    width: 25px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 0 4px;
    z-index: 1;
}
.rechargePanel {
    position: relative;
    padding: 15px;
    border-radius: 5px;
    background-color: #b3cbf2;
    color: #000000;
    border: 2px solid #0057e6;
    z-index: 1;
}
.rechargePanel:before {
    content: "";
    position: absolute;
    left: 10px;
    top: -20px;
    width: 20px;
    height: 20px;
    border-bottom: solid 12px #0057e6;
    border-left: solid 12px transparent;
    border-right: solid 12px transparent;
    z-index: -1;
    transition: 0.6s;
}

.result-text-font {
    font-size: 1.2rem;
}
#checkPurchasedWinningForm .btn-effect-primary {
    border: 2px solid #dc9515;
    padding: 0.5em 0.75em;
}

@media print {
    /* body * {
        visibility: hidden;
    } */

    /* #printSummary, #printSummary * {
        visibility: visible;
    } */

    /* Remove unnecessary elements */
    /* header, footer, nav, button, .middle-section, .top-section {
        display: none;
    } */

    /* Set a small, readable font for thermal paper */
    body {
        font-family: Arial, sans-serif;
        font-size: 10px;
        margin: 0;
        padding: 0;
    }

    /* Ensure the content is aligned properly */
    .print-summary {
        width: 58mm; /* Adjust for your thermal printer's width (58mm, 80mm, etc.) */
        text-align: left;
    }

    .cardlist li {
        font-size: 11px !important;
        margin-right: 2px !important;
    }

    /* Format text */
    h1,
    h2,
    h3 {
        font-size: 12px;
        font-weight: bold;
    }

    /* Bold important sections */
    .bold {
        font-weight: bold;
    }

    /* Dotted line separator */
    .dashed {
        border-top: 1px dashed black;
        margin: 5px 0;
    }
}
/* Start New Game Animation */
.flip {
    backface-visibility: visible !important;
    animation: flip 1.5s ease 1;
    --delay: 0s;
    animation-delay: var(--delay);
}
@keyframes flip {
    from,
    to {
        border: 1px solid #675aff;
        box-shadow: 0 0 4px #fff;
    }
    0% {
        transform: perspective(800px) rotateY(0);
    }
    40% {
        transform: perspective(800px) translateZ(100px) rotateY(170deg)
            scale(0.7);
    }
    50% {
        transform: perspective(800px) translateZ(100px) rotateY(190deg)
            scale(0.75);
    }
    80% {
        transform: perspective(800px) rotateY(360deg) scale(0.8);
    }
    100% {
        transform: perspective(800px) scale(1);
    }
}
.flip:nth-child(1) {
    --delay: 0s;
}
.flip:nth-child(2) {
    --delay: 0.2s;
}
.flip:nth-child(3) {
    --delay: 0.4s;
}
.flip:nth-child(4) {
    --delay: 0.6s;
}

.wobble {
    animation: wobble 2s ease-in-out 1;
}

@keyframes wobble {
    from,
    to {
        border: 1px solid #675aff;
        box-shadow: 0 0 4px #fff;
    }
    0% {
        transform: perspective(600px) rotateX(0) rotateY(0);
        opacity: 0;
    }
    15% {
        transform: perspective(600px) rotateX(10deg) rotateY(-10deg) scale(1.06);
        opacity: 0.2;
    }
    30% {
        transform: perspective(600px) rotateX(-10deg) rotateY(10deg) scale(0.96);
        opacity: 0.5;
    }
    45% {
        transform: perspective(600px) rotateX(5deg) rotateY(-5deg) scale(1.03);
        opacity: 0.8;
    }
    60% {
        transform: perspective(600px) rotateX(-5deg) rotateY(5deg) scale(1);
        opacity: 0.9;
    }
    75% {
        transform: perspective(600px) rotateX(3deg) rotateY(-3deg) scale(1.02);
        opacity: 1;
    }
    100% {
        transform: perspective(600px) rotateX(0) rotateY(0) scale(1);
        opacity: 1;
    }
}
.games-not-available h3 {
    color: #373394;
    padding: 5rem 0;
}
form .error {
    width: 100%;
    color: #dc3545;
    font-weight: normal;
}

.error-title {
    font-size: clamp(1.5rem, 2vw, 3rem);
    text-shadow: 2px 3px 3px #0000004a;
    font-weight: 600;
    color: #2a3548;
}
.error-subtitle {
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 600;
    color: #2a3548;
}
.flame-winning-cards{
    display: flex;
    flex-direction: column;
    width: max-content;
}
.group-winning-cards span{
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
}
.card-grp{
    background-color: #ffffff;
    border-radius: 3px;
    padding: .2rem .1rem;
    font-size: clamp(.75rem, 2vw, 1rem);
    border: 2px solid #6a6868;
    font-weight: 600;
    text-align: center;
    margin-top: 9px;
    border-radius: 5px;
}
 .wins-grp {    
    position: relative;   
}
.wins-grp .card-grp{
    background: linear-gradient(to left, #B98018, #D9A82D, #CB7D08);
    color: white;
    border-color: #D7BF5E;
}
.wins-grp img {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 60%;
    object-fit: contain;
    object-position: center;
    z-index: -1;
}
/* tablets and smaller) */
@media (width: 1024px) {
    .footervisible {
        display: block;
    }
    .button-container .wincards {
        font-size: 0.785rem;
    }
    .top-section #liveTimeStamp {
        display: none;
    }
    .all-resultsection .result-summary .cards,
    .all-resultsection .card-baord .row:nth-last-child(2) .cards {
        aspect-ratio: 2.7 / 3.5;
        border-radius: 2px;
        padding: 2px 3px;
    }
    .all-resultsection .revealed-number {
        width: clamp(70%, 3vh + 2rem, 100%);
        height: clamp(25px, 3vh + 2rem, 35px);
    }
    .timestamp {
        width: 117%;
    }
    .all-resultsection .timestamp span {
        font-size: clamp(0.3rem, 1vw, 0.457em);
        line-height: 1;
        left: 2px;
    }
    .all-resultsection .right-float h2 {
        font-size: clamp(0.56rem, 2vw, 0.6rem);
    }
    .card-availability {
        font-size: clamp(0.78rem, 2vw, 0.86rem);
    }
    #snapSection .new-card-game .result-declared .selected-amount {
        width: 80%;
        top: -11px;
        position: relative;
    }
    #snapSection .new-card-game .card-icons,
    #snapSection
        .new-card-game.card-baord
        .row:nth-last-child(2)
        .cards
        .card-icons {
        padding: 0;
    }
    #snapSection
        .card-baord
        .row:nth-last-child(2)
        .result-declared
        .show-selected-amount {
        margin: 0 auto;
    }
    .card-grp {
        font-size: clamp(.75rem, 2vw, .95rem);
    }
}
@media (width: 320px) {
    .all-resultsection .row-col-sum {
        font-size: clamp(0.35rem, 1vw, 0.75rem);
    }
    .all-resultsection .revealed-number {
        width: clamp(100%, 3vh + 2rem, 80%);
        height: clamp(75px, 3vh + 2rem, 35px);
    }
    .all-resultsection .result-summary .cards,
    .all-resultsection .card-baord .row:nth-last-child(2) .cards {
        aspect-ratio: 2.8 / 3.5;
    }
    .game-title {
        border-radius: 3px;
    }
    .all-resultsection .right-float h2 {
        font-size: clamp(0.5rem, 2vw, 0.7rem);
    }
    .new-card-game .refresh-btn {
        font-size: 11px;
        line-height: normal;
        min-height: auto;
    }
    .margin-top-refresh {
        margin-top: -30px;
    }
    #snapSection .new-card-game .result-declared .selected-amount {
        height: clamp(3rem, 10vw, 4rem);
        position: relative;
        top: -11px;
        width: 90%;
    }
    #snapSection
        .card-baord
        .row:nth-last-child(2)
        .result-declared
        .show-selected-amount {
        margin: 0 auto;
    }
    #snapSection
        .new-card-game.card-baord
        .row:nth-last-child(2)
        .cards
        .card-icons {
        padding: 0;
    }
    .new-card-game .card-icons,
    .new-card-game.card-baord .row:nth-last-child(2) .cards .card-icons {
        padding: 15px 0 20px 0;
    }
    #gameResultModal .new-card-game .revealed-number {
        top: -8px;
        align-content: flex-end;
    }
    #gameResultModal .revealed-number {
        width: 90%;
        margin: -4px auto -8px;
    }
    #gameResultModal .rsltscard-icons {
        width: 16px;
    }
    .card-grp {
        font-size: clamp(.67rem, 2vw, 1rem);
    }
}
img[alt="backarrow"] {
    width: 27px;
    height: 27px;
    cursor: pointer;
}
#gameResultModal .new-card-game .revealed-number span {
    top: 75%;
    transform: translateY(-60%);
}

/* Overlay Styling */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(0, 0, 0, 0.5); */
    z-index: 10;
    display: none; /* Hidden by default */
}

/* Positioning relative to contain the overlay */
.select-card-container {
    position: relative;
}
.check-winning-inline-modal {
    position: relative;
    padding: 15px;
    border-radius: 5px;
    background-color: #b3cbf2;
    color: #000000;
    border: 2px solid #0057e6;
    z-index: 1;
}
.check-winning-inline-modal::before {
    content: "";
    position: absolute;
    right: 20px;
    top: -20px;
    width: 20px;
    height: 20px;
    border-bottom: solid 12px #0057e6;
    border-left: solid 12px transparent;
    border-right: solid 12px transparent;
    z-index: -1;
    transition: 0.6s;
}
.check-winning-inline-modal-close-btn {
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 0;
    top: 0;
    background: #0057e6;
    border: 1px solid #0057e6;
    padding: 5px;
    line-height: 0;
    height: 25px;
    width: 25px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 0 4px;
    z-index: 1;
}
.check-winning-container {
    margin-top: 15px;
}
.check-winning-container .msgtext {
    font-size: clamp(1.2rem, 1.8vw, 7.875rem);
}
@media (width: 1280px) {
    #snapSection .new-card-game .result-declared .selected-amount {
        margin: -7px auto;
    }
    #snapSection .new-card-game .card-icons,
    #snapSection
        .new-card-game.card-baord
        .row:nth-last-child(2)
        .cards
        .card-icons {
        padding: 0;
        transform: translateY(10px);
    }
    .all-resultsection .result-summary .cards,
    .all-resultsection .card-baord .row:nth-last-child(2) .cards {
        aspect-ratio: 2.9 / 3.5;
    }
    .all-resultsection .revealed-number {
        width: clamp(70%, 3vh + 2rem, 90%);
    }
    .all-resultsection .revealed-number span {
        font-size: 0.6rem;
    }
}

@media screen and (max-width: 992px) and (min-width: 320px) {
    .timestamp-pos-left {
        left: 2px;
        margin-top: -47px;
    }
    #navbarOffcanvasLg .navbar-nav {
        height: 73%;
    }
    .bazi-logo img{
        width: 130px;
    }
    .show-tickets {
        border-color: #2a154a;
        margin: 10px 0;
    }
    .show-tickets h3{
        font-size: .9rem !important;
    }
    .show-tickets img{
        width: 20px;
    }
    .search-player {
        padding: 0;
        background: transparent;
        border: none;
    }
    .search-player .form-control {
        background: #241f64;
        color: #fff;
        border: 2px solid #3d31c4;
    }
    .search-player .form-control::placeholder {
        color: #fff;
    }
    .search-player,
    .search-player label,
    .search-player .dropdown-icon {
        color: #fff;
    }
    .search-player .dropdown {
        border: 1px solid #3d31c4;
        background: #241f64;
    }
    .cardlist{
        margin: 5px 0 !important;
    }
    .cardlist li {
        font-size: .85rem;
        min-width: 40px;
    }
    .total {
        font-size: .9rem;
    }
    #onlylivegame .new-card-game .cards .wrap{
       display: flex;
    }
    #onlylivegame .new-card-game.card-baord .selected-prize .wrap, #onlylivegame .new-card-game .purchase-card .wrap {
        display: block;
    }
}

/* All Result Games */
.sidebar-logo {
    background-color: #2a3548;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .sidebar-logo .bazi-logo{
      transform:rotate(90deg) translate(0%, 0%) scale(1.5);
      transform-origin: center center;
  }
  .main-content {
    padding: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 10px;
  }
  .row-block {
    flex: 1;
    display: flex;
    gap: 10px;
  }
  .card-block {
    flex: 1;
    display: flex;
    height: 100%;
    overflow: hidden;
    background: #9DBCEE;
      box-shadow: 0px 3px 6px #00000029;
  }
  .card-image {
      width: 80px;
      /* border-radius: 0 12px 12px 0; */
      border-radius: 12px 0 0 12px;
      margin-left: 3px;
      background-size: cover;
      background-repeat: no-repeat;
      overflow: hidden;
  }
  .card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
  }
  .card-content {
      flex: 1;
      overflow: hidden;
      display: flex;
      height: 100%;
      width: 100%;
      justify-content: end;
  }
  .data-values {
      writing-mode: vertical-rl;
      /* transform: rotate(180deg); */
      transform: rotate(0deg);
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #2B2B4E;
      font-weight: 700;
      font-size: 1.2rem;
      background-color: #b3cef4;
      border: 1px solid #9DBCEE;
}
.data-values span {
  height: 100%;
  width: 100%;
  padding: .5rem .35rem;
}
.data-values span:nth-child(2) {
  text-align: center;
  background-color: #c4dbf8;
}

.hightlight-row span{
  background: #FFE032;
}
.hightlight-row span:nth-child(2){
  background: #ffeb94;
}


#partnerRechargeForm .error{
    font-size: 14px;
}
.bg-section-dark-new {
    background: #92b4ec;
    /* min-height: 90vh; */
    position: relative;
    z-index: 1;
}

/* All game preview */
.grid-container-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 100vh;
    width: 100vw;
    gap: 2px;
    /* background-color: #ffe030; */
}
.grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #0e0a3b;
    /* border-radius: 6px; */
    /* box-shadow: 0px 3px 6px #00000029; */
}
/* .grid-item:nth-child(1){
    border-top-left-radius: 0;
}
.grid-item:nth-child(2){
    border-top-right-radius: 0;
}
.grid-item:nth-child(3){
    border-bottom-left-radius: 0;
}
.grid-item:nth-child(4){
    border-bottom-right-radius: 0;
} */
.portrait-frame {
    width: 100vh;
    height: 100vw;
    border: none;
    transform: rotate(-90deg) scale(.58);
    transform-origin: center center;
    border:none;
}
.main-layout {
    display: flex;
    height: 100vh;
    width: 100vw;
}
.vlogo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0e0a3b;
    width: 70px;
    overflow: hidden;
    /* border-right: 2px solid #ffe030;
    padding-right: 4px; */
} 
.vlogo img {
    width: 160px;
    height: auto;
    transform: rotate(-90deg) scale(3);
    transform-origin: center center;
    z-index: 1;
}

.cards{
    z-index: 1;
}
.light-red::before{ 
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: #ff0000;
    opacity: .4;
}
.light-green::before{ 
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: #00ff00;
    opacity: .4; 
}
.light-yellow::before{ 
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1; 
    background: #ffff00;
    opacity: .4; 
}

.add-to-cart-card.light-green::before, .add-to-cart-card.light-red::before, .add-to-cart-card.light-yellow::before,
.selected-card.light-green::before, .selected-card.light-red::before, .selected-card.light-yellow::before{
    background: transparent;
    opacity: 1;
}
.footervisible {
    display: block;
}
#partnerRechargeForm .form-control, .form-control:focus {
    height: 39px;
}

.btn-fullscreen, .btn-primary-login{
    background: #ffd24c;
    border: none;
    color: #000;
    text-align: center;
    font-weight: 600;
    padding: .2rem .5rem;
    border-radius: 4px;
}
.btn-fullscreen:hover, .btn-fullscreen:active,
.btn-primary-login:hover, .btn-primary-login:active{
    background: #feba2e !important;
}
.btn-fullscreen:disabled{
    background: #ffd24c !important;
    color: #000 !important;
    cursor: not-allowed !important;
}
.win-card-flame span.text-white:first-child, 
.swiper-slide .winning-cards span:first-child, 
.result-win-card-flame span:first-child,
.winning-cards.group-winning-cards span:first-child {
    color: #EAB11C !important;
    font-style: italic;
    font-weight: 700 !important;
}
.win-card-flame span.text-white:first-child, 
.swiper-slide .winning-cards span:first-child, 
.winning-cards.group-winning-cards span:first-child{
    font-size: 1rem;
}
.partner-scanned-receipt-container .win-amount{
    color: #0c5e14;
    font-weight: bold;
}
.partner-scanned-receipt-container .win-message{
    color: #0057e6;
    font-weight: bold;
}
.highlight-text {
    color: #EAB11C;
}
.row-col-sum-bg{
    background-color: #3d31c4;
}
.zoom-text-animation {
    display: inline-block;
    animation: cardsumscale 0.9s ease-out 3;
    animation-fill-mode: both;
}
/* CardStack Effect */
.card-stack-effect {
  position: relative;
  margin-bottom: 5px;
}
.card-stack-effect:before, .card-stack-effect:after {
    content: "";
    height: 100%;
    position: absolute;
    z-index: -1;
    border-radius: 5px;
    left: 0;
}
.card-stack-effect:before {
    background: #ffffff66;
    top: -2.5px;
    border-top: 1px solid #d2d2d2;
    width: 100%;
    box-shadow: 0 -1px 0px -1px #ffffff66;
}
.card-stack-effect:after {
    background: #ffffff66;
    top: -5px;
    border-top: 1px solid #d2d2d2;
    width: 99%;
    box-shadow: 0 -2px 0px -1px #ffffff66;
}
.nonplayable-board{
    min-height: 523px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}