/* Media Query CSS */
@media (max-width: 1680px) {
    .chat_height{
        max-width:25vw;
    }
}


/* Media Query CSS */
@media (max-width: 1030px) {
    /* Custom CSS */
    .ipad-pro-pe-15{
        padding-right: 3rem !important;
     }

    .chat_height{
        max-width:25%;
    }
}


/* Media Query CSS */
 @media (max-width:992px){
     /* Custom Ipad Classes */
     .ipad-pe-0{
        padding-right: 0rem !important;
     }
     .ipad-flex-row-reverse{
        flex-direction: column-reverse;
     } 
    .header_wrapper .menu-title-gray-500 .menu-item .menu-link{
        color:var(--text-dark-gray) !important;
    }
    .header_wrapper .landing-header .menu .menu-link.active{
        color:var(--text-orange) !important;
    }

    /* Group Chat */
    .chat_height{
        position:static;
        max-width: 100%;
        margin-top:0px !important;
    }
 }


 @media (max-width:767px){
    /* Custom Classes */
    .mob-w-100{
        width:100% !important;
    }

    /* Table mobile */ 
    .table_input_wrapper{
        min-width:200px !important;
    }
    .table_input_wrapper_2{
        min-width:200px !important;
        margin-right:15px;
    }
    .right_side.right_side_unset{
        position:unset;
        right:unset !important;
        top:unset !important;
        transform:unset;
        margin-top:3px;
        font-size:12px !important;
        width:100%;
        justify-content:start !important;
    }
    .scroll_sticky_white,
    .scroll_sticky_white_second,
    .scroll_sticky_black,
    .scroll_sticky_black_second,
    .scroll_sticky_white_third,
    .scroll_sticky_white_fourth,
    .scroll_sticky_black_fourth,
    .scroll_sticky_black_third{
        position:static;
    }
    .position_static{
        position:static !important;
    }

    /* Sidebar CSS */
    .drawer.drawer-on{
        width:300px !important;
    }       
 }
 @media (max-width:330px){ 
     /* Extra Small Margin Classes */
     .mt-xs-15{
         margin-top:15px !important;
     }
     .mt-xs-20{
        margin-top:20px !important;
    }

    /* Table mobile */ 
    .table_input_wrapper{
        min-width:150px !important;
    }
    .table_input_wrapper_2{
        min-width:130px !important;
        margin-right:15px;
    }
 }
 @media (max-width:481px) {
    .main-content .account_pages {
        background-color: #000;
    }
    .nativeLogo {
        background-color: #fff;
        padding: 7px 14px;
        border-radius: 5px;
        display: block;
        position: absolute;
        left: calc(50% - 90px);
        /* top: 75px; */
        transform: skew(-15deg);
    }
    .main-content .account_pages .bg-body {
        background-color: transparent !important;
    }
    .mainLogo {
        display: none;
    }
    .landing-header.bg-dark {
        background-color: #212121 !important;
    }
    #kt_sign_in_form .text-dark, #kt_sign_up_form .text-dark {
        color: #b5b5b5 !important;
    }
    #kt_sign_in_form p.text-gray-400, #kt_sign_up_form p {
        font-weight: 400 !important;
        font-size: 1.1rem !important;
    }
    .main-content .account_pages .form-control.form-control-solid {
        background-color: #181818;
        border: solid 1px rgba(255,255,255,0.35);
        color: #f1f1f1;
    }
    .main-content .account_pages .form-control.form-control-solid::placeholder {
        font-weight: 400;
        color: #b5b5b5;
    }
    .forgotPassword {
        color: #e80f0f;
        font-weight: 400 !important;
        text-decoration: underline;
        line-height: 24px;
    }
    .forgotPassword:hover {
        color: #b5b5b5;
    }
    .btn-orange {
        background-color: #e80f0f;
    }
    .fv-row.registerSection {
        display: flex;
        align-content: center;
        justify-content: center;
    }
    .fv-row.registerSection label {
        margin: 0;
        line-height: 40px;
        font-weight: 400 !important;
    }
    .registerBtn {
        background-color: transparent !important;
        width: auto !important;
        margin-bottom: 0 !important;        
        padding-left: 10px !important;
    }
    .registerBtn:hover, .registerBtn span:hover, .registerBtn.btn.btn-light:hover:not(.btn-active) {
        background-color: transparent !important;
    }
    .registerBtn span {
        color: #e80f0f;
        font-weight: 400 !important;
        text-decoration: underline;
    }
    .termsCheck {
        background-color: #181818 !important;
        border: solid 1px rgba(255,255,255,0.25) !important;
    }
    .form-check.form-check-custom label {
        font-size: 1rem !important;
    }
    /*Personl Detail*/
    .main-content .account_pages .card {
        background-color: transparent;
    }
    .main-content .account_pages .card-title h3 {
        color: #b5b5b5;
    }
    .main-content .account_pages .card-header {
        padding: 0 !important;
    }
    #kt_account_profile_details_form .image-input {
        background-color: #181818;
        border-radius: 50%;
    }
    #kt_account_profile_details_form .image-input .image-input-wrapper {
        background-color: #000;
        border: none;
        border-radius: 50%;
    }
    #kt_account_profile_details_form .image-input label {
        top: 100px;
        width: 25px !important;
        height: 25px !important;
        background-color: #181818 !important;
        right: 10px;
        border: solid 2px #000;
    }
    #kt_account_profile_details_form .image-input span {
        bottom: 0;
        right: -15px;
    }
    #kt_account_profile_details_form .image-input label i::before {
        color: #f00;
    }
    #kt_account_profile_details_form label, #kt_account_profile_details_form label span {
        color: #b5b5b5 !important;
    } 
    #kt_account_profile_details_form .card-body {
        border-top: solid 1px rgba(255,255,255,0.25) !important;
    }
    #country div.css-10a64qh-control {
        background-color: #181818;
        border: solid 1px #595959;
    }
    .notification-switch {
        padding: 5px 0;
    }
    .notification-switch label {
        font-weight: 400 !important;
    }
    .notification-switch .form-check.form-switch {
        color: #b5b5b5;
    }
    .main-content .account_pages .card-footer {
        border-top: solid 1px rgba(255,255,255,0.25) !important;
    }
    #kt_account_profile_details_submit {
        background-color: red;
    }
    /*How to play*/
    .how_to_play_top_btns {
        display: block;
    }
    .nav.howtoplay_options {
        justify-content: space-between;
        margin: 15px 10px;
    }
    .nav.howtoplay_options .nav-item {
        width: 47.5%;
    }
    .nav.howtoplay_options a {
        height: 40px;
        line-height: 18px;
        background-color: transparent;
        border: solid 1px #f20814 !important;
        color: #f20814;
        font-size: 14px !important;
        font-weight: 500 !important;
    }
    .nav.howtoplay_options .nav-link.btn-active.btn-active-light-primary.active {
        background-color: #f20814 !important;
        color: #fff;
    }
    .howtoplay_container {
        padding: 0 !important;
    }
    .howtoplay_container .text-center {
        text-align: left !important;        
    }
    .howtoplay_container .mb-20 {
        margin-bottom: 25px !important;
    }
    .howtoplay_container .shadow {
        box-shadow: 0 .5rem 1.5rem .5rem rgba(0,0,0,.05) !important;
    }
    .howtoplay_container h3 {
        font-weight: 400;
        font-size: 1.2rem;
        line-height: 1.4;
    }
    .disclaimer-statement {
        font-weight: 400 !important;
        text-align: center;
        font-size: 1.2rem !important;
        margin-top: 15px;
    }
    .social_icons {
        display: flex;
        justify-content: space-around;
    }
    .logoLarge {
        display: block;
        background-color: #fff;
        padding: 5px 15px;
        border-radius: 6px;
    }
    #removelast, #addmore {
        color: #b5b5b5 !important;
    }
    /*Profile*/
    .container.profileContainer {
        padding: 0 !important;
        background-color: #ccc;
    }
    .container.profileContainer .card {
        border-radius: 0;
    }
    .followersCount span {
        background-color: #000;
        padding: 7px 10px;
        color: #fff !important;
        border-radius: 5px;
        font-weight: 400 !important;
    }
    .myBio .card-header {
        min-height: 42px;
        background-color: #f5f8fa;
    }
    .myBio .card-header .card-title {
        width: 100%;
    }
    .myBio .card-header .card-title h3 {
        width: 100%;
        text-align: center;
    }
    .myBio .card-body {
        text-align: center;
    }
    .card.myProfileCard {
        max-width: calc(100% - 20px);
        margin: 0 10px;
    }
    .card.myProfileCard .card-header {
        min-height: 42px;
        background-color: #343a40;
        padding: 0 15px;
        border-radius: 0;
    }
    .card.myProfileCard .card-header h3 {
        color: #f5f8fa;
    }
    .card.myProfileCard .card-body {
        padding: 0;
    }
    .card.myProfileCard .card-body .d-flex {
        margin: 0 !important;
        padding: 6px 12px;
        background-color: #f5f8fa;
    }
    .card.myProfileCard .card-body .d-flex:nth-child(even) {
        background-color: #fff;
    }
    .card.myProfileCard .card-title label, .card.myProfileCard .card-title label i {
        color: #f5f8fa !important;
    }
    .myProfileCard .accordion {
        max-width: calc(100% - 20px);
        margin: 0 10px;
    }
    .myProfileCard .accordion .accordion-item {
        border-radius: 0;
    }
    .myProfileCard .accordion .accordion-header button span span {
        margin-top: 5px;
    }
    .event-countdown {
        margin-top: 5px;
        text-align: left;
        width: 100%;
        left: 40px;
        right: 0;
        padding-left: 19px;
    }
    /* .myProfileCard .accordion .accordion-item .accordion-body .card-toolbar.order-2 {
         margin-top: -53px; 
    } */
    .lockButtons {
        position: absolute;
        right: 25px;
        margin-top: 7px;
        width: auto !important;
    }
    /*Leaderboard*/
    .leaderboard_table_wrapper {
        padding: 0 !important;
    }
    .leaderboard-header {
        flex-direction: column;
        align-items: flex-start !important;
        padding-left: 20px;
    }
    .leaderboard_tabs {
        width: calc(100% - 20px);
        margin: 0;
    }
    .leaderboard_tabs .nav {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .leaderboard_tabs .nav .nav-item {
        width: 48%;
    }
    .leaderboard_tabs .d-flex.align-items-center.justify-content-between {
        padding: 0 !important;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .leaderboard_tabs .nav-link {
        background-color: transparent;
        border: solid 1px #f20814;
    }
    .leaderboard_tabs .nav-link.btn.btn-color-muted {
        background-color: transparent;
        border: solid 1px #f20814 !important;
        color: #f20814;
    }
    .nav.tabButtons {
        display: flex;
        justify-content: space-evenly;
    }
    .nav.tabButtons .nav-item {
        width: 32%;
    }
    .nav.tabButtons .nav-item a {
        padding: 5px 15px !important;
    }
    .dropDownSelect {
        margin: 0 !important;
        width: 100%;
    }
    .dropDownSelect .table_input_wrapper_2 {
        width: 100%;
    }
    /*About us*/
    .container.aboutContainer {
        padding: 0 !important;
    }
    .container.aboutContainer #kt_content_container {
        padding: 0;
    }
    .container.aboutContainer .card-body {
        padding-top: 50px;
    }
    /*Invite Friends*/
    .logo-section img {
        background-color: #fff;
        padding: 10px 25px;
        border-radius: 6px;
    }
    /*Club Details*/
    .clubProfileHeader {
        flex-direction: column;
    }
    .clubProfileHead {
        flex-direction: column;
    }
    .clubProfileHead .me-7 {
        margin: 0 !important;
    }
    .profileImageIcons {
        flex-direction: column;
    }
    .profileImageIcons i {
        background-color: #e6e6e8;
        width: 24px;
        height: 24px;
        padding: 5px;
        border-radius: 12px;
        color: #353535 !important;
    }
    .totalMembers {
        color: #f20814 !important;
    }

    /*Public Profile*/
    .publicProfileContainer {
        background-color: #ccc;
        padding: 0 !important;
    }
    .publicProfileContainer .card {
        border-radius: 0;
    }
    .publicProfileContainer .accordion-item {
        border-radius: 0;
    }
    /* .table-responsive {
        border: solid 1px #f1f1f1;
    }
    .table-responsive .sticky-top th {
        border: solid 1px #f1f1f1;
    } */
    .profileImageIcons div {
        display: flex;
        margin-left: -30px;
    }
    .profileImageIcons .mt-2.bi.bi-eye, .profileImageIcons .bi.bi-eye-slash {
        margin-top: -30px !important;
        margin-left: 60px !important;
    }
    .clubActionBtns {
        display: flex;
    }
    .clubActionBtns .btn {
        padding: 8px 12px !important;
        font-size: 1rem;
    }
    .myBio .card-body p {
        text-align: center;
        width: 100%;
    }

    .form-outline.form-search {
        width: 100px;
        position: absolute;
        top: -10px;
        right: 25px;
    }
    .searchField {
        position: absolute;
        right: -65px;
        top: 35px;
    }
    .form-outline.form-search .search-items-list {
        position: absolute;
        top: 70px;
        right: -62px;
        width: 200px;
        min-width: 160px;
    }
    .leaderboard_table_wrapper .tab-content.table_wrapper .container {
        padding: 0 5px;
    }
    .leaderboard_table_wrapper .tab-content.table_wrapper .container tbody tr {
        line-height: 24px;
    }
    .leaderboard_table_wrapper .tab-content.table_wrapper .container tbody .col-4 {
        color: #353535;
    }
    span.leaderPosition {
        position: absolute;
        left: 30px;
        top: 16px;
        background-color: #eee;
        width: 24px;
        height: 24px;
        display: flex;
        border-radius: 12px;
        align-items: center;
        justify-content: center;
        font-weight: 600;
    }
    .home-button
    {
       visibility: visible;
       margin-left: 10px;
    }
}