@media (max-width: 670px) {

    .third-column {
        display:none !important;
    }

    .third-column.open {
        transform: translateX(0); /* 👈 visible */
    }

    body {
        background-color: #2c2c2c !important;
        color: white !Important;
    }

    body.home {
        background-color: #2c2c2c !important;
        color: white !Important;
        height: 100%;
        margin: 0;
    }

    #navbarNav {
        float: right;
        color: white;
        padding-right: 10px;
        display: none !important;
    }

    .navbar-nav li {
        padding-left: 10px;
        font-weight: 500;
        font-size: 12px;
        display: inline-block;
    }

    .searcher_bar {
        border: 1px solid black;
        border-radius: 5px;
        width: calc(100% - 90px) !important;
        margin-bottom: 10px;
    }


    .montserrat-Black {
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-weight: 900;
        font-style: Ialic;
        font-size: 50px;
        color: white;
        margin-left: 10px;
        width: 100%;
    }

    .bg-head3 {
        background-color: #0f63e9;
        width: 100%;
        float: left;
        border-bottom: 1px solid black;
    }


    .nav-head-text {
        width: 100%;
        float: left;
        height: 35px;
        margin-top: -5px;
        padding-left: 10px;
        font-size: 12px;
    }


    .bg-head2 {
        background-color: #0f63e9;
        width: 100%;
        min-height: 85px;
        float: left;
    }


    .notification {
        background-color: #94f594;
        border: none;
        height: 38px;
    }

    .btnsgroup {
        position: absolute;
        height: 40px;
        margin-top: -25px;
        margin-left: -67px;
        z-index: 999999999999999;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }

    .side_options {
        display: none;
    }

    .category_main {
        display: none;
    }

    .third-column1 {
        display: none;
    }

    .left-column1 {
        display: none;
    }

    #profile-gallery-button {
        display: none;
    }

    #edit-profile-button {
        display: none;
    }

    #profile-display-names {
        font-size: 24px;
        color: white !Important;
    }

    #gallery-buttons-for-profile {
        width: 20px;
    }

    .ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 25px;
    }

    .chat-panel {
        display: none;
    }

    #paperclip-attachment {
        display: none;
    }

    .edit-profile-display {
        height: 40px;
        line-height: 40px;
        padding-left: 5px;
        font-size: 28px;
        font-weight: bold;
        text-transform: uppercase;
        color: #000000;
        margin-top: -29px;
        width: calc(100% - 127px);
        margin-bottom: 10px;
        width: 100%;
    }

    .card {
        --bs-card-spacer-y: 1rem;
        --bs-card-spacer-x: 1rem;
        --bs-card-title-spacer-y: 0.5rem;
        --bs-card-title-color: ;
        --bs-card-subtitle-color: ;
        --bs-card-border-width: var(--bs-border-width);
        --bs-card-border-color: var(--bs-border-color-translucent);
        --bs-card-border-radius: var(--bs-border-radius);
        --bs-card-box-shadow: ;
        --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
        --bs-card-cap-padding-y: 0.5rem;
        --bs-card-cap-padding-x: 1rem;
        --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
        --bs-card-cap-color: ;
        --bs-card-height: ;
        --bs-card-color: ;
        --bs-card-bg: var(--bs-body-bg);
        --bs-card-img-overlay-padding: 1rem;
        --bs-card-group-margin: 0.75rem;
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        height: var(--bs-card-height);
        color: #ffffff;
        word-wrap: break-word;
        background-color: #2c2c2c;
        background-clip: border-box;
        border-radius: var(--bs-card-border-radius);
        border: 1px solid #3a3a3a;
    }

    .comment_show_area {
        min-height: 40px;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
        border-top: 1px solid #3a3a3a;
        background-color: #ff572205;
    }

    .newcard-title {
        margin-left: 10px;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: bold;
        margin-top: -26px;
        color: #ffffff;
    }


    .link-preview {
        width: 100%;
        margin-top: 0px;
        margin-bottom: 0px;
        border-top: 1px solid #dedede;
        padding: 10px;
        margin-left: 0px;
        background-color: #343434;
        font-size: 12px;
        display: none;
        border-top: 1px solid #3a3a3a;
        padding-top: 10px;
    }

    .image-profile-area {
        width: 100%;
        border-top: 1px solid #3a3a3a;
        padding-top: 5px;
        padding-left: 10px;
        padding-bottom: 10px;
    }

    .form-control {
        color: #797979 !important;
        background-color: #2a2a2a !important;
        border: 1px solid #373839 !important;
    }

    .form-control::placeholder {
        color: #797979 !important;
    }

    #text-profile {
        height: 35px;
        max-height: 200px;
        overflow-y: hidden;
        vertical-align: top;
        width: calc(100% - 145px);
        float: left;
        margin-left: 10px;
        margin-right: 10px;
        font-size: 13px;
        resize: none;
        border-radius: 6px;
        background: #3f3f3f;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
        padding-right: 55px;
        margin-top: 11px;
        color: white !important;
        border: 1px solid #696969;
    }

    .border-top {
        border-top: 1px solid #3a3a3a !important;
    }

    .comment-text-profile {
        height: 35px;
        max-height: 200px;
        overflow-y: hidden;
        vertical-align: top;
        width: calc(100% - 55px);
        float: left;
        margin-left: 10px;
        font-size: 13px;
        resize: none;
        border-radius: 6px;
        background: #3f3f3f;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
        margin-top: 11px;
        border: 1px solid #5e5e5e;
        color: #8e8e8e !important;
    }

    .post-box {
        position: relative;
        width: 100%;
        min-height: 60px;
        border: 1px solid #414141;
        align-items: flex-start;
    }

    .carousel-item {
        border: 1px solid #717171;
        border-radius: 10px;
        background-color: #686868 !important;
    }

    .profile-space-area {
        border-bottom: 1px solid #494949 !important;
    }

    .footer-c {
        border-top: 1px solid #414141;
        position: fixed;
        height: 35px;
        width: 100%;
        bottom: 0;
        padding-left: 10px;
        line-height: 35px;
        text-transform: uppercase;
        font-weight: 400;
        color: #5f5f5f;
        font-size: 13px;
        z-index: 999999999999999;
        background-color: #1d1e20 !important;
    }

    .chat-panel {
        position: absolute;
        width: 30px;
        height: 30px;
        border: 1px solid #414141;
        background-color: #2c2c2c;
        right: 20px;
        margin-top: -30px;
        background-image: url(../img/bookmark.png);
        background-repeat: no-repeat;
        border-bottom: none;
        background-position: center;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        cursor: pointer;
    }

    #search_for {
        color: #5e5e5e !Important;
    }

    #search_for::placeholder {
        color: #5e5e5e !Important;
    }

    .bg-head1 {
        background-color: #00138c;
        width: 100%;
        height: 45px;
        float: left;
    }

    .bg-head2 {
        background-color: #01159c;
        width: 100%;
        min-height: 85px;
        float: left;
    }

    .bg-head3 {
        background-color: 01159c;
        width: 100%;
        float: left;
        border-bottom: 1px solid black;
    }

    .bg-head3 ul li {
        float: left;
        list-style: none;
        color: white;
        margin-right: 15px;
        background-color: #00138c;
        height: 37px;
        line-height: 35px;
        padding-right: 12px;
        padding-left: 12px;
        border-radius: 5px;
    }

    .gallery-display-button {
        color: white !Important;
    }

    .edit-profile-display {
        height: 40px;
        line-height: 40px;
        padding-left: 5px;
        font-size: 28px;
        font-weight: bold;
        text-transform: uppercase;
        color: #ffffff;
        margin-top: -29px;
        width: calc(100% - 127px);
        margin-bottom: 10px;
        width: 100%;
    }

    .edit-profile-area {
        border-color: black !Important;
        border: 1px solid black !important;
    }

    .nav-tabs .nav-link {
        margin-bottom: -2px;
    }

    .nav-link {
        background-color: #2c2c2c;
        border-color: black;
    }

    .nav nav-tabs {
        border-bottom: 1px solid #363636;
        margin-top: 0px;
    }

    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        color: #655f60;
        background-color: #2a2a2a;
        border-color: black;
    }

    ul.nav-tabs {
        border-color: #333333 !Important;
        margin-top: 0px;
    }

    .button-for-next {
        background-color: black;
        color: white;
        border-color: #4e4e4e;
        margin-left: 10px;
        margin-top: -5px;
    }

    .searcher-input-group {
        background-color: #1c1d1f;
        border-color: #262825;
        color: #5e5e5e;
    }

    #button_notif {
        font-weight: 500;
        background-color: #1c1d1f !important;
        border-color: black;
        color: white;
    }

    .notification {
        background-color: #1c1d1f;
        border: none;
        height: 38px;
        border-left: 1px solid #343434;
    }

    .timeago {
        color: #707070 !important;
    }

    #profile-menu {
        width: 100%;
        position: fixed;
        z-index: 999;
        height: 100%;
        background-color: rgb(44, 44, 44);
        left: -700px;
        width: 260px;
        top: 0;
        border-right: 3px solid #000000;
        display: inline-block;
    }

    #show-profile-menu {
        cursor: pointer;
        font-size: 13px;
    }

    .category_main {
        cursor: pointer;
        font-size: 13px;
        color: white;
    }

    #category_main_ul {
        cursor: pointer;
        font-size: 13px;
    }

    .side-button-profile {
        cursor: pointer;
    }


    .name-data {
        text-shadow: 2px 2px 5px rgb(0 0 0);
        text-transform: uppercase;
        font-size: 15px !important;
    }

    .profile_information li {
        height: 20px;
        line-height: 20px;
        padding-left: 10px;
        color: #fffefe;
    }

    .profile_information a:hover {
        text-decoration: none;
    }

    .profile_information li:hover {
        background-color: none;
    }

    .profile-detail {
        font-size: 14px;
        padding-top: 5px;
    }

    .chat-bar-top {
        min-height: 50px;
        height: 50px;
        border-bottom: 1px solid #dedede;
        background-color: #1D1E20;
    }

    .edit_chats_box {
        display: inline-block;
        margin-left: 0px;
        margin-right: 10px;
        font-size: 19px;
        margin-top: 2px;
        cursor: pointer;
        color: #fff;
    }

    .search-chat-area {
        height: 40px;
        border-bottom: 1px solid #dedede;
        background-color: #1d1e20;
        border-top: 1px solid #515254;
        margin-top: -1px;
    }

    .scroll-area {
        height: calc(100vh - 130px);
        overflow-y: auto;
        margin-top: -3px;
        border-top: 1px solid #515254;
        z-index: 99999;
    }

    .text-area-desc1 {
        color: white ! Important;
        font-size: 13px;
    }

    .text-area-title {
        border: 0px;
        outline: none;
        font-size: 16px;
        background-color: transparent;
        font-weight: bold;
        color: white;
    }

    .active_card {
        width: 100%;
        border-radius: 0px;
        background-color: #1D1D1D;
        color: #ffffff !important;
        border-color: #515254;
        border-left: none;
        border-right: none;
    }

    .inactive_card {
        width: 100%;
        background-color: #1d1d1d;
        border-radius: 0px;
        color: black !important;
        border-color: black;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #515254;
    }

    #chat_room_list {
        width: 275px;
        height: calc(100vh - 110px);
    }

    .left-column {
        display: inline-block;
        position: absolute;
        z-index: 999;
        border-right: 1px solid #525252;
        margin-top: 0px;
        left: 0px;
        height: calc(100vh - 110px);
        background-color: #1d1d1d;
        touch-action: pan-y;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.4);
    }



    .input-group-text {
        background-color: #1d1e20 !important;
        border: none !important;
    }

    .scroll-area2 {
        min-height: calc(100vh - 130px);
        overflow-y: auto;
        margin-top: -3px;
        border-top: none;
    }

    .right-column {
        flex: 1;
        background-color: #1D1E20;
        padding: 10px;
        border-left: none;
        min-height: calc(100vh - 160px);
        padding: 0px;
    }

    .chatroom_desc {
        width: calc(100% - 135px);
        border-bottom: none;
        font-size: 12px;
        color: #a5a5a5;
        margin-left: 5px !Important;
    }

    #slider-left {
        display: inline-block;
        color: #ffffff;
    }

    .btn {
        font-size: 15px;
    }

    .chatroom_title {
        font-size: 16px;
        height: 40px;
        margin-left: 5px ! Important;
        padding-top: 7px;
    }

    #chat-buttons {
        width: 80px;
        height: 32px;
        margin-top: 18px ! Important;
        float: right;
        margin-right: -5px;
    }

    #chat-buttons .btn {
        font-size: 13px;
        padding-left: 5px;
        padding-right: 0px;
    }

    .news-title {
        display: none;
    }

    #chatroom_15_options {
        position: relative;
        top: 0px;
        border-bottom: 1px solid #525252;
        width: 100%;
        z-index: 9;
        min-height: 150px;
        background-color: #1F1F1F;
        margin-left: 0px;
        padding: 16px;
        padding-bottom: 5px;
        padding-top: 5px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
        display: none ! Important;
        width: 100% !important;
        float: left;
        border-top: 1px solid #474747;
    }

    .close_btn {
        float: right;
        color: #ffffff ! Important;
        margin-top: -2px;
        font-size: 20px;
    }

    .news-buttons {
        font-size: 10px;
    }

    .input-group-text {
        background-color: #1D1E20;
        color: grey;
        border-color: #3f3f3f;
    }

    .news-title {
        font-size: 13px;
        font-weight: bold;
        text-transform: capitalize;
        color: #ffffff;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        font-size: 10px;
    }


    .message_load_area {
        font-size: 12px;
        line-height: 25px;
        padding-top: 20px;
        padding-bottom: 30px !important;
        background-color: #1f1f1f !important;
    }

    .news-content {
        flex: 1;
        margin-left: 9px;
    }

    .side-arrow-mob {
        width: 21px;
        height: 25px;
        z-index: 999;
        margin-top: -4px;
        font-size: 22px;
        display: inline-block;
        color: #fff;
    }

    .badge {
        display: none;
    }

    .chat_send_area {
        height: 55px;
        border: 1px solid #000000;
        background-color: #48494b;
        margin-bottom: 0px;
        border-bottom: none;
        border-radius: 10px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        padding-left: 0px;
        padding-right: 0px;
        z-index: 99;
        margin-top: 5px !important;
    }

    #text-for-chat {
        height: 54px;
    }

    #top-head-area {
        display: none;
    }

    .chat-send-area {
        font-size: 36px;
        line-height: 60px;
        background-color: #1f1f1f;
        margin-top: 5px !important;
        border-color: #1f1f1f !important;
    }

    .form-control-textarea {
        display: block;
        width: 100%;
        padding: .375rem .75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--bs-body-color);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #48494b !Important;
        background-clip: padding-box;
        border: none !important;
        border-radius: var(--bs-border-radius);
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        overflow: hidden;
    }

    .see-more {
        float: left;
        margin-top: -2px;
        height: 30px;
        font-size: 12px;
    }

    .form-control-textarea {
        display: block;
        width: 100%;
        padding: .375rem .75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--bs-body-color);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: var(--bs-body-bg);
        background-clip: padding-box;
        border: none !important;
        border-radius: var(--bs-border-radius);
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        overflow: hidden;
    }

    .see-more-2 {
        float: left;
        margin-top: 8px;
        height: 30px;
        font-size: 12px;
    }

    .send_button_c {
        width: 25px;
        height: 28px;
        float: left;
        font-size: 17px;
        line-height: 25px;
        cursor: pointer;
        margin-right: 5px;
        color: #ffffff;
    }

    .textarea-autofocus {
        border-color: none !important;
        outline: 0;
        box-shadow: none !important;
    }

    .send_button {
        width: 29px;
        height: 30px;
        margin-top: -49px;
        float: right;
    }

    .list-group-item:hover {
        width: 100%;
        border-radius: 0px;
        background-color: #2a2a2a !important;
        color: black !important;
    }

    .black_heart {
        color: white;
    }

    .chat_list_area {
        background-color: #1d1d1d;
        min-height: calc(100vh - 195px);
    }

    .username-area {
        font-size: 14px;
        padding-left: 0px;
        border-radius: 0px;
        background-color: #1d1e20 !important;
        border: none !important;
    }

    .inside-chat-ui {
        border-left: none !important;
        background-color: #1d1e20 !Important;
    }

    .inside-chat-ui ul li {
    padding-left: 10px;
    padding-bottom: 7px;
    color: #ffffff;
    font-size: 13px;
    }

    .third-column,
    .left-column {
        pointer-events: auto;
    }

    body {
        pointer-events: auto;
    }

    .user-list-chatroom {
        position: absolute;
        width: 55%;
        height: calc(100% - 40px) !important;
        z-index: 99999999999;
        background-color: #1d1d1d;
        border-left: 1px solid #353535;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.4);
        right: 0;
        display: none;
    }

    .user-list-chat-titles {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #515254;
    }

    .user-list-chatroom {
        transform: translateX(100%);
    }
    .user-list-chatroom.open {
        transform: translateX(0);
    }

    .chat_buttons {
        width: 80px;
        height: 30px;
        margin-top: -28px;
        float: right;
        margin-right: -25px;
    }

    #chat_list_mob {
        font-size: 12px;
    }

    .inside-mob-ui-img {
        border-radius: 5px;
        border: 1px solid black;
        height: 35px;
        width: 35px;
    }

    .user-mob-appended {
        display: flex;
        align-items: center;
        width: 100%;
        height: 35px;
        padding: 5px;
        margin-top: 5px;
    }

    .avatar-mob {
        width: 29px;
        height: 30px;
        flex-shrink: 0;
    }

    .inside-mob-ui-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .details-mob {
        flex: 1;
        margin-left: 10px;
        height: 40px;
    }

    .top-row-mob {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
    }

    .name-mob {
        font-weight: 500;
        height: 20px;
        margin-top: -5px;
    }

    .status-mob {
        font-size: 11px;
        color: gray;
    }

    .username-mob {
        font-size: 10px;
        color: white !important;
        margin-top: -4px;
    }

    .mob_status_icon {
        height: 20px;
        width: 20px;
        position: absolute;
        right: 0px;
        font-size: 8px;
        margin-top: 0px;
    }
}