/* ================definition section start================*/
@font-face {
    font-family: "Poppins";
    src: url(../assets/fonts/Poppins-Regular.ttf);
}

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

:root {
    --primary: #713f12;
    --main-color: #030b1a;
    --primary-btn-color: #b67b00;
    --primary-btn-hover: #d49203;
    --error-color: rgb(255, 1, 1);
    --lightsky: #c5dbff;
    --lightsky: #c5dbff;
    --white: #fff;
    --light-gray: rgba(255, 255, 255, 0.527);
    --input-field-gray: #9ea2ae;
    --dark-gray: #161313;
    --blue: #0095ff;
    --yellow-light: #b67b00;
    --yellow-lighter: #d49203;
    --green: rgb(1, 155, 1);
}

a {
    color: inherit;
    font-size: inherit;
    text-decoration: none !important;
}

body {
    font-family: "Poppins", sans-serif;
    margin: 0;
}

.fs-sm {
    font-size: .8rem;
}

.fs-xsm {
    font-size: .5rem;
}

.text-main {
    color: var(--primary-btn-color)
}

.text-lightsky {
    color: var(--lightsky);
}

.cursor-pointer {
    cursor: pointer;
}

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

.bg-main {
    background-color: var(--main-color);
}

.modal-header-name {
    padding-left: 0;
}

.dashboard-user-section .btn-warning {
    --bs-btn-bg: var(--primary-btn-color) !important;
    border: none;
}

/*important styling*/
main.pb-3 {
    height: calc(100dvh - 136px);
}

.dashboard-page {
    height: 100% !important;
}
/*important styling*/


/* ================definition section end================*/




/* ============Login/forgot/reset styling start======== */

/* login loader */
.spinner-border {
    width: 1.5rem;
    height: 1.5rem;
}

.loader-container {
    right: 21%;
    top: 7%;
    visibility: hidden;
}

    .loader-container.active {
        right: 34%;
        top: 11%;
        visibility: visible;
    }
/* login loader */
.login-page.main-bg {
    background: url(../assets/image/login-bg.png);
    padding: 10px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: cover;
}

.login-page .form-bg {
    background-image: url(../assets/image/login-form.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-top: 30px;
    padding-bottom: 30px;
    min-width: 35%;
    max-width: 70%;
    width: auto;
    height: 500px;
}

.flex_Reset {
    display: flex;
    justify-content: center;
    align-items: center;
}

.backToLogin {
    position: absolute;
    margin-top: 10px;
    margin-left: 10px;
    color: white;
}


.login-page .form-body {
    padding: 0px 30px;
}

.login-page .login-title h2 {
    font-size: 1rem;
    font-weight: 300;
    color: rgb(255, 255, 255);
}

.login-page .login-btn, .login-btn:active {
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.25rem;
    text-align: center;
    background-color: var(--primary-btn-color) !important;
}

    .login-page .login-btn:hover {
        background-color: var(--primary-btn-hover);
    }

.login-page .forgot-link a:hover {
    color: var(--error-color);
}

.login-page .login-logo-image {
    max-width: 24%;
    margin: 0 auto;
}

.login-page .form-label, .login-page .forgot-link a {
    color: var(--white);
    font-weight: 200;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-decoration: none;
}

.login-page .form-body.form input {
    background-color: var(--input-field-gray) !important;
    border-color: var(--primary) !important;
    border-radius: 0.25rem !important;
    border: none;
}

.login-page form i {
    color: #000 !important;
    cursor: pointer;
}


.login-page .form-check-input:checked {
    background-color: transparent;
    border-color: var(--main-bg) !important;
}

.login-page .fortgot-description {
    font-weight: 200;
}

.login-page input:-webkit-autofill,
.login-page input:-webkit-autofill:hover,
.login-page input:-webkit-autofill:focus {
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px var(--input-field-gray) inset;
}

.change-pass .card {
    background-color: #030b1a;
}

.change-pass input {
    background-color: #ccd5ed;
}
/* ==============Login/forgot/reset styling end=================== */
/* ============== sidebar styling start =================== */
/* dropdown-arrow */
.dropdown-arrow {
    position: absolute;
    right: 6%;
    top: 14px;
}

.sidebar-menu > ul > li > a[aria-expanded="true"] + .dropdown-arrow {
    transform: rotate(90deg);
}

.sidebar-menu > ul > li > a[aria-expanded="false"] + .dropdown-arrow {
    transform: rotate(0deg);
}
/* dropdown-arrow */

/* toggle styling */
.toggle-tab:nth-of-type(1) {
    display: block;
}

.toggle-tab:nth-of-type(2) {
    display: none;
}

/* toggle styling */

.sidebar-close-btn {
    top: 1.5rem;
    right: 1.5rem;
}

.main-dashboard {
    width: 100%;
    height: 100vh;
    background: #f4f4f4;
    background: linear-gradient(transparent,black 80%),url(../assets/image/login-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.sidebar {
    background-color: var(--main-color);
    width: 250px;
    height: calc(100% - 1.2rem);
    color: #90b9ff;
    transition: all .2s ease-in-out;
    border: .3px solid #d3d3d347;
    font-size: 14px;
    overflow: auto
}

    .sidebar .nav-link {
        border: .3px solid transparent
    }

        .sidebar .nav-link.active, .sidebar .nav-link:hover {
            border: .3px solid #598dee7d;
            color: white;
        }

    .sidebar .collapse .nav-link:hover {
        border: .3px solid transparent;
        color: white;
    }

.collapse-span.active {
    color: var(--primary-btn-color) !important;
    border: none !important;
}

.sidebar-footer {
    flex-grow: 1;
    align-content: flex-end;
}

    .sidebar-footer .sidebar-card {
        background: linear-gradient(to right,black,rgb(2, 2, 105));
    }

.sidebar-footer-title {
    font-size: .8rem;
    color: #fff;
}

.sidebar-footer-content {
    font-size: .7rem;
    color: var(--primary-btn-color)
}

.sidebar.active {
    width: 75px;
    transition: all .2s ease-in-out;
}

.sidebar .nav-item a div {
    min-width: 12rem;
}

    .sidebar .nav-item a div span {
        transition: all .2s ease-in-out;
    }

.sidebar.active .nav-item a div span {
    visibility: hidden;
    transition: all .2s ease-in-out;
}

.sidebar-wrapper {
    display: none;
}

.sidebar-footer-content.active {
    display: none;
    transition: all .2s ease-in-out;
}

.sidebar-footer-content > div {
    min-width: 5rem;
}

.sidebar .collapse-span {
    min-width: 15rem;
}

.sidebar-menu .collapse.show {
    max-height: 38vh;
    overflow: auto;
}
/* Custom scrollbar styles */
::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px
    /* color of the scroll thumb */
}

    ::-webkit-scrollbar-thumb:hover {
        background: #555; /* color of the scroll thumb on hover */
    }
/* ============== sidebar styling end =================== */

/* ==========Profile styling start========= */
.user-admin.active input, .user-admin.active input.disabled {
    border: none;
    outline: none;
    background-color: transparent;
    color: white;
    padding-left: 0;
}

.user-admin input {
    color: #000;
    background-color: #9ea2ae;
    border: none;
}

    .user-admin input.disabled {
        background-color: #4f5157;
    }

.user-admin .inactive-radio {
    display: none;
}

.user-profile .profile-img-wrapper {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
}

.user-admin.general-info label {
    width: 45%;
}

.user-admin input {
    font-size: 15px;
}

.RegAreaform.change-pass input {
    border: 0px;
    color: #000;
}

    .RegAreaform.change-pass input:focus {
        background-color: #fff;
        color: #000;
    }
/* ==========Profile styling end=========== */
/* ============== dashboard main-content styling start ================= */
.dashboard-content {
    width: calc(100% - 250px);
    margin-left: 250px;
    transition: all .2s ease-in-out;
}

.dashboard-page {
    overflow: auto;
    overflow-x: hidden;
    padding-left: .5rem;
    padding-right: .5rem;
    height: calc(100% - 123px);
    padding-bottom: 50px;
}
    /* width scrollbar styling*/
    .dashboard-page::-webkit-scrollbar {
        width: 5px;
    }

    /* Track */
    .dashboard-page ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    /* Handle */
    .dashboard-page ::-webkit-scrollbar-thumb {
        background: #888;
    }

        /* Handle on hover */
        .dashboard-page ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }



.adminDashboard {
    overflow: auto;
    overflow-x: hidden;
    height: calc(100% - 123px);
    padding-bottom: 50px;
}
    /* width scrollbar styling*/
    .adminDashboard::-webkit-scrollbar {
        width: 4px;
    }

    /* Track */
    .adminDashboard ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    /* Handle */
    .adminDashboard ::-webkit-scrollbar-thumb {
        background: #888;
    }

        /* Handle on hover */
        .adminDashboard ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
/* width scrollbar styling end*/



.toggle-tab {
    font-size: 2.2rem;
    color: var(--primary-btn-color);
}

/* navigation bar */
.nav-search-box input, .nav-search-box input:active, .nav-search-box input:focus {
    background-color: var(--primary-btn-color);
}

    .nav-search-box input::placeholder {
        color: rgba(19, 15, 15, 0.685);
    }

.top-navbar {
    z-index: 2;
    background: #030b1a;
    padding: 1rem;
    border: .3px solid #d3d3d347;
    margin-bottom: 1rem;
}

    .top-navbar .language-btn > label {
        border: 0;
        padding: .4rem;
        display: inline-block;
    }

    .top-navbar .language-btn .btn-check:checked + .btn {
        background-color: #212936;
        border: 0;
        padding: .4rem;
    }

    .top-navbar .page-title h3 {
        color: white
    }


/* ========top navigation Styling ======= */
.top-nav-notification span {
    width: 2.5rem;
    aspect-ratio: 1/1;
    text-align: center;
    line-height: 2.5rem;
}


.img-avatar {
    outline: 0;
    border: 0;
    overflow: hidden;
}

    .img-avatar img {
        width: 30px;
        aspect-ratio: 1/1;
        height: 30px;
        object-fit: cover;
    }

.notification.dropdown ul li a {
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 8px;
}

/* ========top navigation Styling ======= */

.dashboard-content.active {
    width: calc(100% - 80px);
    margin-left: 80px;
    transition: all .2s ease-in-out;
}

.overview button {
    font-size: .8rem;
}

    .overview button.active {
        background: var(--primary-btn-color);
        color: white;
    }

.overview-border {
    border-right: 2px solid rgba(255, 255, 255, 0.74);
    line-height: 2;
}

.overview .btn-check:checked + .btn {
    background-color: var(--primary-btn-color) !important;
    border-color: #375587 !important;
}

.overview label.btn {
    background-color: #375587;
}

.dashboard-graph-cards, .issue-cards-container {
    min-height: 30rem;
    background-color: #101f38;
}

.cards-btn {
    background-color: #375587;
}

.dashboard-cards .row > div:nth-of-type(1) .dashboard-cards-body {
    background: radial-gradient(96.22% 131.01% at 99.16% 92.72%, #8B405E 0%, #A83A66 57%, #AD5B7C 100%);
}

.dashboard-cards .row > div:nth-of-type(2) .dashboard-cards-body {
    background: radial-gradient(141.55% 164.85% at 94.42% 84.81%, #3841FE 0%, #E0DEF4 100%);
}

.dashboard-cards .row > div:nth-of-type(3) .dashboard-cards-body {
    background: radial-gradient(96.22% 131.01% at 99.16% 92.72%, #FFECC2 0%, #E2B33D 57%, #FFCE45 100%);
}

.dashboard-cards .row > div:nth-of-type(4) .dashboard-cards-body {
    background: radial-gradient(96.22% 131.01% at 99.16% 92.72%, #73db5b 0%, #3abf23 57%, #48995a 100%);
}

.user-search-btn > div {
    text-align: end;
}

    .user-search-btn > div button {
        width: 240px !important;
    }

.arrow-sign-span {
    width: 35px;
    aspect-ratio: 1/1;
    line-height: 35px;
    text-align: center;
}

.graph-cards > div, .performanse-review, .performanse-review + div {
    background-color: #1c3256;
}

.table {
    --bs-table-bg: unset !important;
    background-color: transparent !important;
    color: white;
    --bs-table-color: white;
}

    .table td {
        padding: 5px;
        font-size: .7rem;
        opacity: .8;
        border-bottom: 0;
    }

.forGameWise:hover {
    cursor: pointer;
    background-color: #88888894 !important;
}

.table-width {
    min-width: 16rem;
}

.table tbody tr:nth-of-type(2n-1) {
    border-radius: 8px;
}

.table tbody tr td {
    border-top: .2px solid rgba(255, 255, 255, 0.411);
    border-bottom: .2px solid #ffffff1a !important;
}

.table tbody tr:nth-of-type(2n-1) td:first-child {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

.table tbody tr:nth-of-type(2n-1) td:last-child {
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

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

.line-issue-cards {
    display: inline-block;
    height: 2.5rem;
    width: 5px;
    background: linear-gradient(to right,rgb(212, 0, 255),rgb(133, 12, 12));
}

.issue-cards:nth-of-type(2n) .line-issue-cards {
    background: linear-gradient(to right,rgb(255, 230, 0),rgb(133, 12, 12));
}

.issue-cards input[type="checkbox"] {
    accent-color: transparent;
}

.issue-cards-indicator span:nth-of-type(1) {
    background-color: rgb(166, 204, 166);
}

.line-bar {
    height: 30px;
    width: 2px;
    background-color: rgba(255, 255, 255, 0.753);
}

.line-ball {
    width: 10px;
    aspect-ratio: 1/1;
    border-radius: 50%;
}

.dashboard-graph-cards > div:nth-of-type(2n) .line-ball {
    background-color: #b67b00;
}

.dashboard-graph-cards > div:nth-of-type(2n -1) .line-ball {
    background-color: #781A3F;
}

.top-nav-notification .notification ul, .user-profile.dropdown ul {
    background-color: #1c3256;
}

.notification.dropdown ul, .user-profile.dropdown ul {
    min-width: 15rem;
    border: .5px solid var(--primary-btn-color);
}

.notification .notification-indicator {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    display: block;
    background-color: red;
    position: absolute;
    top: 15%;
    right: 15%;
}

.notification.dropdown ul::before, .user-profile.dropdown ul::before {
    content: "";
    width: .6rem;
    height: .6rem;
    transform: rotate(-45deg) translate(0,-60%);
    position: absolute;
    top: -.6%;
    z-index: -4;
    right: 5%;
    background: linear-gradient(45deg, #1c3256 50%, var(--primary-btn-color) 50%)
}

.user-profile.dropdown ul {
    top: 23% !important;
}

    .user-profile.dropdown ul .dropdown-item {
        color: white;
        transition: all .4s ease-in-out;
    }

        .user-profile.dropdown ul .dropdown-item:hover {
            color: #1c3256
        }

    .user-profile.dropdown ul::before {
        right: 2%;
    }

.user-profile .dropdown-item:hover {
    border-left: .25rem solid var(--primary-btn-color);
    background-color: rgb(240, 229, 133);
    transition: all .4s ease-in-out;
}

.page-header {
    height: 50px;
    background-color: #061124;
    padding: 5px 7px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.dp_table_header {
    height: 43px;
    background-color: white;
    padding: 0px 3.5% 0px 22px;
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .dp_table_header i {
        color: green;
        padding: 10px 12px;
    }

        .dp_table_header i:hover {
            cursor: pointer;
            border-radius: 50%;
            padding: 10px 12px;
            background-color: #c9cbcbe3;
        }

.status-active {
    color: #00c300;
    font-weight: 600;
    box-shadow: 0px 0px 8px 0px #1a9d1a;
    padding: 5px 7px;
    border-radius: 6px;
}

.status-InActive {
    color: darkred;
    font-weight: 600;
    box-shadow: 0px 0px 8px 0px red;
    padding: 3px 7px;
    border-radius: 6px;
}


/* ============== dashboard main-content styling end =================== */



/* ============== user main content section styling =================== */
.breadcrumb-nav-tab {
    --bs-breadcrumb-divider: '>';
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--primary-btn-color)
}

.dashboard-user-section .data-table-wrapper {
    background-color: #161d2ba1;
    color: white;
}


.dashboard-user-section .data-table-wrapper {
    background-color: #161d2ba1;
    color: white;
}

.dashboard-user-section .btn-add-user, .dashboard-user-section .btn-add-user:hover, .dashboard-user-section .btn-add-user:active {
    background-color: var(--primary-btn-color);
}

.dashboard-user-section .add_user_btn {
    border-radius: 3px !important;
}

.dashboard-user-section .fa-circle-xmark {
    transform: rotate(-45deg);
    font-size: 1.2rem;
    padding-right: .5rem
}

.dashboard-user-section .data-table-filter-form label {
    color: #ffffffaf;
}

.dashboard-user-section .data-table-filter-form input, .dashboard-user-section .data-table-filter-form input:focus, .dashboard-user-section .data-table-filter-form input:active {
    background-color: #9ea2ae;
    color: #211d1d;
    border: none;
    outline: none;
    font-size: .9rem;
    padding: .7rem;
    border-radius: .2rem;
}

    .dashboard-user-section .data-table-filter-form input::placeholder {
        color: #161313;
    }

.dashboard-user-section .user-search-btn {
    width: 238px;
}

.dashboard-user-section div.dt-container .dt-search input {
    border: none;
    outline: none;
    background: #fffffff1;
    width: 238px;
    padding: .4rem
}

.dashboard-user-section div.dt-container .dt-input {
    border: none;
    outline: none;
    background-color: rgba(255, 255, 255, 0.74);
    color: black;
    border-radius: .2rem;
    padding: .25rem;
}

.dashboard-user-section .user-search-btn button, .dashboard-user-section .user-search-btn button:hover, .dashboard-user-section .user-search-btn button:active {
    background-color: var(--primary-btn-color);
    font-size: .9rem;
    padding: .7rem;
    border-radius: .2rem;
}

.dashboard-user-section div.dt-container div.dt-layout-row.dt-layout-table div.dt-layout-cell {
    display: block;
    padding-left: 1rem;
    padding-right: 1rem;
    background: #061124;
    border-radius: .5rem;
    color: white;
    padding-bottom: 2rem;
    border: .3px solid #d3d3d347;
    width: 100%;
}

.dashboard-user-section div.dt-scroll-body > table.dataTable > thead > tr > th {
    overflow: hidden;
    display: none;
}

.dashboard-user-section div.dt-container div.dt-layout-row {
    color: rgba(255, 255, 255, 0.863);
    padding-bottom: 1rem;
    display: flex !important;
    font-weight: 200;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.dashboard-user-section .table-dta label {
    padding-right: 1rem;
    padding-left: 1rem;
}

.dashboard-user-section .table-dta .dt-paging.paging_full_numbers button {
    /*background-color: #394050 !important;*/
    color: white !important;
}

.dashboard-user-section .table-dta .dt-paging-button.current {
    background-color: lightskyblue !important;
}

.dashboard-user-section .dt-column-order {
    display: none;
}

.dashboard-user-section .table-dta table th {
    color: #70a6ff;
    padding: 1.2rem 0rem !important;
    border-bottom: 3.2px solid #ffffff1f;
}

    .dashboard-user-section .table-dta table th:nth-last-of-type(1) {
        text-align: center;
    }

.dashboard-user-section .table-dta table td:nth-last-of-type(1) {
    text-align: center;
}

.dashboard-user-section .table-dta table td {
    color: white;
    font-weight: 200 !important;
    font-size: .9rem;
}

.dashboard-user-section .table-btn-indicator.active, .dashboard-user-section .table-btn-indicator.active:focus, .dashboard-user-section .table-btn-indicator.active:active {
    color: white;
    min-width: 6rem;
    box-shadow: 0px 0px 8px 0px green;
}

.dashboard-user-section .table-btn-indicator.inactive, .dashboard-user-section .table-btn-indicator.inactive:focus, .dashboard-user-section .table-btn-indicator.inactive:active {
    background-color: var(--primary-btn-color);
    color: white;
    min-width: 6rem;
}

.dashboard-user-section .btn-table-active:hover {
    background-color: rgb(1, 155, 1);
}

.dashboard-user-section .delete-modal-body {
    min-height: 10rem;
}

.dashboard-user-section .modal-delete-pop {
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
}

.modal-body .form-select-sm {
    padding-top: .37rem;
    padding-bottom: .37rem;
}

.dashboard-user-section .delete-modal-footer button:nth-of-type(1) {
    background-color: var(--primary-btn-color);
}

.dashboard-user-section .modal-content {
    border: 1px solid var(--primary);
    background-color: var(--main-color);
}

.dashboard-user-section .btn-primary {
    --bs-btn-bg: var(--blue);
    border: none;
    font-size: 0.9rem;
    color: #ffffffea;
    font-family: 300;
}

.dashboard-user-section .dot-active {
    width: .5rem;
    height: .5rem;
    background-color: green;
}

.dashboard-user-section .dot-inactive {
    width: .5rem;
    height: .5rem;
    background-color: red;
}

.dashboard-user-section .dot-active + span {
    color: green
}

.dashboard-user-section .dot-inactive + span {
    color: red
}

.add-new-payline {
    display: flex;
    gap: 10px;
    align-items: end;
    flex-wrap: wrap;
}

    .add-new-payline > div {
        width: 13%;
    }

        .add-new-payline > div:first-child {
            width: auto;
        }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}


.dashboard-user-section .view-btn button, .dashboard-user-section .view-btn button:active {
    background-color: var(--lightsky);
}

.modal .view-btn button.btn.btn-sm.px-4.py-2.fw-semibold {
    background-color: var(--lightsky);
}

.dashboard-user-section .view-btn button:hover {
    background-color: lightblue;
}

.edit-user-modal input, .edit-user-modal input:active, .edit-user-modal input:focus, .edit-user-modal select, .dashboard-modal-section .modal-body textarea {
    background-color: #9ea2ae;
    border: 0;
    outline: 0
}


.info-border {
    border-top: .2px solid #ffffff45;
    border-bottom: .2px solid #ffffff45;
}

/*table styling*/
.dashboard-user-section .table tbody tr:nth-of-type(2n-1) td:first-child, .dashboard-user-section .table tbody tr:nth-of-type(2n-1) td:last-child {
    border-radius: unset;
}

.dashboard-user-section table.dataTable tbody tr, .dashboard-user-section table.dataTable tbody tr:hover {
    background-color: transparent;
}

.dashboard-user-section table.dataTable.display tbody tr > td {
    background-color: transparent !important;
    vertical-align: middle;
}

.dashboard-user-section table.dataTable.display tbody td {
    border-top: unset;
}

.dashboard-user-section button.dt-paging-button {
    padding: .5rem .8rem;
    outline: none;
    border: .1px solid lightgray;
    background: var(--input-field-gray);
}

    .dashboard-user-section button.dt-paging-button:first-child {
        border-top-left-radius: .2rem;
        border-bottom-left-radius: .2rem;
    }

    .dashboard-user-section button.dt-paging-button:last-child {
        border-top-right-radius: .2rem;
        border-bottom-right-radius: .2rem;
    }


/*table styling*/

/* ============== user main content section styling end=================== */


/* ============= Role section styling ===============*/

.role-section .data-table-wrapper {
    background-color: #161d2ba1;
    color: white;
}

.role-section .btn-add-user, .role-section .btn-add-user:hover, .role-section .btn-add-user:active {
    background-color: var(--primary-btn-color);
}

.role-section .add_user_btn {
    border-radius: 3px !important;
    padding-top: .7rem;
    padding-bottom: .7rem;
    width: 240px;
}

.role-section .fa-circle-xmark {
    transform: rotate(-45deg);
    font-size: 1.2rem;
    padding-right: .5rem
}

.role-section .data-table-filter-form label {
    color: #ffffffaf;
}

.role-section .data-table-filter-form input, .role-section .data-table-filter-form input:focus, .role-section .data-table-filter-form input:active {
    background-color: #9ea2ae;
    color: #211d1d;
    border: none;
    outline: none;
    font-size: .9rem;
    padding: .7rem;
    border-radius: .2rem;
}

    .role-section .data-table-filter-form input::placeholder {
        color: #161313;
    }

.role-section .user-search-btn {
    width: 16rem;
}

.role-section div.dt-container .dt-search input {
    border: none;
    outline: none;
    background: #fffffff1;
    width: 238px;
    padding: .4rem
}

.role-section div.dt-container .dt-input {
    border: none;
    outline: none;
    background-color: rgba(255, 255, 255, 0.74);
    color: black;
}

.role-section .user-search-btn button, .role-section .user-search-btn button:hover, .role-section .user-search-btn button:active {
    background-color: var(--primary-btn-color);
    font-size: .9rem;
    padding: .7rem;
    border-radius: .2rem;
}

.role-section div.dt-container div.dt-layout-row.dt-layout-table div.dt-layout-cell {
    display: block;
    padding-left: 2rem;
    padding-right: 2rem;
    background: #061124;
    border-radius: .5rem;
    color: white;
    padding-bottom: 3rem;
    border: .3px solid #d3d3d347;
}

.role-section div.dt-scroll-body > table.dataTable > thead > tr > th {
    overflow: hidden;
    display: none;
}

.role-section div.dt-container div.dt-layout-row {
    color: rgba(255, 255, 255, 0.863);
    padding-bottom: 1rem;
    font-weight: 200;
}

.role-section .table-dta label {
    padding-right: 1rem;
    padding-left: 1rem;
}

div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button {
    background-color: #394050 !important;
    color: white !important;
}

.role-section .table-dta .dt-paging-button.current {
    background-color: #8caee6 !important;
}

.role-section .dt-column-order {
    display: none;
}

.role-section .table-dta table th {
    color: var(---lightsky);
    font-weight: 300 !important;
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
    border-bottom: .2px solid #ffffff1a;
}

    .role-section .table-dta table th:nth-last-of-type(1) {
        text-align: start;
    }

.role-section .table-dta table td {
    color: white;
    font-weight: 200 !important;
    font-size: .9rem;
}

.role-section .table-btn-indicator.active, .role-section .table-btn-indicator.active:focus, .role-section .table-btn-indicator.active:active {
    background-color: #308242;
    color: white;
    min-width: 6rem;
}

.role-section .table-btn-indicator.inactive, .role-section .table-btn-indicator.inactive:focus, .role-section .table-btn-indicator.inactive:active {
    background-color: var(--primary-btn-color);
    color: white;
    min-width: 6rem;
}

.role-section .btn-table-active:hover {
    background-color: rgb(1, 155, 1);
}

.role-section .delete-modal-body {
    min-height: 10rem;
}

.role-section .modal-delete-pop {
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
}

.role-section .delete-modal-footer button:nth-of-type(1) {
    background-color: var(--primary-btn-color);
}

.role-section .btn-primary {
    --bs-btn-bg: var(--blue);
    border: none;
    font-size: 1rem;
    color: #ffffffea;
    font-family: 300;
}

.role-section .dot-active {
    width: .5rem;
    height: .5rem;
    background-color: green;
}

    .role-section .dot-active + span {
        color: green
    }



.role-section .view-btn button, .role-section .view-btn button:active {
    background-color: var(---lightsky);
}

    .role-section .view-btn button:hover {
        background-color: lightblue;
    }


.role-section .data-table-wrapper {
    background-color: #161d2ba1;
    color: white;
}

.permission-table {
    display: block;
    padding-left: 2rem;
    padding-right: 2rem;
    background: #061124;
    border-radius: .5rem;
    color: white;
    padding-bottom: 3rem;
    border: .3px solid #d3d3d347;
}

.role-tabble-select {
    max-width: 13rem;
    margin-bottom: 1rem;
}

    .role-tabble-select select {
        background-color: lightgray;
    }

.page-title h3, .page-title {
    color: var(--primary-btn-hover);
    padding: .5rem 0;
}

.dashboard-user-section .table-role table th:nth-last-of-type(1), .dashboard-user-section .table-role table tbody td:nth-last-of-type(1) {
    text-align: start;
}
/*==================== Role section styling end =========================*/

/* ============== Permisson styling ========================*/
.permission-btn .btn-primary {
    background-color: var(---lightsky);
}

.permission-table .table th {
    font-weight: 500;
    color: var(---lightsky)
}

.permission-table .table td, .permission-table .table th {
    padding: 1rem;
    font-size: 1rem;
}

    .permission-table .table td input {
        border: .3px solid lightgray;
        background-color: transparent;
        padding: .5rem
    }

        .permission-table .table td input:checked {
            background-color: #d9403b;
        }

.permission-table .table {
    min-width: 500px;
}

.permission-table > div {
    overflow: auto;
}

.permission-table th {
    border-bottom: .2px solid #ffffff1a;
}

.permission-tabble-select {
    width: 17rem;
    margin-bottom: 1rem;
}

    .permission-tabble-select select {
        background-color: lightgray;
    }

.game_management .table tbody tr td, .game_management th {
    padding: 0.8rem 0rem;
}

.game_management .table tbody tr:nth-of-type(2n-1) td:first-child, .game_management table.dataTable > thead > tr > th, .dashboard-user-section .table-dta table th, .dashboard-user-section .table-dta table td {
    padding-left: 0rem !important;
}


/* ============== Permisson styling end========================*/

/*Game payouts styling*/
.table-btn-indicator.deactive {
    background-color: gray;
}
/*Game payouts styling*/
/* ==========game management styling=========== */
.dashboard-user-section div.dt-container div.dt-layout-row.dt-layout-table div.dt-layout-cell {
    width: 100%;
}

.table-dta.game_management table.table {
    min-width: 683px;
}

.game_management table.dataTable > thead > tr > th, .dashboard-user-section .table-dta table th {
    font-weight: 600 !important;
    font-size: 13px;
    letter-spacing: 0.1px;
    text-transform: capitalize;
}

th.mtxSection_th {
    width: 240px !important;
}

div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button {
    background-color: #394050 !important;
    color: white !important;
    border: 1px solid #ffffff14;
    margin-left: 0px;
    border-radius: 0;
    font-size: 15px;
}

    div.dt-container .dt-paging .dt-paging-button.current {
        background-color: #8cafe6b7 !important;
        color: black !important;
    }

/* ==========game management styling=========== */


/* Math_configuration_styling */
.dashboard-user-section .add_math_config_btn.add_user_btn:nth-of-type(1) {
    width: auto;
}

/*=========== modal content box styling======= */
.modal .edit-user-modal input:focus, .modal .edit-user-modal select:focus, .modal .edit-user-modal textarea:focus {
    background-color: #ccd0df;
    color: #000
}

.modal .edit-user-modal input[type='radio']:focus {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.form-check-input[type='radio']:checked, .modal .edit-user-modal input[type='radio']:focus {
    background-color: #0ad312;
    border-color: #0ad312;
}

.modal .edit-user-modal input[type='checkbox']:focus {
    background-color: transparent;
    color: #000;
    border: 1px solid rgb(255, 255, 255);
}

.modal-delete-pop {
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
}

.modal-content {
    border: 1px solid var(--primary);
    background-color: var(--main-color);
}

.game-manage-edit {
    min-width: 600px
}

.form-label, .form-check-label {
    margin-bottom: .5rem;
    font-size: 14px;
    font-weight: lighter;
    color: #ffffffe3;
}

.form-control[type=file] {
    overflow: hidden;
    background-color: unset;
    color: #ffffffa8;
    border-radius: .35rem;
    border: .2px solid;
}

.general-info input[type='radio'] {
    border: 1px solid white !important;
}

.add-game-icon-modal {
    min-width: 85%;
}

    .add-game-icon-modal .add-symbol-btn {
        padding-top: 1.9rem;
    }

.delete-row button {
    background-color: rgb(134, 18, 18) !important;
    border: none;
}

.custom-dropdown {
    width: 100%;
    background: #9ea2ae;
    border-radius: 4px;
    color: black;
}

    .custom-dropdown > button {
        text-align: start;
    }

    .custom-dropdown .dropdown-toggle::after {
        position: absolute;
        right: 2%;
        top: 50%;
        transform: translate(0, -50%);
    }

    .custom-dropdown .dropdown-menu.show {
        display: block;
        width: 100%;
        background: lightgray;
        padding: .5rem;
        border-radius: 4px;
    }
/*udpate modal button css*/
.view-btn, .permission-btn {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start !important;
    gap: 10px;
}
/*udpate modal button css*/
/*=========== modal content box styling end======= */


/* Assign game styling  */
.assign-game select {
    background-color: lightgray;
}

    .assign-game select:focus {
        background-color: rgb(238, 237, 237);
    }

.assign-game-table .form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
    border-width: 2px;
    border-color: #f1ae7e;
    background-color: transparent;
}

    .assign-game-table .form-check-input:checked {
        background-color: #fd0d0d;
        border-color: #7b5336;
    }

.assign-game-table div.dt-container .dt-length, .assign-game-table div.dt-container .dt-search {
    display: none;
}

.assign-game-table .dt-scroll-headInner {
    min-width: unset;
}

.assign-game-table table.dataTable > tbody > tr > td {
    padding-right: 10px;
}

.assign-game-table td:first-child {
    width: 25%;
}
/* Assign game styling  */



/* ===================> footer section* <========================/ */
footer {
    font-size: 12px;
    color: #ffffff82;
    border-top: .3px solid #ffffff47;
}
/* ===================> footer section* <========================/ */

#editSymbolImg img {
    width: 4em;
}

.onOff {
    height: 25px;
    width: 3em !important;
}

    .onOff:Hover {
        cursor: pointer;
    }

.dt-scroll-headInner, .table > tbody, .table > thead {
    width: 100% !important;
}



span#existMultiplier {
    margin-left: 13px;
    color: red;
    font-weight: 600;
    letter-spacing: 4px;
}

textarea#DescriptionEdit {
    height: 135px;
}

.tableBG {
    display: block;
    padding-left: 2rem;
    padding-right: 2rem;
    background: #061124;
    color: white;
    width: 100%;
}

#game_manage_table_info {
    color: aliceblue;
}


.iconSize {
    width: 3em;
    height: 3em;
}

.emtyRcd {
    font-size: 1.5em;
    color: white;
}

#tbl_gameSummaryReport td {
    font-size: 12px;
}

.enabledate {
    width: 170px;
}

.vuVendorLink {
    font-size: 0.85rem;
}

.w_eye_password {
    position: absolute;
    right: 1.5em;
    top: 38px;
    color: #003d69;
}

    .w_eye_password:hover {
        cursor: pointer;
        color: #00538f;
    }

.gamehelp_pop_up {
    padding: 0px;
}

    .gamehelp_pop_up h5 {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: 1px;
        color: #c10606c9;
    }

    .gamehelp_pop_up span {
        font-size: 13px;
        letter-spacing: 1px;
        color: whitesmoke;
    }