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

@media(max-width:1699px){
    .pipeline-arrow {
        gap: 10px;
        flex-wrap: wrap;
    }

    .lead-footer {
        flex-wrap: wrap;
    }

    .note-type-picker {
        justify-content: start;
        flex-wrap: wrap;
        gap: 10px;
    }

        .note-type-picker button {
            gap: 4px;
            padding: 5px 10px;
        }
}
@media(max-width:991px) {
    
    .dtfc-fixed-left,
    .dtfc-fixed-right {
        position: unset !important;
        left: unset !important;
    }
    #clubModal .modal-dialog {
        max-width: 97%;
    }
    .offcanvas.offcanvas-end {
        width: 60%;
    }
    .custom-select-wrapper {
        min-width: 140px;
    }

    .custom-select-dropdown ul li {
        font-size: 12px;
    }

    .custom-select-display, .table-filter input, .table-filter select {
        font-size: 12px;
    }

        .table-filter input#dateRangeAmpDash,
        .table-filter input#dateRangeAmpTxn,
        .table-filter input#dateRangeAmpWd,
        .table-filter input#dateRangeAmpTr,
        .card-body input#dateRangeRpt, .card-body input#dateRangeTr, .card-body input#dateRangeAudit,
        .table-filter input#dateRange, .table-filter input.dateRange {
            width: 220px;
        }

    .custom-select__button {
        font-size: 12px;
    }

    .custom-select__item {
        font-size: 12px;
    }

    .custom-select:has(.CustomDateFilter) .custom-select__button {
        width: 150px;
    }

    .table-filter input.dt-input {
        width: 87px;
    }
}
@media(max-width:767px) {
    .radio-group:has(#lblTxnTransferBox) {
        flex-wrap: wrap;
    }
    .stat-box {
        padding: 8px 8px;
    }
    .timeline-item > div {
        flex-wrap: wrap;
    }
    .tab-bg-color {
        display: block;
        padding: 0;
        text-align: center;
    }
    .tab-bg-color .nav-pills {
        flex-wrap: nowrap;
        overflow: auto;
    }
        .tab-bg-color #acmRateTicker {
            padding: 6px;
        }
    .subHeader ul .sub-menu-dropdown.open{
        max-height: unset;
    }
    .next-club .one-million-club-heading h4 {
        font-size: 12px;
    }

    .one-million-club-heading img {
        width: 140px;
    }
    .card-title {
        padding: 15px;
    }
    .one-million-club-box {
        padding: 45px 15px 15px;
        width: 100%;
    }
    .not-eligible,
    .one-million-club-heading {
        max-width: 100%;
    }
    .box-data h3 {
        font-size: 14px;
    }
    .box-data h3 {
        min-height: auto;
    }
    .box-icon-circle {
        background: var(--light-color);
        height: 30px;
        width: 30px;
    }
        .box-icon-circle svg {
            width: 20px;
        }
    .text-center:has(> .trueLogo) {
        margin-left: 0;
        margin-top: 0;
    }
    .card-body {
        padding: 15px;
    }
    .generate-code a{
        margin-left: 0;
    }
    .generate-code {
        flex-direction: column;
        gap: 8px;
        align-items: start !important;
    }
    .calc-sign {
        left: 50%;
        right: unset;
        top: 90%;
        transform: translateX(-50%);
    }
    #ruleTable thead {
        display: none;
    }
    #ruleTable td {
        display: block;
    }
    .metricDropdown {
         width: 100% !important; 
    }
    .dynamicFields .text-muted {
        margin-top: 0 !important;
        width: 100%;
    }
    #ruleTable td .removeRow {
        margin-top: 0 !important;
    }
    .fieldBox {
        gap: 5px;
    }
    .btn-style.btn-md {
        padding: 12px 10px 11px;
    }
    .chat-box {
        min-height: 100px;
    }
    .upi-box {
        padding: 20px;
    }
    .details .custom-radio {
        width: auto;
    }
    .custom-radio {
        padding: 8px 15px;
    }
    .subHeader ul li > a {
        padding: 15px 11px;
    }
    .offcanvas.offcanvas-end {
        width: 70%;
    }
    .login-page iframe{
        display:none;
        max-width:100%;
    }

    .login-box {
        padding: 30px;
        margin: 30px 0;
    }
    .subHeader ul {
        justify-content: space-between;
    }
    .table-filter {
        gap: 10px;
        flex-direction: column;
        align-items: start;
    }

    table.dataTable > tbody > tr > td {
        padding: 8px;
    }

    .table-filter > .d-flex > .custom-select {
        width: auto;
    }

    .table-bottom-content {
        flex-direction: column;
    }

    .table-box {
        padding: 10px;
    }

    .subHeader ul .sub-menu-dropdown {
        position: unset;
        box-shadow: none;
        transform:unset;
    }

    .main-menu ul li {
        width: 100%;
    }

    .closeBtn {
        display: inline-block !important;
        padding: 0;
        border: none;
        background-color: transparent;
    }

    .subHeader {
        padding: 0;
    }

    .mobileLogo {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 15px 20px;
        background-color: var(--input-bg-color);
    }

    .mobileMenu {
        display: inline-block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0 5px;
        background-color: var(--light-color);
        border-top: 1px solid var(--light-border-color);
        z-index:9;
    }

    .main-menu {
        position: fixed;
        left: -250px;
        top: 0;
        bottom: 0;
        width: 250px;
        transition: left 0.4s ease;
        background-color: var(--light-color);
        z-index: 9999;
    }

    .subHeader .main-menu ul {
        flex-direction: column;
        align-items: flex-start;
        padding: 5px;
        overflow: auto;
        height: calc(100dvh - 61.77px);
    }

    .subHeader ul .sub-menu-dropdown {
        background-color: var(--grey-01);
    }

    .subHeader .main-menu ul li a {
        padding: 15px;
    }

    .subHeader .mobileMenu ul li a span.menu-text {
        margin: 0;
        font-size: 12px;
    }

    .subHeader .mobileMenu ul li a span {
        margin: 0 0 7px 0;
    }

    .subHeader .mobileMenu ul li a {
        font-size: 13px;
    }

    .subHeader .mobileMenu ul li a {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 76px;
    }

        .subHeader .mobileMenu ul li a svg:not(span svg) {
            display: none;
        }



    .container-fluid {
        padding: 0 10px;
    }

    .inputGroup {
        display: none;
    }

    header {
        padding: 10px 0px;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: -1000%;
        height: 100%;
        width: 100%;
        background-color: #000;
        opacity: .5;
        z-index: 999;
    }

    .theme-toggle {
        height: 35px;
        width: 35px;
        margin: 0 15px 0 0px;
    }

        .theme-toggle svg {
            height: 18px;
            width: 18px;
        }

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

    .dropdown-menu.show {
        transform: translateY(0) translateX(-60%);
    }

    .more-menu {
        display: none !important;
    }

    .menu-text + svg {
        margin-left: auto !important;
    }
    .primary-role {
        max-width: 100px;
        overflow: hidden;
    }
}
@media(max-width:575px){
    #linkDateRange {
        width: auto;
    }
    .help-ticket-box {
        padding: 10px;
    }
    #currencyFilterBar > .d-flex .btn-style{
        width: 100%;
    }
    #currencyFilterBar > .d-flex > div .CurrStatusFilterWrapper {
        max-width: unset !important;
    }
    #currencyFilterBar .d-flex > div {
        width: 100%;
    }
    .club-bottom-row {
        flex-wrap: wrap;
    }
    div.dt-button-collection{
        width: 100%;
    }
    #clubModal .modal-body,
    #allActivityBody {
        padding: 10px;
    }
    .audit-entry .details {
        padding: 12px;
    }
    #divReferrerFilterRow .d-flex > .btn-style,
    #divReferrerFilterRow .d-flex > div,
    .risk-management-filter .d-flex #btnSearchLogin,
    .risk-management-filter .d-flex > div {
        width: 100%;
    }
    #txnFilterBar .d-flex.flex-wrap,
    #mgrFilterBar .d-flex.flex-wrap {
        flex-direction: column;
        width: 100%;
    }
    #modalClubMemberDetail .modal-body {
        padding: 10px;
    }
    #txnFilterBar #dateRangeParentTr,
    #mgrFilterBar #dateRangeParentMgr,
    #txnFilterBar .custom-select-wrapper,
    #mgrFilterBar .custom-select-wrapper {
        max-width: 100% !important;
        width: 100%;
    }
    #toast-container {
        position: absolute;
    }
    .toast-top-right {
        top: 35px;
    }
    div.dt-button-collection:has(.buttons-columnVisibility), .dt-button-collection:has(.dt-button.buttons-colvisGroup) {
        left: 50% !important;
        width: 100%;
    }
    div.dt-button-collection .dt-button {
        background: transparent !important;
    }
    .next-club .one-million-club-heading {
        width: 100%;
        top: -36px;
        padding: 12px 0px;
    }
    .user-panel-header h6 svg{
        width: 15px;
    }
    .tab-pane .user-panel-main {
        max-height: unset;
    }
    .tradeNwin .card {
        padding: 15px;
    }
    .tradeNwin ul li {
        flex-direction: column-reverse;
        align-items: start;
    }
    .user-panel-header h6 {
        font-size: 10px;
        padding: 0px 5px;
    }
    .main-heading .table-filter{
        width: 100%;
    }
    .contest-details .timer-box span.count {
        font-size: 15px;
        margin-right: 8px;
    }
    .modelCloseBtn {
        right: -6px;
        top: -6px;
    }
    #tblTiers tr td,
    #tblRewards tr td {
        border-width: 0;
    }
    .tradeNwin ul li h6 {
        font-size: 12px;
        margin-bottom: 4px;
    }
    .tradeNwin ul li span {
        font-size: 12px;
    }
    .single-btn .btn-style,
    .single-btn,
    .btn-all-group,
    .btn-all-group .btn-style {
        width: 100%;
    }
    .confirm-amount, .total-commision,
    .table-filter .custom-switch,
    .table-filter .btn-style {
        justify-content: center;
    }
    .table-box {
        padding: 8px;
    }
    table.dataTable > thead > tr > th {
        padding: 3px 10px 0!important;
    }
    table.dataTable > tbody > tr > td {
        padding: 3px 10px;
    }
    .btn-table svg {
        width: 14px;
        height: 14px;
    }
    .btn-table {
        height: 28px;
        width: 28px;
    }
    table.dataTable > tbody > tr > td,
    table.dataTable > thead > tr > th span {
        font-size: 11px;
    }
    .table-bottom-content .dt-info {
        font-size: 12px;
        margin-bottom:5px;
    }
    div.dt-container .dt-paging .dt-paging-button {
        font-size: 12px;
    }
    div.dt-container .dt-paging .dt-paging-button {
        padding: 2px 8px;
    }
    div.dt-container .dt-paging .dt-paging-button {
        min-width: 1em;
        margin-left: 1px;
    }
    .subHeader .mobileMenu ul li a {
        width: 66px;
    }
    .subHeader .mobileMenu ul li a span.menu-text {
        font-size: 10px;
    }
    .btn-style {
        font-size: 12px;
        font-weight: 600;
    }
    .custom-select-wrapper.UserWrapper, .custom-select-wrapper.RewardTypeFilterWrapper, .custom-select-wrapper.TransationFilterWrapper {
        min-width: 280px;
    }
    .main-heading > .d-flex{
        width: 100%;
        justify-content:space-between;
    }
    .main-heading .btn-style svg {
        display: none;
    }
    .custom-select-wrapper.MemberCodeFilterWrapper {
        min-width: unset;
        width: 100%;
    }
    .theme-toggle {
        margin: 0 6px 0 0px;
    }
    .offcanvas.offcanvas-end {
        width: 100%;
    }
    .main-header .logo img{
        width: 100%;
    }
    .page-details .main-heading {
        flex-direction: column;
        align-items: start !important;
        gap: 10px;
    }
    .table-filter > .d-flex > .top-fliter,
    .table-filter > .d-flex {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    .table-filter .upload-btn-wrapper{
        width:100%;
    }
    #btnUpload{
        white-space: nowrap;
    }
    .custom-select-wrapper {
        margin: 0 !important;
    }
    .custom-select-wrapper .custom-select-display {
        padding: 8px 12px;
    }
    .table-filter .custom-select-wrapper,
    .table-filter .custom-select-wrapper .custom-select-display {
        width: 100%;
    }
    .table-filter input#dateRange18,
    .table-filter input#dateRange17,
    .table-filter input#dateRange16,
    .table-filter input#dateRange15,
    .table-filter input#dateRange14,
    .table-filter input#dateRange13,
    .table-filter input#dateRange12,
    .table-filter input#dateRange11,
    .table-filter input#dateRange10,
    .table-filter input#dateRange1,
    .table-filter input#dateRange2,
    .table-filter input#dateRange3,
    .table-filter input#dateRange4,
    .table-filter input#dateRange5,
    .table-filter input#dateRange6,
    .table-filter input#dateRange7,
    .table-filter input#dateRange8,
    .table-filter input#dateRangeTr,
    .table-filter input#dateRangeAmpTr,
    .table-filter input#dateRangeAmpDash,
    .table-filter input#dateRangeAmpTxn,
    .table-filter input#dateRangeAmpWd,
    .table-filter input#dateRangeAudit,
    .table-filter input#dateRange9,
    .table-filter input#pnlDateRange,
    .card-body input#dateRangeRpt,
    .table-filter input#dateRange, .table-filter input.dateRange {
        width: 100%;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        border-left: 1px solid var(--input-border-color);
    }
    .custom-select:has(.CustomDateFilter) .custom-select__button {
        width: 100%;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .page-details .main-heading h4 {
        font-size: 18px;
    }
    .table-top-content {
        flex-direction: column;
        width: 100%;
    }
    .common-select .custom-select,
    .dt-length {
        width: 100%;
    }
    .custom-select {
        width: 100%;
    }
    .dt-search,
    .download-btn,
    div.dt-buttons > .dt-button {
        width: 100%;
    }
    .table-filter input.dt-input {
        width: 100%;
    }
    .common-select{
        width:100%;
    }
    .club-dropdown-group {
        width: 100%;
    }
}
@media(min-width:768px){
    
    .more-menu {
        position: relative;
    }
    .more-menu > ul {
        display: none;
        position: absolute;
        top: 140%;
        right: 0px;
        background: var(--light-color);
        list-style: none;
        margin: 0;
        padding: 5px !important;
        min-width: 180px;
        z-index: 1000;
        border-radius: 10px;
        box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1);
    }

.more-menu > ul > li {
  white-space: nowrap;
}


.more-menu {
    display: block;
  }
}
@media(min-width:768px) and (max-width:991px){

    #modalClubMemberDetail .modal-dialog {
        max-width: 90%;
    }
    .tab-bg-color {
        padding: 0 0px 0px 0;
    }
    .text-center:has(> .trueLogo) {
        margin-left: 0;
        margin-top: 0;
    }
    .login-page iframe {
        max-width: 100%;
    }
    .login-box {
        padding: 20px;
    }
    .subHeader ul li a .menu-text{
        
    font-size: 13px;
    }
    .subHeader ul li a svg{
        height: 16px !important;
        width: 16px !important;
    }
    .next-club .one-million-club-heading h4{
        white-space:nowrap;
    }
    header {
        padding: 15px 0px;
    }

    .one-million-club-box {
        width: 100%;
    }
    .next-club .one-million-club-heading {
        gap: 10px;
        padding: 12px 12px;
    }
    .not-eligible,
    .one-million-club-heading {
        max-width: 100%;
    }
}

@media(min-width:992px) and (max-width:1199px){
    .text-center:has(> .trueLogo) {
        margin-left: 0;
        margin-top: 0;
    }
    .offcanvas.offcanvas-end {
        width: 55%;
    }
    .login-page iframe {
        max-width: 100%;
    }
    .subHeader ul li a .menu-text{
        
    font-size: 12px;
    }
    .subHeader ul li a svg{
        height: 17px !important;
        width: 17px !important;
    }
  
  
    .subHeader ul li a .menu-text,
    .menu-text + svg {
    margin-left: 5px;
}
.subHeader{
    padding: 0;
}
}
@media(min-width:1200px) and (max-width:1399px){
    .offcanvas.offcanvas-end {
        width: 50%;
    }
   .subHeader ul li a .menu-text{
        font-size: 13px;
    }
    .subHeader ul li a svg{
        height: 17px !important;
        width: 17px !important;
    }
  
    .subHeader ul li a .menu-text,
    .menu-text + svg {
    margin-left: 5px;
}
.subHeader{
    padding: 0;
}
}

@media(min-width:1400px) and (max-width:1599px){
    .subHeader ul li a {
    padding: 15px 7px;
    }
    .subHeader ul li a .menu-text{
        
    font-size: 13px;
    }
    .subHeader ul li a svg{
        height: 18px !important;
        width: 18px !important;
    }
    #kpiMainRow .col-xxl-2 {
        width: 25%;
    }
}

@media(min-width:1600px) and (max-width:1799px){
    .subHeader ul li a {
    padding: 15px 10px;
    }
    .subHeader ul li a .menu-text{
        
    font-size: 13px;
    }
}

@media(min-width:576px){
    .withdrawal-page-filter #dateRangeParent{
        margin-left: -8px;
    }
    .date-picker-common {
        margin-left: -8px;
    }
    div.dt-button-collection .dt-button:hover:not(.disabled) {
        background: var(--primary-light-theme-color);
        color: var(--primary-theme-color);
    }
   
    }

@media(max-width:575px) {



    #modalViewWinners .modal-body {
        padding: 10px;
    }
}
@media(min-width:576px) and (max-width:991px){
    #clubDropdownsContainer{
        width:100%;
    }
    .club-dropdown-group {
        width: 31%;
    }
    #clubDropdownsContainer .custom-select {
        min-width: 100% !important;
    }
}
@media(min-height:946px) and (max-height:1099px){
    .dt-scroll-body {
        min-height: 42vh !important;
    }
}
@media(min-height:1100px) and (max-height:1199px) {
    .dt-scroll-body {
        min-height: 37vh !important;
    }
}
@media(min-height:1200px) and (max-height:1299px) {
    .dt-scroll-body {
        min-height: 35vh !important;
    }
}
@media(min-height:1300px) and (max-height:1499px) {
    .dt-scroll-body {
        min-height: 31vh !important;
    }
}