input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    /* Makes it white on dark backgrounds */
    opacity: 1;
}

.green_player {
    display: none;
}

.accordion-button {
    font-size: 0.9rem;
}

.fa-eye,
.fa-eye-slash {
    color: #726f6f !important;
}

.accordion-body {
    background: #f9f9f9;
    font-size: 0.85rem;
}

/* Optional: Improve alignment and spacing of title/data */
.dtr-details {
    display: block !important;
}

table.dataTable>tbody>tr.child ul.dtr-details>li {
    border-bottom: 1px solid var(--light-grey);
    display: flex;
}

table.dataTable>tbody>tr.child span.dtr-title {
    min-width: 125px;
}

.child td {
    padding: 0px 12px !important;
}

.child td li {
    padding: 12px 0 !important;
}

.h1-custom {
    font-size: 5pc !important;
}

.img-primary {
    height: 180px;
}

#game_table_section .img-primary {
    height: 120px;
}

.img-icon {
    height: 30px;
}

#game_image_section_laptop .img-icon,
#game_image_section_mobile .img-icon {
    height: 60px;
}

#createdGamesCarouselDesktop .img-icon,
#createdGamesCarouselMobile .img-icon {
    height: 40px;
}

.img-sm {
    height: 20px;
}

.img-md {
    height: 200px;
}

.img-lg {
    height: 370px;
}

.status-img {
    height: 150px;
}

.logo-image {
    height: 45px;
}

.logo-image-sm {
    height: 35px;
}

.icon-sm {
    height: 25px;
}

.sidebar-profile {
    height: 50px;
}

.square-image {
    height: 50px;
    max-width: 50px;
}

.section-divider {
    height: .75px;
    background: linear-gradient(to right, #00000000, var(--third-color), #00000000);
    border: none;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50px;
    opacity: 0.65;
}

.prime-card {
    max-width: 400px;
}

.form-control::placeholder {
    color: var(--third-color) !important;
}

.fs-primary,
label {
    font-size: var(--fs-primary) !important;
}

.fs-secondary {
    font-size: 13px !important;
}

.form-control,
.form-select {
    padding: 10px !important;
}

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

/* Smooth hover lift effect */
.hover-zoom-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

.hover-zoom-lift:hover {
    transform: scale(1.02) translateY(-2px);
    color: var(--secondary-color);
}


.btn-primary {
    background: var(--secondary-color);
    color: var(--primary-color);
    border-color: var(--secondary-color);
    transition: all 0.3s ease-in-out;
    /* Smooth transition */
}

.btn-primary:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
    border-color: var(--secondary-color-opacity);
}

.btn-secondary {
    background: var(--primary-color);
    color: var(--secondary-color);
    border-color: var(--secondary-color-opacity);
    transition: all 0.3s ease-in-out;
    /* Smooth transition */
}

.btn-secondary:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
    border-color: var(--secondary-color-opacity);
}

.form-check-input:checked {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color-opacity);
}

.form-check-input:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}

.bg-img {
    background-size: 20%, 20% !important;
    background-repeat: no-repeat, no-repeat;
    /* background-position: top right, bottom left; */
    background-position: top right calc(-12% + 10px), bottom left calc(-7% + 10px);
    background-size: auto;
}

form .text-danger,
form .text-success {
    font-size: 10px;
}

.fa-eye,
.fa-eye-slash {
    font-size: 11px;
}

.custom-select-icon {
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem 1rem !important;
    padding-right: 2.5rem !important;
    /* Make room for the icon */
    appearance: none !important;
    /* Hide default arrow (modern browsers) */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.btn:focus-visible {
    background-color: var(--third-color) !important;
    border-color: var(--third-color) !important;
    box-shadow: none !important;
    color: var(--primary-color) !important;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: var(--primary-color) !important;
    background-color: var(--third-color) !important;
    border-color: var(--third-color) !important;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    color: var(--primary-color) !important;
    background-color: var(--third-color) !important;
    border-color: var(--third-color) !important;
}

.alert-danger {
    z-index: 9998;
    max-width: 450px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    border-bottom-right-radius: 50Px;
    border-top-left-radius: 50Px;
    position: fixed !important;
    --bs-alert-color: var(--primary-color) !important;
    --bs-alert-bg: var(--danger-color) !important;
    --bs-alert-border-color: var(--danger-color) !important;
    --bs-alert-link-color: var(--primary-color) !important;
    padding: 1pc 2pc;
    margin-top: 1rem;
    font-weight: 600;
}

.alert-success {
    z-index: 9998;
    max-width: 450px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    border-bottom-right-radius: 50Px;
    border-top-left-radius: 50Px;
    position: fixed !important;
    --bs-alert-color: var(--primary-color) !important;
    --bs-alert-bg: var(--success-color) !important;
    --bs-alert-border-color: var(--success-color) !important;
    --bs-alert-link-color: var(--primary-color) !important;
    padding: 1pc 2pc;
    margin-top: 1rem;
    font-weight: 600;
}

.alert-danger.show,
.alert-success.show {
    opacity: 1;
    transform: translateY(0);
}

.fs-sm {
    font-size: 10px;
}

.bg-dark {
    background-color: var(--primary-color) !important;
}

.b-radius-sm {
    border-radius: var(--b-radius-sm);
}

.bg-grey {
    background: #1a1c12 !important;
}

.bg-grey-new {
    /* background: #3b3d2b !important; */
    background: #3c3c3c !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--primary-color);
    background-color: var(--secondary-color);
}

.nav-pills .nav-link {
    color: var(--third-color);
}

.navbar .translate-middle {
    transform: translate(-100%, -10%) !important;
}

.img-lg {
    height: 300px;
}

.img-md-2 {
    height: 45px;
}

.img-md-3 {
    height: 230px;
}

.img-profile {
    height: 75px;
    width: 75px;
}

.bg-alter {
    background: #1F2213;
    background: radial-gradient(circle, rgba(31, 34, 19, 1) 0%, rgba(15, 15, 15, 1) 100%);
}

.bg-img-sm {
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: calc(-3% - 12px) top,
        center calc(134% + 10px),
        calc(104% + 10px) center;
    background-size: 10%, 10%, 10%;
}

.bg-img-sm-new {
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: calc(10% - 12px) calc(128% - 10px),
        /* move 1st image further down */
        center calc(-17% + 9px),
        /* move 2nd image further up */
        calc(81% + 10px) calc(160% - 5px);
    background-size: 11%, 8%, 14%;
}

.bg-alter-new {
    background-repeat: no-repeat, no-repeat;
    background-position: -106px -101px, calc(102% + 111px) calc(64% + 54px);
    background-size: 37%, 39%;
}

.sidebar-menu {
    backdrop-filter: none;
    /* Default state without blur */
    -webkit-backdrop-filter: none;
    /* Safari support */
    background-color: rgba(0, 0, 0, 0.1);
    /* Transparent background */
    width: 100%;
    height: 100%;
    border: none !important;
    box-shadow: none !important;
}

/* Apply blur effect when the sidebar is open (using Bootstrap's .show class for active sidebar) */
.sidebar-menu.show,
.offcanvas-body,
.chat-box-style {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgb(0 0 0 / 25%);
}

.border-secondary-outline {
    border-left: 1px solid var(--secondary-color-opacity) !important;
}

.border-secondary-outline-all {
    border: 1px solid var(--secondary-color-opacity) !important;
}

.sidebar-item {
    position: relative;
    padding: 10px 15px;
    border-radius: 2px;
    color: #1b1b1b;
    background-color: transparent;
    border: 1px solid transparent;
    transition: all 0.3s ease-in-out;
}

.sidebar-item.active {
    background-color: #DCFD34 !important;
    /* Full yellow background */
    color: #000 !important;
    /* Black text */
    border-radius: 8px !important;
}

.sidebar-item:hover {
    color: #DCFD34 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    background: linear-gradient(181deg, rgb(41 39 39) 0%, rgba(0, 0, 0, 1) 100%);
}

.sidebar-item.active:hover {
    color: #000 !important;
}

.sidebar-item:hover img.icon {
    filter: brightness(0) saturate(107%) invert(57%) sepia(68%) saturate(637%) hue-rotate(33deg) brightness(118%) contrast(99%);
    /* transition: 0.3s ease-in-out; */
}

.sidebar-item.active img.icon,
.sidebar-item.active .arrow img {
    filter: brightness(0) !important;
    /* Makes black icons turn white */
}

.sidebar-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 4px;
    background-color: transparent;
    border-radius: 4px;
    transition: background-color 0.3s ease-in-out;
}

.sidebar-item:hover::before,
.sidebar-item.active::before {
    background-color: #DCFD34 !important;
}

.arrow-icon {
    display: none;
    /* Hide the arrow by default */
}

.sidebar-item.active .arrow-icon {
    display: inline-block !important;
    filter: brightness(0) saturate(100%);
    /* Show the arrow when the item is active or hovered */
}

.sidebar-item:hover .arrow-icon {
    display: inline-block !important;
}

.fs-head {
    font-size: 20px;
}

.grey-text {
    color: #8a8e96;
}

.box-gradient-light {
    background: #0E0E0E;
    background: linear-gradient(181deg, #191919 0%, #000000 100%);
    /* background-size: 25% !important; */
    background-repeat: no-repeat;
    background-position: bottom right;
    /* background-position: top right calc(-12% + 10px), bottom left calc(-7% + 10px); */
    background-size: auto;
}

.box-gradient {
    background: #0E0E0E;
    background: linear-gradient(181deg, var(--main-gradien-one) 0%, var(--main-gradien-two) 100%);
}

.box-gradient-normal {
    background: #0E0E0E;
}

.bg-image-align {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 0px;
    background-size: 14%;
    background-repeat: no-repeat;
    background-position: bottom right;
}

.online-dot {
    background-color: #1f0;
    /* Bright green */
    height: 7px;
    width: 7px;
    border-radius: 50%;
    display: inline-block;
}

.profile-align {
    margin-top: 20%;
}

.arrow {
    display: none;
    /* Hide the arrow by default */
}

.sidebar-item.active .arrow,
.sidebar-item:hover .arrow {
    display: inline-block !important;
    /* Show the arrow when the item is active or hovered */
}

.performer-box {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 12px;
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: bottom right;
}


.b-radius-new {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 12px;
}

.performer-box-new {
    background-repeat: no-repeat;
    background-position: bottom right;
}

#game_table_section .performer-box {
    background-size: 10%;
}

#admin_game_creation_section .performer-box {
    background-size: 10% !important;
}

.custom-select {
    max-width: 400px;
}

.table th,
.table tr {
    color: var(--primary-color) !important;
}

.dataTables_info,
.dataTables_paginate {
    font-size: var(--fs-primary) !important;
}

.table th {
    opacity: 0.75 !important;
    background-color: transparent !important;
    font-weight: 400 !important;
}

table.dataTable>thead>tr>th,
table.dataTable>thead>tr>td {
    border-bottom: 1px solid var(--light-grey);
}

table.dataTable tbody th,
table.dataTable tbody td {
    padding: 16px 10px;
}

.table>:not(caption)>*>* {
    color: var(--third-color) !important;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: transparent !important;
}

.table-striped>tbody>tr:nth-of-type(even)>* {
    background-color: #1a1c12 !important;
}

.paginate_button {
    border: 1px solid var(--light-grey) !important;
}

.paginate_button .current {
    background: var(--secondary-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--primary-color) !important;
    background-color: var(--secondary-color) !important;
}

.table {
    vertical-align: middle !important;
}

.nav-pills {
    position: relative;
}


.down-arrow .nav-link {
    position: relative;
}

.down-arrow .nav-link::after {
    content: none;
}

.down-arrow .nav-link.active::after {
    content: "";
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: 17px solid #DCFD34;
}

.chat-notification-badge {
    clip-path: circle();
    position: absolute;
    right: -15px;
    bottom: 10px;
}

.green-dot,
.red-dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
}

.green-dot {
    background-color: #28a745;
}

.text-online {
    color: #28a745;
}

.red-dot {
    background-color: #dc3545;
}

.text-offline {
    color: #dc3545;
}

.gradient-text {
    background: linear-gradient(to bottom, #a3bc25, #424d0c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* For newer browsers */
    background-clip: text;
    color: transparent;
}

.gradient-text-light {
    background: linear-gradient(to bottom, #e1e1e0 30%, #4f4f4f 70%);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
    color: transparent;

    /* Text stroke */
    -webkit-text-stroke: .5px #ffffff35;
    /* text-stroke: .5px #ffffff35; */
    /* Non-prefixed version (limited support) */
}


.chat-box-style {
    display: none;
    position: fixed;
    right: 0;
    top: 0;
    width: 350px;
    height: 100%;
    border-left: 1px solid var(--secondary-color-opacity);
    z-index: 10000;
    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.1);
}

.close-chat {
    float: right;
    border: none;
    background: none;
}

.chat-messages {
    padding: 10px;
    height: 70%;
    overflow-y: auto;
}

.offcanvas-body,
.chat-messages,
.support-chat {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
}

.offcanvas-body::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.x-level-btn.active {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.button-arrow {
    width: 16px;
    position: relative;
    left: 30%;
}

.custom-file-input {
    background-color: black;
    color: gray;
    border: none;
    padding: 6px 8px;
    border-radius: var(--b-radius-sm);
    font-family: var(--font-primary);
    width: 100%;
}

.custom-file-input::file-selector-button {
    background-color: #2e2e2e;
    color: gray;
    border: none;
    padding: 6px 8px;
    border-radius: var(--b-radius-sm);
    font-family: var(--font-primary);
    cursor: pointer;
}

.social-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.achievement-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.profile-image {
    height: 100px;
    width: 100px;
    object-fit: cover;
    clip-path: circle();
}

.achievement-icon-container {
    /* background-color: #FDFFD8; */
    min-height: 80px;
}

.modal-header {
    border-bottom: none !important;
}

.card-header {
    border-bottom: 1px solid #cbc7c74d;
}

.payment_img {
    height: 17px;
}

.form-check-input {
    --bs-form-check-bg: transparent;
    width: .75rem;
    height: .75rem;
    border: var(--bs-border-width) solid #cbc7c74d;
}

.form-check-input:checked {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color-opacity);
}

.form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("") !important;
}

.list-group-item {
    color: var(--third-color) !important;
}

.list-group {
    --bs-list-group-bg: #0E0E0E;
    --bs-list-group-border-color: #cbc7c74d;
}

.cursor-pointer {
    cursor: pointer !important;
}

.qr-image {
    height: 130px;
}

.box-height {
    min-height: 480px;
}

.custom-close {
    right: 4%;
    position: absolute;
}

.sidebar-item.active,
.sidebar-item.active:hover {
    pointer-events: none !important;
}

.top-sprkle {
    position: absolute;
    top: -25px;
    left: 14%;
}

.bottom-sprkle {
    position: absolute;
    bottom: -25px;
    right: 14%;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.sparkle-icon {
    animation: blink 2s infinite ease-in-out;
}

.sparkle-ico {
    height: 50px;
}

#BonusMessageModal .modal-footer {
    border-top: none;
}

.top-sprkle-sm {
    position: absolute;
    top: 22%;
    right: 13%;
}

.bottom-sprkle-sm {
    position: absolute;
    bottom: 36%;
    left: 12%;
}

.support-chat {
    max-height: 600px;
    height: 240px;
    overflow-y: auto;
}

.bg-grey-primary {
    background: #1a1a1a;
}

.chat-width {
    max-width: 50%;
}

.btn-padding {
    padding: 10px 5%;
}

.fs-1-custom {
    font-size: 4pc;
}

.spinner-image {
    height: 50px;
    animation: spin .6s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000000;
    background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(48, 51, 36, 1) 100%);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
}

#page-loader.hide {
    opacity: 0;
    visibility: hidden;
}

#play-zone-section table.dataTable>thead>tr>th,
#play-zone-section table.dataTable>thead>tr>td,
#notification-section table.dataTable>thead>tr>th,
#notification-section table.dataTable>thead>tr>td {
    border-bottom: 0px solid var(--light-grey);
}

#play-zone-section thead {
    height: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
}

.online-offline-img {
    height: 32px;
}

.arrow-sm {
    height: 24px;
}

.arrow-sm {
    transition: filter 0.3s ease-in-out;
    filter: none;
    /* or your default style */
}

/* .btn:hover .arrow-sm {
    filter: brightness(0) saturate(100%) invert(88%) sepia(96%) saturate(477%) hue-rotate(23deg) brightness(101%) contrast(97%);
} */

.proof-img {
    height: 150px;
}

.trans-img {
    height: 200px;
}

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

.form-floating>.form-control-plaintext:focus,
.form-floating>.form-control-plaintext:not(:placeholder-shown),
.form-floating>.form-control:focus,
.form-floating>.form-control:not(:placeholder-shown) {
    padding-top: .625rem !important;
}

.mew-modal {
    max-width: 850px;
}

.float-back {
    position: fixed;
    top: 85%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 1000;
}

.back-wrapper {
    animation: up-down 3s infinite ease-in-out;
    display: inline-block;
}

.back-img {
    height: 50px;
    transition: transform 0.3s ease-in-out;
}

.back-wrapper:hover {
    animation-play-state: paused;
    /* pause up-down on hover */
}

.back-wrapper:hover .back-img {
    transform: scale(1.1);
    /* apply zoom on image */
}

@keyframes up-down {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7.5px);
    }
}

.h-100-custom {
    height: 485px;
}

html {
    scroll-behavior: smooth;
}

#top_games_section {
    scroll-margin-top: 20vh;
}

.btn:hover img {
    filter: brightness(0) saturate(100%);
    transition: 0.3s ease-in-out;
}

.box-gradient-blur {
    background: #0e0e0e75;
}

.qr-align {
    bottom: -47px;
    right: 3%;
    width: 30vw;
    max-width: 126px;
    transform: translateY(-50%);
    z-index: 2;
    backdrop-filter: blur(12px);
}

.badge-img-size {
    height: 50px;
}

.badge-overlay {
    background: #000;
    padding: 10px;
    clip-path: circle();
    height: 40px;
    bottom: 15px;
    left: 55px;
    border-radius: 50%;
    position: absolute;
}

.badge-overlay-new {
    background: #000;
    padding: 10px;
    clip-path: circle();
    border-radius: 50%;
    bottom: -87%;
    right: -8px;
    height: 40px;
    z-index: 3;
}

#registration_form .form-check-input {
    margin-top: 2.5% !important;
}

.tutorial-img {
    display: none;
}

.tutorial-img-play {
    height: 40px;
}

.tutorial-bg-img {
    background-image: url('/images/icons/tutorial.png');
    background-repeat: no-repeat;
    background-size: 65%;
    background-position: right -45px top 10px;
}

.video-column,
.tutorial-img-play {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

.video-column:hover {
    transform: scale(1.02) translateY(-2px);
    /* Slight grow & lift */
    color: var(--secondary-color);
    /* Optional text/icon color change */
    cursor: pointer !important;
}

.video-column:hover .tutorial-img-play {
    transform: scale(1.5);
    /* Stronger lift on image */
    color: var(--secondary-color);
}

.dtr-data {
    text-wrap: auto !important;
}

.border-top-curve {
    border-top-left-radius: var(--b-radius);
    border-top-right-radius: var(--b-radius);
}

.wrap-txt {
    text-wrap: nowrap;
    overflow-x: hidden;
}

.bg-secondary-gradient {
    background: #b3cf15;
    background: linear-gradient(151deg, rgb(219 255 16) 0%, rgba(179, 207, 21, 1) 46%, rgba(91, 102, 31, 1) 100%);
}