@import url('https://fonts.cdnfonts.com/css/outfit');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif !important;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6,
p{
    margin-bottom: 0;
}
.row > *{
    padding: 0;
    margin: 0;
    width: initial;
    max-width: initial;
}

/* 
html{
    font-size: 62.5%;
}
.mainSection{
    display: flex;
}
.mainSection .sidebar{
    width: 35.5rem;
    background: #15191C;
    height: max-content;
    min-height: 100vh;
padding: 4rem 3rem;
}
.mainSection .sidebar .logo{
    margin-left: 1rem;
}
.mainSection .sidebar nav{
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-top: 5rem;
}
.mainSection .sidebar nav a{
    font-size: 2rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    align-items: center;
    text-decoration: none;
    color: white;
}
.mainSection .mainContainer {

    width: -webkit-fill-available;
}
.mainSection .mainContainer .header{
    width: 100%;
}
.mainSection .mainContainer .header .dropdown{
    position: relative;
    margin-left: auto;
    width: max-content;
}
.mainSection .mainContainer .header .dropdownButton img{
    width: 4rem;
    height: 4rem;
}
.mainSection .mainContainer .header .dropdownButton{
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: 2rem;
}
.mainSection .mainContainer .header  .dropdownMenu{
    width: 16rem;
    height: 10.9rem;
    padding: 1.5rem 0 ;
    padding-left: 3.6rem;
    position: absolute;
    top: 100%;
    right: 0;
    background: #323232;
    box-shadow: 0px -5px 20px 0px #0000001A;
border-radius: 1.5rem;
}
.mainSection .mainContainer .header .dropdownMenu a{
font-size: 2rem;
color: white;
text-decoration: none;
} */


h2{
    color: white !important;
}
.wrapper{
    padding-top: 0;
}
body{
    background: #15191C;
}
header{
        position: sticky;
    margin: 26px auto;
    padding: 14px 40px;
    border-radius: 50px;
    max-width: 1228px;
    display: flex;
        z-index: 2;
    justify-content: space-between;
    align-items: center;
    background: #0E1012;
    top: 26px;
    box-shadow: 5px 5px 5px #15191c63;

}
header::before{
    content: "";
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 70px;
    z-index: 1;
}
header .logo{
    width: 105px;
}
header form{
    background: #15191C;
    display: flex;
    padding: 10px;
    border-radius: 5rem;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
header form input{
    background: transparent;
    color: white;
    border: 0;
    font-size: 16px;
}
.dropdown{
    position: relative;
}
.dropdown .dropdownButton{
    position: relative;
}
.dropdown .dropdownButton input{
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    cursor: pointer;
    top: 0;
}
.dropdown .dropdownMenu{
    display: none;
    padding: 16px 18px;
    border-radius: 10px;
        right: 0;
    z-index: 12;
    width: max-content;
    position: absolute;
    top: calc(100% + 16px);
    box-shadow: 0px -5px 20px 0px #0000001A;
    background: #F8F8F8;
    flex-direction: column;
    gap: 8px;
}
.headerdropdown .bg,
.dropdown .bg{
    display: none;
    width: 100%;
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 11;
}
.headerdropdown:has(input:checked) .bg,
.dropdown:has(input:checked) .bg,
.dropdown:has(input:checked) .dropdownMenu{
    display: flex;
}
.dropdown .dropdownMenu a{
    color: black;
    font-size: 16px;
        text-align: left;
    text-decoration: none;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    align-items: center;
}
header .right {
    gap: 6px;
    position: relative;
    z-index: 2;
    display: flex;
}
header .right button{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 44px;
    border: 0;
    height: 44px;
    border-radius: 100%;
    background: #15191C;
}
header .right form button{
    padding: 0;
    width: 24px;
    height: 24px;
}
.headerdropdown{
        height: max-content;
    position: relative;
    margin-left: 60px;
}
.headerdropdown .dropdownButton{
    position: relative;
    gap: 6px;
    align-items: center;
    display: flex;
}
.headerdropdown .dropdownButton input{
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    opacity: 0 !important;
}
.headerdropdown .dropdownButton > img.pfp{
    width: 44px;
    border-radius: 100%;
    height: 44px;
}
.headerdropdown .dropdownButton h2{
    font-size: 16px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    color: white !important;
    letter-spacing: 0 !important;
}
.headerdropdown .dropdownButton h2 span{
    font-size: 12px;
    color: #5D5D5D;
    text-align: right;
}
.comingSoon {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    gap: 20px;
    width: 100vw;
    align-items: center;
    padding-top: 40px;
}
@media screen and (max-height : 550px) {
@media screen and (min-height : 642px) {
    .comingSoon {
    justify-content: center;
    }
}
}
.comingSoon .logo{
    margin-bottom: 56px;
}
.comingSoon p{
    font-size: 12px;
    color: white;
}
.comingSoon p.bottom{
    color: #5D5D5D;
}
.comingSoon h1{
    font-size: 48px;
    font-weight: 400;
    color: white !important;
    margin-bottom: 20px;
    text-align: center;
}
.comingSoon h1 span{
    font-weight: 600;
    color: #01ADF1;
}
.comingSoon form{
    width: 361px;
    height: 46px;
    padding: 5px;
    padding-left: 16px;
    display: flex;
    align-items: center;
  border: 1px solid #5D5D5D;
  border-radius: 50px;
    justify-content: space-between;
}

.comingSoon form input{
    font-size: 16px;
    color: #5D5D5D;
    background: transparent;
    border: 0;
}
.comingSoon form button{
    padding: 8px 11px;
    border-radius: 100px;
    font-size: 16px;
    color: white;
    background: linear-gradient(90deg, #01ADF1 0%, #A61651 100%);
    border: 0;
}
.headerdropdown .dropdownMenu{
    padding: 15px;
    flex-direction: column;
    background: #0E1012;
    border-radius: 10px;
    box-shadow: 0px -5px 20px 0px #0000001A;
    gap: 5px;
    position: absolute;
    top: calc(100% + 25px);
    right: 0;
    z-index: 12;
    display: none;
}
.headerdropdown:has(input:checked) .dropdownMenu{
    display: flex;
}
.headerdropdown .dropdownMenu a{
    font-size: 16px;
    color: white;
    text-wrap: nowrap;
    text-decoration: none;
}
.headerdropdown .dropdownMenu a:hover{
    color: white;
}
.mainSection{
    display: flex;
    padding-right: 26px;
    padding-left: 20px;
    justify-content: center;
    width: 100%;
    gap: 53px;
}
.mainSection .sidebar{
    width: 242px;
    padding: 46px 0;
    padding-left: 32px;
    border-radius: 22px;
    background: #0E1012;
    display: flex;
    flex-direction: column;
    gap: 32px;
        height: max-content;
}
.mainSection .sidebar a{
    font-size: 16px;
    color: #5D5D5D;
    cursor: pointer;
    display: flex;
    text-decoration: none;
    gap: 15px;
    align-items: center;
}
.mainSection .sidebar a:hover img:not(.active),
.mainSection .sidebar a.active img:not(.active),
.mainSection .sidebar a img.active{
    display: none;
}
.mainSection .sidebar a:hover img.active,
.mainSection .sidebar a.active img.active{
    display: block;
}
.mainSection .sidebar a:hover,
.mainSection .sidebar a.active {
    color: white;
}
.mainSection .sidebar .logo{
    margin-bottom: 23px;
    display: none;
    max-width: 161px;
}
.mainSection.messages .sidebar .logo{
    display: block;
}
.mainSection .sidebar a.sidebarLogout{
    margin-top: 23px;
}
.mainSection .mainFeed{
    width: 100%;
    max-width: 906px;
}
.mainSection:has(.rightsidebar) .mainFeed{
    max-width: 584px;
}
.mainSection .mainFeed.feed{
    width: 71vw;
}
.mainSection .mainFeed .createPost{
    width: 100%;
    cursor: pointer;
    padding: 8px;
    padding-left: 36px;
    gap: 11px;
    display: flex;
    align-items: center;
    background: #0E1012;
    margin-bottom: 20px;
    border-radius: 50px;
}
.mainSection .mainFeed .createPost input{
    font-size: 16px;
    margin-right: auto;
    background: transparent;
    border: 0;
    margin-right: auto;
width: 50%;
    color: #5D5D5D;
}
.mainSection .mainFeed .createPost button:not(.addpost){
    width: 54px;
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 100%;
    cursor: pointer;
    background: #15191C;
}
.mainSection .mainFeed .createPost button.addpost{
    cursor: pointer;
    padding: 14px 24px;
    border-radius: 50px;
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%);
    font-size: 20px;
    color: white;
    border: 0;
    font-weight: 500;
}
.mainSection .mainFeed .stories{
display: flex;
gap: 20px;
margin-bottom: 20px;
max-width: 100%;
overflow: scroll;
}

.mainSection .posts .popular .popularContainer::-moz-scrollbar,
.mainSection .posts .popular .popularContainer::-webkit-scrollbar,
.mainSection .mainFeed .stories::-moz-scrollbar,
.mainSection .mainFeed .stories::-webkit-scrollbar{
    display: none;
}

.mainSection .post .row .col-md-12,
.mainSection .post .row{
    padding: 0 !important;
    width: 100%;
}
.mainSection .post .row{
    width: 100%;
}
.mainSection .mainFeed .stories .add{
    width: 133px;
    height: 186px;
    border-radius: 16px;
    background: linear-gradient(180deg, #A61651 0%, #01ADF1 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    padding-bottom: 16px;
    font-size: 16px;
    color: white;
 
    border: 0;   min-width: 133px;
}
.mainSection .mainFeed .stories .story::before{
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(14, 16, 18, 0) 44%, rgba(14, 16, 18, 0.88) 80%);
}
.mainSection .mainFeed .stories .story{
      font-size: 16px;
    color: white;   min-width: 133px;
    position: relative;
        width: 133px;
    height: 186px;
    border-radius: 16px;
    flex-direction: column;
    background-size: cover;
    display: flex;
    justify-content: flex-end;
    border-radius: 16px;
    overflow: hidden;
    align-items: center;
    padding-bottom: 16px;
    background-position: center;
}
.mainSection .mainFeed .stories .story img,
.mainSection .mainFeed .stories .story p{
    position: relative;
    z-index: 1;
}
.mainSection .post{
    width: 100%;
    padding: 13px 20px;
    background: #0E1012;
    border-radius: 22px;
}
.mainSection .post .postHeader{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.mainSection .post .postHeader .user{
    display: flex;
    gap: 6px;
    align-items: flex-start;
}
.mainSection .post .postHeader .user p{
    font-size: 16px;
    color: white;
    display: flex;
    flex-direction: column;
}
.mainSection .post .postHeader .user > img:first-child{
    width: 44px;
    height: 44px;
    border-radius: 100%;
}
.mainSection .post .postHeader .user p span{
    color: #5D5D5D;
    font-size: 12px;
}
.mainSection .post .postHeader .user .verified{
    margin-top: 8.5px;
}
.mainSection .post .postHeader .time{
    display: flex;
    font-size: 16px;
    margin-left: auto;
    color: #5D5D5D;
    gap: 18px;
    align-items: center;
}
.mainSection .post .postHeader .time button{
    height: 24px;
    background: transparent;
    border: 0;
}
.mainSection .post .postHeader .time .postOptions{
    position: relative;
}
.mainSection .post .postHeader .time .postOptions > button{
    position: relative;
}
.mainSection .post .postHeader .time .postOptions > button input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0 !important;
}
.mainSection .post .postHeader .time .postOptions .dropdown{
    position: absolute;
    background: white;
    padding: 16px;
    background: #F8F8F8;
    box-shadow: 0px -5px 20px 0px #0000001A;
    border-radius: 10px;
    display: none;
    flex-direction: column;
    right: 0;
    top: calc(100% + 16px);
    gap: 10px;
}
.mainSection .post .postHeader .time .postOptions:has(input:checked) .dropdown{
    display: flex;
    z-index: 11;
}
.mainSection .post .postHeader .time .postOptions .dropdown a,
.mainSection .post .postHeader .time .postOptions .dropdown button{
        gap: 8px;
        text-decoration: none;
        color: black;
        align-items: center;
    display: flex;
} 
.mainSection .post .caption a,
.mainSection .post .caption{
    font-size: 16px;
    color: white;
    margin-top: 14px;
}
.mainSection .post .caption .pin-action{
    display: none;
}
.mainSection .post .images{
    margin-top: 25px;
    gap: 20px;
    display: flex;
}
.mainSection .post .cols:first-child{
    width: 518px;
    height: 356px;
    border-radius: 22px;
    overflow: hidden;
}
.mainSection .post .cols:first-child img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mainSection .post .cols:last-child{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 326px;
}
.mainSection .post .cols:last-child .img{
    width: 100%;
    height: 168px;
    border-radius: 22px;
    overflow: hidden;
    
}
.mainSection .post .cols:last-child .img img{
width: 100%;
height: 100%;
}
.mainSection .post .cols:last-child .img.blurred{
position: relative;
}
.mainSection .post .cols:last-child .img.blurred p{
    font-size: 20px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
}
.mainSection .post .img .col-md-12,
.mainSection .post .img .row{
    padding: 0;
}
.mainSection .post .img .row{
        padding: 0 !important;
    border-radius: 22px;
    overflow: hidden;
    margin-top: 16px !important;
}
.mainSection .post .img .row .intro_add_video_box{
    margin-bottom: 0;
}
.mainSection .post .engage{
    width: 100%;
    display: flex;
    gap: 36px;
    margin-top: 20px;
    align-items: center;
}
.mainSection .post .engage button{
    font-size: 16px;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    width: max-content;
    height: max-content;
}
.mainSection .post .engage button.tip{
    margin-left: auto;
}
.mainSection  .comments{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 37px;
}
.mainSection  .comments .commentContainer{
    width: 100%;
}
.mainSection  .comments .commentContainer .commentBox{
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.mainSection  .comments .commentContainer .commentBox.reply{
    margin-left: 102px;
    margin-top: 24px;
}
.mainSection  .comments .commentContainer .commentBox > img{
    width: 40px;
    height: 40px;
    border-radius: 100%;
}
.mainSection  .comments .commentContainer .commentBox.reply > img{
    width: 28px;
    height: 28px;
}
.mainSection  .comments .commentContainer .commentBox .commentContent{
}
.mainSection  .comments .commentContainer .commentBox .commentContent .commentText{
    padding: 12px 20px;
    background: #181D21;
    border-radius: 8px;
}
.mainSection  .comments .commentContainer .commentBox .commentContent .commentText{
        position : relative
    }
    
.mainSection  .comments .commentContainer .commentBox .commentContent  .commentText .actionButtons{
    position : absolute;
    top : 50%;
    transform : translateY(-50%);
    left  : calc(100% + 5px);
}
.mainSection  .comments .commentContainer .commentBox .commentContent  .commentText .actionButtons button{
    background : transparent;
    border : 0
}
.hidden_comment_more_bt button{
    border: 0;
    width: max-content;
    text-decoration: underline;
    padding: 0;
    margin-left: 37px;
}
.hidden_comment_input_box textarea{
    border: 1px solid #5D5D5D;
    background: transparent;
    outline: none;
    box-shadow: none;
    color: #5D5D5D;
}
.hidden_comment_input_box{
        display: flex;
        gap: 10px;
    align-items: center;
}
.hidden_comment_input_box .feed_emoji::before{
    display: none;
}
.mainSection  .comments .commentContainer .commentBox .commentContent h2{
    font-size: 20px;
    color: white;
    font-weight: 400;
}
.mainSection  .comments .commentContainer .commentBox .commentContent p{
    font-size: 16px;
    color: white;
}
.mainSection  .comments .commentContainer .commentBox .commentContent .engage{
    display: flex;
    gap: 30px;
    margin-top: 16px;
}
.mainSection  .comments .commentContainer .commentBox .commentContent .engage button,
.mainSection  .comments .commentContainer .commentBox .commentContent .engage p{
    background: transparent;
    border: 0;
    font-size: 16px;
    color: #5D5D5D;
}
.mainSection  .comments .commentContainer .commentBox .commentContent button{}
.mainSection .posts{
    display: flex;
    flex-direction: column;
    gap: 35px;
}
.mainSection .posts .popular{
    width: 100%;
    /* margin-top: 35px; */
}

.mainSection .posts .popular h2 a,
.mainSection .posts .popular h2{
font-size: 16px;
color: white;
font-weight: 500;
display: flex;

justify-content: space-between;
align-items: center;
}
.mainSection .posts .popular h2{
    margin-bottom: 17px;
}
.mainSection .posts .popular .popularContainer{
display: flex;
justify-content: space-between;
/* margin-bottom: 35px; */
gap: 42px;
max-width: 100%;
overflow: scroll;
}
.mainSection .posts .popular .popularUser {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mainSection .posts .popular .popularUser img{
    width: 89px;
    height: 89px;
    border-radius: 100%;
    margin-bottom: 10px;
}
.mainSection .posts .popular p{
    font-size: 16px;
    font-weight: 500;
    color: white;
}
.mainSection .posts .post:has(video) .videoContainer{
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    margin-top: 25px;
}
.mainSection .posts .post:has(video) .videoContainer video{
    width: 100%;
}
.mainSection .posts .post:has(video) .videoContainer button{
    height: 51px;
    width: 132px;
    gap: 10px;
    align-items: center;
    font-size: 20px;
    color: white;
    justify-content:flex-start;
    background: #15191C;
    display: flex !important;
    border-radius: 50px;
    position: absolute;
    border: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.mainSection .posts .post:has(.blurred) .img{
    overflow: hidden;
    width: 100%;
    max-width:520px;
    border-radius: 22px;
    position: relative;
}
.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_processing{
    display: none !important;
        height: max-content;
    padding: 8px 0;
}
.mainSection .posts .post .img .lockImg{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.mainSection .posts .post .img .lockImg button{
    width: 50px;
    height: 50px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    background: #15191CA6;
    border: 0;
    align-items: center;
}
.mainSection .posts .post .img .lockImg img{
    margin-right: 0;
}
.mainSection .posts .post .img .lockImg p{
    padding: 10px;
    background: #15191CA6;
    border-radius: 10px;
    font-size: 12px;
    color: white;
    margin-top: 10px;
}
.mainSection.userProfilePage{
    margin-top: 50px;
}
.mainSection .dashboard{
    padding: 30px;
    background: #0E1012;
    border-radius: 22px;
    
}
.mainSection .DashboardSecHeading{
    font-size: 20px;
    color: white !important;
    font-weight: 400;
    margin-bottom: 30px;
}
.mainSection .dashboard .pfp{
    display: flex;
    align-items: center;
    margin-bottom: 52px;
}
.mainSection .dashboard .pfp > img{
    width: 81px;
    height: 81px;
    border-radius: 100%;
    margin-right: 20px;
}
.mainSection .dashboard .pfp h2{
    font-size: 20px;
    color: white;
    font-weight: 400;
    display: flex;
    flex-direction: column;
}
.mainSection .dashboard .pfp h2 span{
    font-size: 16px;
    color: #5D5D5D;
    font-weight: 400;
}
.mainSection .dashboard button{
    padding: 10px;
    font-size: 12px;
    color: white;
    background: #15191C;
    border-radius: 9px;
    border: 0;
    margin-left: 10px;
}
.mainSection.userProfilePage .mainFeed > h1{
    font-size: 20px;
    color: white;
    font-weight: 400;
    margin-bottom: 23px;
}
.mainSection.support .mainFeed,
.mainSection.settings .mainFeed{
    padding: 0;
    background: transparent;
}
.mainSection.support .mainFeed .mainFeedContainer,
.mainSection.settings .mainFeed .mainFeedContainer{
    padding: 20px 26px;
    border-radius: 22px;
    background: #0E1012;
}
.mainSection.support .mainFeed .mainFeedContainer h1{
    font-size: 16px;
    color: white;
    font-weight: 400;
}
.mainSection.settings .mainFeed > h1{
    margin-top: 20px;
    margin-left: 25px;
}
.mainSection.settings .mainFeed .coverPhoto h1,
.mainSection .dashboard .emailAddress h1{
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 400;
    color: white;
}
.mainSection.settings .mainFeed .coverPhoto h1{
    margin-bottom: 24px;
}
.mainSection.settings .dashboard .coverPhoto{
    width: 100%;
}
.mainSection.settings .dashboard .coverPhoto > img{
    width: 100%;
    max-height: 136px;
    object-fit: cover;
    border-radius: 22px;
    margin-bottom: 25px;
}
.mainSection.settings .dashboard .coverPhoto .title{
    display: flex;
    width: 100%;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #15191C;
    align-items: center;
}
.mainSection.settings .dashboard .pfp > img{
    width: 58px;
    margin-right: 15px;
    height: 58px;
}
.mainSection.settings .dashboard .pfp h2,
.mainSection.settings .dashboard .coverPhoto .title h2{
    font-size: 16px;
    color: white;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    margin-right: auto;
}
.mainSection.settings .dashboard .pfp h2 span,
.mainSection.settings .dashboard .coverPhoto .title h2 span{
    font-size: 12px;
    color: #5D5D5D;

}
.mainSection .dashboard .email{
    display: flex;
    width: 100%;
    justify-content: space-between;
    /* margin-bottom: ; */
    padding-bottom: 15px;
    border-bottom: 1px solid #15191C;
    align-items: center;
}
.mainSection .dashboard .email form label{
    font-size: 12px ;
    color: #5D5D5D;
    margin-bottom: 7px;
    display: flex;
}
input{
    outline: none;
}
a,
button{
    cursor: pointer;
}
.mainSection .dashboard .email form .input{
    width: 332px;
    height: 36px;
    border: 1px solid #15191C;
    border-radius: 8px;
    padding-left: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mainSection .dashboard .email form .input input{
    font-size: 12px;
    color: #5D5D5D;
    background: transparent;
    border: 0;
    outline: none;

}
.mainSection .dashboard .emailAddress.password {
    margin-top: 30px;
}
.mainSection .dashboard .emailAddress.password form{
    gap: 20px;
    display: flex;
}
.mainSection .dashboard .emailAddress.password form button{
    padding: 0;
    background: transparent;
    margin-left: auto;
    margin-right: 10px;
}
.mainSection .dashboard .security {
    margin-top: 15px;
}
.mainSection .dashboard .security .email{
    justify-content: flex-start;
    gap: 15px;
}
.mainSection .dashboard .security .email button{
    align-items: center;
    display: flex;
    gap: 10px;
    margin-left: 0;
}
.mainSection.profileEdit .dashboard .changePfp{
    display: flex;
    flex-direction: column;
    margin-bottom: 68px;
    align-items: center;
}
.mainSection.profileEdit .dashboard .changePfp .pfp {
    position: relative;
    margin-bottom: 15px;
}
.mainSection.profileEdit .dashboard .changePfp .pfp > img{
    width: 145px;
    height: 145px;
    padding: 4px;
    border: 1px solid #5D5D5D;
    margin-right: 0;
    border-radius: 100%;
}
.mainSection.profileEdit .dashboard .changePfp .pfp button{
    background: transparent;
    padding: 0;
    position: absolute;
    bottom: 15px;
    right: 4px;
}
.mainSection.profileEdit .dashboard .changePfp h2{
    font-size: 24px;
    font-weight: 400;
    color: white;
}
.mainSection.profileEdit .dashboard .changePfp p{
    font-size: 20px;
    color: #5D5D5D;
}
.mainSection.profileEdit .dashboard .links a{
    font-size: 20px;
    color: white;
    cursor: pointer;
    font-weight: 400;
    display: flex;
    gap: 15px;
    text-decoration: none;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: .5px solid #D1D1D1;
    align-items: center;
}
.mainSection.profileEdit .dashboard .links a img:last-child{
    margin-left: auto;
}
.mainSection.profileEdit {
    margin-top: 65px;
}
.mainSection.profileEdit .dashboard{
    position: relative;
    padding-top: 44px;
}
.mainSection.profileEdit .DashboardSecHeading{
    position: absolute;
    top: -45px;
    left: 0;
}
.mainSection.publicProfile {
    justify-content: center;
}
.mainSection:has(.rightsidebar) .middleSec{
    max-width: 584px;
    width: 45.7vw;
}
.mainSection.publicProfile .middleSec .profileInfo{
    border-radius: 22px;
    background: #0E1012;
    margin-bottom: 22px;
    padding-bottom: 20px;
}
.mainSection.publicProfile .middleSec .coverPhoto{
    height: 216px;
    width: 100%;
    position: relative;
}
.mainSection.publicProfile .middleSec .coverPhoto > img{
    width: 100%;
    object-fit: cover;
    max-height: 100%;
}
.mainSection.publicProfile .middleSec .coverPhoto .buttons{
    position: absolute;
    bottom: 22px;
    right: 15px;
    display: flex;
    gap: 5px;
}
.mainSection.publicProfile .middleSec .coverPhoto .buttons button{
    width: 38px;
    height: 38px;
    border-radius: 100%;
    background: #15191CA6;
    display: flex;
    border: 0;
    justify-content: center;
    align-items: center;
}
.mainSection.publicProfile .middleSec .row{
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0 24px;
}
.mainSection.publicProfile .middleSec .row .left{
    width: max-content;
    display: flex;
    flex-direction: column;
}
.mainSection.publicProfile .middleSec .row .left .profilePic{
    margin-top: -60px;
    z-index: 1;
    position: relative;
    width: 92px;
    height: 92px;
    border-radius: 100%;
}
.mainSection.publicProfile .middleSec .row .left .name{
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-top: 12px;
    color: white;
    font-weight: 400;
}
.mainSection.publicProfile .middleSec .row .left .name img{
    width: 14px;
    height: 14px;
}
.mainSection.publicProfile .middleSec .row .left .username{
    font-size: 12px;
    color: #5D5D5D;
}
.mainSection.publicProfile .middleSec .row .left .followers{
    display: flex;
    gap: 34px;
    align-items: center;
    padding-right: 42px;
    margin-top: 24px;
}
.mainSection.publicProfile .middleSec .row .left .buttons{
    gap: 16px;
        margin-right: 10px;
        flex-wrap: wrap;
    margin-top: 30px;
    display: flex;
}
.mainSection.publicProfile .middleSec .row .left  .buttons a,
.mainSection.publicProfile .middleSec .row .left  .buttons button{
    text-decoration: none;
    padding: 0 10px;
    border-radius: 8px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: white;
    border: 1px solid white;
    background: transparent;
}
.mainSection.publicProfile .middleSec .row .left .buttons .dropdown a{
    color: black;
    font-size: 16px;
    text-decoration: none;
    text-align: left ;
    padding: 0;
    justify-content: flex-start;
} 
.mainSection.publicProfile .middleSec .row .left .followers h2{
    font-size: 16px;
    font-weight: 400;
    color: white;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-content: center;
}
.mainSection.publicProfile .middleSec .row .left .tags a,
.mainSection.publicProfile .middleSec .row .left .followers h2 span{
    font-size: 12px;
    color: #5D5D5D;
    text-decoration: none;
}
.mainSection.publicProfile .middleSec .row .left .tags{
    display: flex;
    flex-wrap: wrap;
    gap: 7px 10px;
    margin-top: 30px;
}
.mainSection.publicProfile .middleSec .row .right{
    width: 100%;
    margin-top: 60px;
        width: max-content;
    flex-shrink: initial;
}
.mainSection.publicProfile .middleSec .row .right p{
    font-size: 16px;
    color: #5D5D5D;
    padding-left: 17px;
        min-height: 99px;
    border-left: 1px solid #5D5D5D;
    width: 100%;
}
.mainSection.publicProfile .middleSec .row .right p a{
    color: #01ADF1;
}
.mainSection:has(.rightsidebar) .middleSec .row .right p{
    max-width: 285px;
}
.mainSection.publicProfile .middleSec .row .right .socialMedia{
    margin-top: 30px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}
.mainSection.publicProfile .middleSec .liveButtons{
    display: flex;
    width: 100%;
    gap: 24px;
    margin: 27px 0;
    justify-content: center;
}
.mainSection.publicProfile .middleSec .liveButtons button{
    width: 49%;
    background: transparent;
    border: 1px solid #F8F8F8;
    max-width: 284px;
    padding: 16px;
    font-size: 20px;
    color: white;
    border-radius: 8px;
    display: flex;
    justify-content: center;
}
.mainSection.publicProfile .middleSec .liveButtons button:first-child{
    background: linear-gradient(90deg, #01ADF1 0%, #A61651 100%);
    border: 0;
}
.mainSection.publicProfile.creatorView .middleSec .row .right .socialMedia{
margin-top: 15px;
}
.mainSection.publicProfile.creatorView .middleSec .row .right .socialMedia img{
    width: 25px;
    border-radius : 6px
}
.feedtabs,
.mainSection.publicProfile .middleSec .totalPosts{
    display: flex;
    width: 100%;
    border-radius: 50px;
    padding: 0;
    position: relative;
    justify-content: space-between;
    align-items: center;
    max-width: 592px;
    margin: 0 auto 25px;
}
.feedtabs a.active::after,
.mainSection.publicProfile .middleSec .totalPosts a.active::after{
    width: 50%;
    background: #A61651;
    border-radius: 100px;
    z-index: -1;
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 100%;
    content: "";
    display: flex;
}
.mainSection.publicProfile .middleSec .totalPosts a.active.mediatab::after{
    left: initial;
    right: 0;
}
.feedtabs a.active::after{
    background: #01ADF1;
    max-width: 193px;
}
.feedtabs a.sociallinks.active::after,
.feedtabs a.changepassword.active::after,
.feedtabs a.bankdetails.active::after,
.feedtabs a.countryblocklist.active::after,
.feedtabs a.phototab.active::after{
    left: 50%;
    transform: translateX(-50%);
}
.feedtabs a.videotab.active::after{
    left: initial;
    right: 0;
}
.feedtabs a.deactiveaccount.active::after{
    left: initial;
        right: -7px;
}
.feedtabs a,
.mainSection.publicProfile .middleSec .totalPosts a{
    display: flex;
    gap: 10px;
    align-items: center;
    height: 63px;
    font-size: 16px;
    text-decoration: none;
    color: white;
    padding: 0 72px;
    background: #0E1012;
    width: 50%;
}
.feedtabs a{
    height: 79px;
    font-size: 20px;
}
.feedtabs a.active{
    color: #01ADF1;
}
.mainSection.publicProfile .rightsidebar{
    width: 242px;
}
.mainSection.publicProfile .rightsidebar .subscription{
    width: 100%;
    padding: 18px;
    border-radius: 22px;
    background: #0E1012;
}
.mainSection.publicProfile .rightsidebar h1{
    font-size: 20px;
    color: white !important;
    font-weight: 400;
}
.mainSection.publicProfile .rightsidebar .subscription button{
    margin-top: 40px;
    padding: 10px 11px;
    border-radius: 50px;
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%);
    display: flex;
    gap: 7.5px;
    font-size: 20px;
    color: white;
    border: 0;
    width: 100%;
    align-items: center;
}
.mainSection.publicProfile .rightsidebar .subscription button span{
    display: flex;
    margin-left: auto;
    font-size: 12px;
    color: white;
}
.mainSection.publicProfile .rightsidebar .suggestions{
    width: 100%;
    background: #101113;
    padding: 28px 14px;
    border-radius: 22px;
    margin-top: 13px;
}
.mainSection.publicProfile .rightsidebar .suggestions .suggestion{
    width: 100%;
    margin-bottom: 24px;
}
.mainSection.publicProfile .rightsidebar .suggestions h1{
    display: flex;
    justify-content: space-between;
    margin-bottom: 33px;
    align-items: center;
    width: 100%;
}
.mainSection.publicProfile .rightsidebar .suggestions  h1 a{
    font-size: 12px;
    color: white;
}
.mainSection.publicProfile .rightsidebar .suggestions .suggestion .cover{
    width: 100%;
    height: 54px;
}
.mainSection.publicProfile .rightsidebar .suggestions .suggestion .pfp{
    display: flex;
    gap: 7px;
    margin-top: -22px;
    align-items: center;
    margin-left: 14px;
}
.mainSection.publicProfile .rightsidebar .suggestions .suggestion .pfp img{
    width: 32px;
    border-radius: 100%;
    height: 32px;
}
.mainSection.publicProfile .rightsidebar .suggestions .suggestion .pfp p{
    font-size: 12px;
    color: white;
    
}
.mainSection .popup{

    display: flex;
    flex-direction: column;
    background: #F8F8F8;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    border-radius: 22px;
}
.mainSection.publicProfile .sharePopup{
    width: 352px;
    align-items: flex-start;
    padding-left: 37px;
    height: 338px;
    justify-content: center;
}
.mainSection .popup button.close{
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: 0;
}
.mainSection.publicProfile .sharePopup::before{
    content: "";
    width: 92px;
    height: 2px;
    background: #15191C;
    border-radius: 50px;
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
}
.mainSection.publicProfile .sharePopup a{
    display: flex;
    gap: 14px;
    text-decoration: none;
    align-items: center;
    font-size: 16px;
    color: #5D5D5D;
    margin-bottom: 30px;
}
.mainSection .popup h1{
    font-size: 32px;
    font-weight: 600;
    color: #15191C !important; 
}
.mainSection .popup {
    display: none !important;
}
.mainSection .popup.active{
        max-height: 90vh;
            z-index: 12;
    overflow: scroll;
    display: flex !important;
}
.mainSection .changePassword,
.mainSection .referPopup {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 47px 20px 64px;
}
.mainSection .referPopup::-moz-scrollbar ,
.mainSection .referPopup::-webkit-scrollbar {
    display: none;
}
.mainSection .changePassword{
    width: 95vw;
    max-width: 732px;
}
.mainSection .changePassword form{
    display: flex;
    flex-direction: column;
    width: 95%;
    max-width: 543px;
    gap: 20px;
    margin: 36px 0 0;
}
.mainSection .changePassword form .input{
    width: 100%;
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 10px;
}
.mainSection .changePassword form .input label{
    font-size: 20px;
    font-weight: 500;
    color: #000000;
}
.mainSection .changePassword form .input > button{
    position: absolute;
    background: transparent;
    border: 0;
    bottom: 13px;
    right: 12px;
}
.mainSection .changePassword form .input input{
    width: 100%;
    height: 46px;
    padding-left: 12px;
    font-size: 13px;
    background: transparent;
    color: #5D5D5D;
    border-radius: 6px;
    border: 1px solid #5D5D5D
}
.mainSection .referPopup p{
    font-size: 16px;
    max-width: 275px;
    text-align: center;
    margin-top: 16px;
}
.mainSection .referPopup a{
    padding: 12px;
    background: #DDDDDD;
    border-radius: 8px;
    color: #0E1012;
    text-decoration: none;
    font-size: 12px;
    margin-top: 49px;
}
.mainSection .popupbg{
    display: none;
}
.mainSection .languagePopup{
    max-width: 580px;
    width: 95%;
    padding: 30px;
}
.mainSection .languagePopup h2{
    font-size: 20px;
    color: black !important;
    margin-bottom: 27px;
    font-weight: 400;
}
.mainSection .languagePopup .languages{
    width: 100%;
    display: flex;
    row-gap: 20px;
    margin-top: 12px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.mainSection .languagePopup > p{
font-size: 16px;
width: 100%;
color: #5D5D5D;
}
.mainSection .languagePopup .language{
    max-width: 250px;
    width: 49%;
    height: 48px;
    border: 1px solid #15191C;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;position: relative;
    padding: 14px 10px;
}
.mainSection .languagePopup .language .input{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border: 1px solid #1C1B1F;
}
.mainSection .languagePopup .language input{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.mainSection .languagePopup .language p{
    font-size: 16px;
    color: #15191C;
}
.mainSection:has(.popup.active) .popupbg{
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
        z-index: 11;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(6.800000190734863px)
    
}
.dropdown .bg{
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(6.800000190734863px)

}
.mainSection .changePassword form > button,
.mainSection .referPopup button.link{
    border-radius: 50px;
    border: 0;
    margin-top: 67px;
    font-size: 20px;
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%);
box-shadow: 0px 2px 18px 0px #22222240;
width: 306px;
    color: white;
    padding: 10px 0;
}
.mainSection .changePassword form > button{
    margin: auto;
    margin-top: 16px;
}
.mainSection .languagePopup .language:has(input:checked){
    background: #01ADF1;
    border: 0;
}
.mainSection .languagePopup .language:has(input:checked) p{
    color: white;
}
.mainSection .languagePopup .language:has(input:checked) .input{
    border-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mainSection .languagePopup .language:has(input:checked) .input div{
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 100%;
}
.mainSection .languagePopup button{
    max-width: 308px;
    width: 95%;
    font-size: 20px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%);
    box-shadow: 0px 2px 18px 0px #22222240;
    margin: auto;
    margin-top: 35px;
    border-radius: 50px;
    border: 0;
    min-height: 45px;
}
.mainSection.messages{
    gap: 26px;
}
.mainSection.messages .mainFeed{
    max-width: 960px;
    padding: 16px 22px;
    width: 75vw;
    border-radius: 22px;
    background: #0E1012;
        height: calc(100vh - 50px);
}
.mainSection.messages .top{
    display: flex;
    gap: 16px;
    align-items: center;
}
.mainSection.messages .top h1{
    font-size: 20px;
    color: white !important;
    font-weight: 400;
    margin-right: auto;
}
.mainSection.messages .top button img{
    opacity: .4;
}
.mainSection.messages .top button{
    border: 0;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #5D5D5D;
    padding: 10px;
    border-radius: 8px;
    background: #15191C;
}
.mainSection.messages .top button:last-child{
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    border-radius: 100%;
    align-items: center;
}
table.dataTable{
    border : 0 !important
}
table.dataTable tbody tr:last-child{
    border: 0;
}
.mainSection.messages .messagesContainer{
    display: flex;
    max-height: calc(100% - 50px);
}
.mainSection.messages .messagesContainer .chats{
    width: 402px;
    height: initial;
    border-top: 1px solid #15191C;
        overflow-x: hidden;
        overflow-y: auto;
}
.mainSection.messages .messagesContainer .chats-inner{
    overflow-y: scroll;
    max-height: calc(100% - 173px);
}
.mainSection.messages .messagesContainer .chats .chatsTop{
    padding: 28px 20px 0;
    width: 100%;
    display: flex;
    gap: 19px;
}
.mainSection.messages .messagesContainer .chats .chatsTop > img{
    width: 44px;
    height: 44px;
    border-radius: 100%;
}
.mainSection.messages .messagesContainer .chats .chatsTop form{
    display: flex;
    padding: 8px 10px;
    background: #15191C;
    max-width: 223px;
    border-radius: 50px;
    gap: 13px;
}
.mainSection.messages .messagesContainer .chats .chatsTop form input{
    background: transparent;
    border: 0 !important;
    max-width: 80%;
    box-shadow: none !important;
    padding: 0 !important;
    color: white;
    font-size: 16px;
}
.mainSection.messages .messagesContainer .chats .chatsTop form img{
    opacity: .45;
}
.mainSection.messages .messagesContainer .chats .chatsTop button{
    background: transparent;
    border: 0;
}
.mainSection.messages .messagesContainer .chats > p{
    background: #15191C;
    padding: 12px 0;
    display: flex;
    justify-content: center;
    font-size: 16px;
    color: #5D5D5D;
    margin: 25px 0;
    
}
.mainSection.messages .messagesContainer .chat{
    padding: 12px 20px;
    display: flex;
    gap: 18px;
    cursor: pointer;
    margin-bottom: 25px;
    align-items: center;
}
.mainSection.messages .messagesContainer .chat:hover,
.mainSection.messages .messagesContainer .chat.active{
    background: #15191C;
}
.mainSection.messages .messagesContainer .chat img{
    width: 40px;
    height: 40px;
    border-radius: 100%;
}
.mainSection.messages .messagesContainer .chat h2{
    font-size: 16px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    color: white;
}
.mainSection.messages .messagesContainer .chat .time,
.mainSection.messages .messagesContainer .chat h2 span,
.mainSection.messages .messagesContainer .chat h2 small{
    font-size: 12px;
    color: #5D5D5D;
}
.mainSection.messages .messagesContainer .chat .time{
    margin-left: auto;
    margin-right: 13px;
    margin-bottom: auto;
}
.mainSection.messages .messagesContainer .chat .img{position: relative;}
.mainSection.messages .messagesContainer .chat .img span{
    position: absolute;
    bottom: 2.5px;
    right: 1px;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: #4BAE00;
}
.mainSection.messages .messagesContainer .messagesWindow{
    width: 520px;
    padding-top: 15px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 55px;
    max-width: 100%;
}

.mainSection .popup::-moz-scrollbar,
.mainSection.messages .messagesContainer .chats-inner::-moz-scrollbar,
.mainSection.messages .messagesContainer .messagesWindow #chat_body::-moz-scrollbar,
.mainSection.messages .messagesContainer .chats::-moz-scrollbar, 
.mainSection .popup::-webkit-scrollbar,
.mainSection.messages .messagesContainer .chats::-webkit-scrollbar,
.mainSection.messages .messagesContainer .chats-inner::-webkit-scrollbar,
.mainSection.messages .messagesContainer .messagesWindow #chat_body::-webkit-scrollbar{
    background: transparent;
    width: 3px;
}
*::-moz-scrollbar-thumb,
.mainSection .popup::-moz-scrollbar-thumb,
.mainSection.messages .messagesContainer .chats-inner::-moz-scrollbar-thumb,
.mainSection.messages .messagesContainer .messagesWindow #chat_body::-moz-scrollbar-thumb,
.mainSection.messages .messagesContainer .chats::-moz-scrollbar-thumb, 
.mainSection.messages .messagesContainer .chats::-webkit-scrollbar-thumb,
.mainSection.messages .messagesContainer .chats-inner::-webkit-scrollbar-thumb,
.mainSection .popup::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb,
.mainSection.messages .messagesContainer .messagesWindow #chat_body::-webkit-scrollbar-thumb{
    background: grey;
    border-radius: 50px;
    width: 100%;
}

.mainSection.messages .messagesContainer .messagesWindow .messageTop{
    display: flex;
    gap: 16px;
    width : 100%;
    border-bottom: 1px solid #15191C;
    align-items: center;
    padding: 10px 12px;
}
.mainSection.messages .messagesContainer .messagesWindow .messageTop img:first-child{
    display: none;
}
.mainSection.messages .messagesContainer .messagesWindow .messageTop > img{
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 100%;
}
.mainSection.messages .messagesContainer .messagesWindow .messageTop h2{
    font-size: 20px;
    display: flex;
    flex-direction: column;
    
    font-weight: 400;
    color: white;
    margin-right: auto;
}
.mainSection.messages .messagesContainer .messagesWindow .messageTop h2 span{
    font-size: 16px;
    color: #5D5D5D;
}
.mainSection.messages .messagesContainer .messagesWindow .messageTop button{
    background: transparent;
    border: 0;
}
.mainSection.messages .messagesContainer .messagesWindow .messagesBox {
    display: flex;
    flex-direction: column-reverse;
    overflow-x: hidden !important;
    gap: 20px;
    padding: 20px;
}
.mainSection.messages .messagesContainer .messagesWindow .messagesBox .message.received{
    display: flex;
    gap: 16px;
}
.mainSection.messages .messagesContainer .messagesWindow .messagesBox .message.sent .messageContent{
    position: relative;
    width: max-content;
    margin-left: auto;
}
.mainSection.messages .messagesContainer .messagesWindow .messagesBox .message.received .name{
    font-size: 16px;
    margin-bottom: 6px;
    color: white;
}
.mainSection.messages .messagesContainer .messagesWindow .messagesBox .message.received > img{
    border-radius: 50px;
    width: 32px;
    height: 32px;
}
.mainSection.messages .messagesContainer .messagesWindow .messagesBox .message .text{
    padding: 10px 14px;
    font-size: 16px;
    line-height: 1.7;
    color: white;
    background: #15191C;
    border-radius: 8px;
    max-width: 375px;
}
.mainSection.messages .messagesContainer .messagesWindow .messagesBox .message.typing .text{
    display: flex;
    gap: 5px;
}
.mainSection.messages .messagesContainer .messagesWindow .messagesBox .message.typing .text span{
    animation: typing 1s ease infinite forwards;
}
.mainSection.messages .messagesContainer .messagesWindow .messagesBox .message.typing .text span:nth-child(2){
    animation-delay: .1s;
}
.mainSection.messages .messagesContainer .messagesWindow .messagesBox .message.typing .text span:nth-child(3){
    animation-delay: .2s;
}
@keyframes typing {
    0%{
        transform: translateY(0);
    }
    25%{
        transform: translateY(-10px);
    }
    50%{
        transform: translateY(0px);
    }
    100%{
        transform: translateY(0);
    }
    
}
.mainSection.messages .messagesContainer .messagesWindow .messagesBox .message .time{
    text-align: right;
    font-size: 12px;
    line-height: 1.7;
    color: #5D5D5D;
    margin-bottom: 6px;
}
.mainSection.messages .messagesContainer .messagesWindow .messagesBox .message .messageContent > img{
    position: absolute;
    left: -24px;
    bottom: 0;
}
.mainSection.messages .messagesContainer .messagesWindow .messageInput{
    width: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    gap: 20px;
}
.mainSection.messages .messagesContainer .messagesWindow .messageInput button{
    position: static !important;
    background: transparent;
    border: 0;
}
.mainSection.messages .messagesContainer .messagesWindow .messageInput button.attach_btn{
    position: static !important;
}
.mainSection.messages .messagesContainer .messagesWindow .messageInput input{
    font-size: 16px;
    color: #5D5D5D;
    border: 0 !important;
    outline: none;
    width: 100%;
    background: #15191C !important;
    padding: 5px !important;
    height: 40px !important;
    border-radius: 50px !important;
    padding-left: 20px !important;
}
.mainSection .searchBar{
    width: 100%;
    background: #0E1012;
    border-radius: 50px;
    padding: 10px 25px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.mainSection .searchBar button{
    background: transparent;
    border: 0;
    padding: 0;
}
.mainSection .searchBar input:not([type='checkbox']){
    font-size: 16px;
    background: transparent;
    margin-left: -10px;
    color: #5D5D5D;
    border: 0;
    outline: none;
    width: 100%;
}
.mainSection.notifications .notificationsContainer{
    padding: 16px;
    background: #0E1012;
    gap: 20px;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
}
.mainSection.notifications .mainFeed h1{
    margin-top: 20px;
    font-size: 20px;
    color: white;
    font-weight: 400;
    margin-bottom: 20px;
}
.mainSection.notifications .notificationsContainer .notification{
    display: flex;
    background: #15191C;
    padding: 8px 10px;
    border-radius: 8px;
    gap: 16px;
    align-items: center;
    height: 56px;
}
.mainSection.notifications .notificationsContainer .notification.unread{
    background: transparent;
}
.mainSection.notifications .notificationsContainer .notification input{
    width: 18px;
    height: 18px;
    border-radius: 2px;
    border: 2px solid #5D5D5D;
    cursor: pointer;
    appearance: none;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mainSection.notifications .notificationsContainer .notification input::before{
    content: "✓";
color: white;
display: none;
}
.mainSection.notifications .notificationsContainer .notification input:checked{
    background: #5D5D5D;
}
.mainSection.notifications .notificationsContainer .notification input:checked::before{
    display: flex;
}
.mainSection.notifications .notificationsContainer .notification h2{
    font-size: 16px;
    display: flex;
    flex-direction: column;
    color: white;
    font-weight: 400;
}
.mainSection.notifications .notificationsContainer .notification .pfp{
    width: 40px;
    height: 40px;
}
.scheduleLivePopup{
    position: fixed;
    background: white;
    width: 898px;
    padding: 48px 39px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 22px;
    display: none;
    flex-direction: column;
    max-height: 80vh;
    overflow: scroll;
    align-items: center;
}
.broadcasttab .create_new_bt  .btn:not(.calendarviewbtn, .listviewbtn),
.scheduleLivePopup a,
.scheduleLivePopup button:not(.close){
    width: 306px;
    height: 45px;
    border-radius: 50px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 18px 0px #22222240;

}


.scheduleLivePopup.active{
    display: flex;
}
body:has(.scheduleLivePopup.active){
    overflow: hidden;
}
.broadcasttab .create_new_bt  .btn:not(.clear_color),
.scheduleLivePopup button:not(.close){
    border: 0;
    color: white;
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%);
}
.scheduleLivePopup a{
    border: 1px solid #2E4882;
    background: transparent;
    color: #000000;
}
.scheduleLivePopup h1{
    font-size: 30px;
    font-weight: 500;
}
.scheduleLivePopup .close{
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: 0;
}
.mainSection .changePassword form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    max-width: 100%;
    width: 100%;
}
.scheduleLivePopup form .input{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.scheduleLivePopup form .input .inputfield,
.scheduleLivePopup form .input label{
    font-size: 20px;
    font-weight: 500;
    color: #15191C;
    }
.scheduleLivePopup form .input label{
display: flex;
}
.scheduleLivePopup form .input select,
.scheduleLivePopup form .input textarea,
.scheduleLivePopup form .input .inputfield,
.scheduleLivePopup form .input input:not([type="file"]){
    width: 100%;
    height: 46px;
    font-size: 13px;
    outline: none;
    padding-left: 12px;
    border: 1px solid #5D5D5D;
    background: transparent;
    border-radius: 6px;
}
.scheduleLivePopup form .input textarea{
    padding-top: 15px;
}
.scheduleLivePopup form .input .inputfield{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    position: relative;
}
.scheduleLivePopup form .input .inputfield input{
    opacity: 0;
    position: absolute;
    width: 100%;
    cursor: pointer;
    top: 0;
    left: 0;
    height: 100%;
}
.scheduleLivePopup form .input select{
    cursor: pointer;
}
.scheduleLivePopup form .input textarea{
    height: 116px;
}
.scheduleLivePopup form .inputs{
    display: flex;
    justify-content: space-between;
}
.scheduleLivePopup form .inputs input{
    appearance: none;
}
.scheduleLivePopup form .inputs img{
    margin-left: auto;
    position: absolute;
    right: 2px;
    bottom: 10px;
    background: white;
}
.scheduleLivePopup form .inputs div{
    position: relative;
    width: 49%;
    max-width: 400px;
}
.mainSection.notifications .notificationsContainer .notification h2 span{
    font-size: 12px;
    color: #5D5D5D;
}
.mainSection.notifications .notificationsContainer .notification .buttons{
    display: flex;
    gap: 12px;
    align-items: center;
    margin-left: auto;
}
.mainSection.notifications .notificationsContainer .notification .buttons button{
    background: transparent;
    border: 0;
}
body:has(.mainSection.support) header{
    margin-bottom: 0;
}
.mainSection.support{
    margin-top: 50px;
}
.mainSection.support .mainFeed > h1{
    font-size: 16px;
    color: white;
    margin: 20px 25px;
    font-weight: 400;
}
.mainSection.support .mainFeed {
    max-width: 930px;
}
.mainSection.support .mainFeed .accordians{
    width: 100%;
    display: flex;
    row-gap: 20px;
    justify-content: space-between;
    margin-bottom: 41px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.mainSection.support .mainFeed .mainFeedContainer form{
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 17px;
}
.mainSection.support .mainFeed form .input {
    display: flex;
    flex-direction: column;
}
.mainSection.support .mainFeed form .input label{
    font-size: 18px;
    color: #5D5D5D;
    display: flex;
    margin-bottom: 10px;
}
.mainSection.support .mainFeed form .input textarea,
.mainSection.support .mainFeed form .input.file,
.mainSection.support .mainFeed form .input input{
    padding: 17px 16px;
    border: 1px solid #5D5D5D57;
    background: transparent;
    font-size: 12px;
    color: #5D5D5D;
}
.mainSection.support .mainFeed form .input textarea{
    height: 129px;
    padding-top: 38px;
}
.mainSection.support .mainFeed form .file{
    position: relative;
    flex-direction: row;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mainSection.support .mainFeed form .file label{
    font-size: 12px;
    color: #5D5D5D;
    margin-bottom: 0;
}
.mainSection.support .mainFeed form .file input{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.mainSection.support .mainFeed .accordians .accordian{
    width: 422px;
    padding: 10px;
    border: 1px solid #15191C;
}
.mainSection.support .mainFeed .accordians .accordianButton{
    font-size: 12px;
    color: #5D5D5D;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.mainSection.support .mainFeed .accordians .accordianButton input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    height: 100%;
}
.mainSection.support .mainFeed .accordians .accordianBody{
    display: none;
    font-size: 12px;
    color: #5D5D5D;
    margin-top: 10px;
}
.mainSection.support .mainFeed .accordians .accordian:has(input:checked) .accordianBody{
    display: flex;
}
.mainSection.support .mainFeed .accordians .accordianButton img{
    transform: rotate(0);
    transition: all .2s ease;
}
.mainSection.support .mainFeed .accordians:has(input:checked) .accordianButton img{
    transform: rotate(180deg);
}
.mainSection.support .mainFeed .mainFeedContainer form button{
    width: 306px;
    padding: 10px 0;
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%);
    font-size: 20px;
    color: white;
    border: 0;
    border-radius: 50px;
    margin: auto;
    margin-top: 35px;
}
    .mainSection.notifications .notificationsContainer .notification .buttons button.star,
.mobileHeader{
    display: none;

}
.createPostPopup {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    left: 0;
}
.createPostPopupInner {
    width: 960px;
    padding: 43px 40px;
}
.createPostPopup .bg{
    background: #0000001F;
    backdrop-filter: blur(16px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.createPostPopup:has(.createPostPopupInner.active){
    display: flex;
    z-index: 11;
}
.createPostPopupInner  h1{
    margin-bottom: 53px;
    font-weight: 400 !important;
    font-size: 24px;
    text-align: center;
}
.createPostPopupInner button.close{
    top: 30px !important;
    right: 30px !important;
}
.createPostPopupInner button.close img{
    width: 50px;
    height: 50px;
}
.createPostPopupInner  .input{
    justify-content: space-between;
    display: flex;
    margin-bottom: 33px;
}
.createPostPopupInner  .input select{
    outline: none;
    border: 0;
    font-size: 20px;
        padding-right: 18px;
        background: transparent;
}
.createPostPopupInner  .input button{
    padding: 10px 14px;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #5D5D5D;
    border: 0;
    background: #15191C26;
    border-radius: 12px;
}
.createPostPopupInner  .images{
    row-gap: 33px;
    justify-content: space-between;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.dataTable {
    border-radius: 22px ;
    overflow: hidden;
}
.dataTable thead tr{
    background: #01ADF1;
}
.dataTable thead tr th{
    box-shadow: none !important;
    font-size: 16px;
    color: white;
    font-weight: 700;
    border: 0 !important;
        text-align: center;
    background: transparent;
        padding: 35px 0 !important;
}
.dataTable tbody tr td:first-child,
.dataTable thead tr th:first-child{
    /* padding-left: 24px !important; */
}
.dataTable tbody tr td:last-child,
.dataTable thead tr th:last-child{
    /* padding-right: 24px !important; */
}
.dataTable tbody tr td{
    background: black !important;
    font-size: 16px !important;
    padding: 31px 0;
    text-align: center;
    color: white !important;
    box-shadow: none !important;
    border: 0 !important;
}
.dataTable tbody tr td input{
    background: transparent;
    color: white;
    border: 0;
}
.dataTable tbody tr td p,
.dataTable tbody tr td a{
    color: white !important;
}
.dataTable tbody tr {
    border-color: transparent !important;
    background-color: black !important;
    border-width: 0 !important;
    border-bottom: .5px solid #5D5D5D !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
    padding: 7.5px 12px;
    color: white !important;
    border-radius: 2px;
    background: transparent;
    border: 0.5px solid #5D5D5D !important;
    margin: 0 2.5px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    color: white !important;
    background: #5D5D5D;
}
.subscription_history_area .col-md-12,
.subscription_history_area .col-lg-12{
    width: 100%;
}
.createPostPage {
    margin-top: 45px;
}
.createPostPage .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.createPostPage .top h1{
    margin-bottom: 0;
}
.createPostPage .top button{
    padding: 10px 27px;
    font-size: 20px;
    color: white;
    font-weight: 500;
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%);
box-shadow: 0px 2px 18px 0px #22222240;
border-radius: 50px;
border: 0;
}
.createPostPage .mainFeedInner{
padding: 41px 39px;
background: #0E1012;
border-radius: 22px;
}
.createPostPage .mainFeedInner .topheader{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.createPostPage .mainFeedInner .topheader .profile{
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.createPostPage .mainFeedInner .topheader .profile img.pfp{
    width: 50px;
    height: 50px;
    border-radius: 100%;
}
.createPostPage .mainFeedInner .topheader .profile h2{
    font-size: 16px;
    display: flex;
    flex-direction: column;
    color: white;
    
}
.createPostPage .mainFeedInner .topheader .profile h2 select{
    padding: 4.5px 8px;
    background: #15191C;
    font-size: 12px;
    color: #5D5D5D;
    border: 0;
    outline: none;
    margin-top: 17px;
}
.createPostPage .mainFeedInner .topheader .profile h2 span{
    font-size: 12px;
    color: #5D5D5D;
}

.createPostPage .mainFeedInner .topheader .buttons{
    display: flex;
    align-items: center;
    gap: 27px;
    margin-top: -14px;
}
.createPostPage .mainFeedInner .topheader .buttons button{
    background: transparent;
    border: 0;
}
.createPostPage .mainFeedInner form{
    display: flex;
    gap: 27px;
    margin-top: 30px;
    flex-direction: column;
}
.createPostPage .mainFeedInner form input{
    font-size: 16px;
    background: transparent;
    border: 0;
    outline: none;
    color: #5D5D5D;
}
.createPostPage .mainFeedInner form img{
    width: 100%;
    border-radius: 22px;
}

.profileEditPage .top h1{
    font-size: 32px;
    font-weight: 700;
}
.profileEditPage  .mainFeedInner{
    padding: 30px;
    background: #0E1012;
    border-radius: 22px;
}
.editForm form{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.editForm form .input{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.editForm form .input label{
    font-size: 20px;
    font-weight: 500;
    color: #F8F8F8;
}
#Basicinfo .select2-container--default .select2-selection--single,
#bankdetails .select2-container--default .select2-selection--single,
.editForm form .input textarea,
.editForm form .input button,
.editForm form .input select,
.editForm form .input input{
    border: 1px solid #5D5D5D;
    height: 46px;
    background: transparent;
    border-radius: 6px;
    font-size: 13px;
    color: #5D5D5D;
    padding-left: 13px;
}
#Basicinfo .select2-container--default .select2-selection--single,
#bankdetails .select2-container--default .select2-selection--single{
        padding-top: 12px;
}
#bankdetails .select2-container--default .select2-selection--single .select2-selection__rendered,
#Basicinfo .select2-container--default .select2-selection--single .select2-selection__rendered{
    color: inherit;
}
.editForm form .col-md-4.video{
    width: 40% !important;
    margin-right: 10px;
}
.editForm form .intro_add_video_box{
    height: 100%;
}
.editForm form .input textarea{
    height: 100px;
}
.editForm form .buttons{
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.editForm form .buttons a,
.editForm form .buttons button{
    width: 306px;
    padding: 10px 0;
    font-size: 20px;
    color: #F8F8F8;
    font-weight: 400;
    background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%);
border-radius: 50px;
margin: auto;
border: 0;
}

.editForm form .buttons a{
    text-align: center;
    color: #000000;
    background: white;
}

.wallet .balances .balanceContainer{
    display: flex;
    justify-content: space-between;
}
.wallet .balances .balanceContainer .coins{
    width: 450px;
    height: 190px;
    gap: 40px;
    border-radius: 22px;
    background: #0E1012;
    padding-left: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.tablePages .userBalances h2,
.wallet .balances .balanceContainer .coins h2{
    font-size: 48px;
    line-height: 60px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-weight: 600;
    color: white;
}
.tablePages .userBalances h2 span,
.wallet .balances .balanceContainer .coins h2 span{
    font-size: 24px;
    line-height: 1;
    font-weight: 500;
}
.wallet .balances .buttons{
    display: flex;
    margin-top: 44px;
    justify-content: center;
    gap: 61px;
}
.wallet .balances .buttons button{
    width: 310px;
    color: #F8F8F8;
    padding: 16px;
    font-size: 20px;
    background: linear-gradient(90deg, #01ADF1 0%, #A61651 100%);
    border-radius: 12px;
    border: 0;
    font-weight: 600;
}
.wallet .tableContainer{
    margin-top: 51px;
}
.wallet .tableContainer .tabs{
    margin-bottom: 31px;
display: flex;
gap: 44px;
border-bottom: 1px solid #5D5D5D;
}
.wallet .tableContainer .tabs a{
    padding: 10px;
    font-size: 20px;
    color: #5D5D5DD5;
    text-decoration: none;
    
}
.wallet .tableContainer .tabs a.active{
    color: #01ADF1;
    border-bottom: 1px solid #01ADF1;
}
.wallet .balances .buttons button:last-child{
    background: #15191C;
    position: relative;
}
.wallet .balances .buttons button:last-child::before{
    z-index: -1;
    content: '';
    background: linear-gradient(90deg, #01ADF1 0%, #A61651 100%);
    position: absolute;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    top: -1.2px;
    left: -1px;
    border-radius: 12px;
}
.mainSection.wallet .mainFeed{
    max-width: 950px;
}

.followersContainer{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 30px;
}
.followersContainer .followerCard{
    background: #0E1012;
    width: 435px;
    display: flex;
    align-items: center;
    gap: 29px;
    padding: 17px 27px;
    border-radius: 22px;
}
.followersContainer .followerCard img{
    width: 60px;
    border: 2px solid #A61651;
    height: 60px;
    border-radius: 100%;
}
.followersContainer .followerCard h2{
    font-size: 16px;
    color: white;
    display: flex;
    flex-direction: column;
    font-weight: 400;
}
.followersContainer .followerCard h2 span{
    font-size: 12px;
    color: #5D5D5D;
}
.tablePages .referralCode button,
.tablePages .referralCode button,
.followersContainer .followerCard a,
.followersContainer .followerCard button{
    padding: 12px 18px;
    border-radius: 50px;
    border: 0;
    font-size: 20px;
    color: white;
    font-weight: 500;
        background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%);

}
.followersContainer .followerCard a{
    font-size: 14px;
}
.followersContainer .followerCard a,
.followersContainer .followerCard button{
    margin-left: auto;
}
.tablePages .searchBox{
    padding: 29px 22px;
    background: #0E1012;
    
    border-radius: 22px;
}
.tablePages .bookingsSearchBox .search,
.tablePages .searchBox .search{
    display: flex;
    border: 1px solid #5D5D5D !important;
    box-shadow: none !important;
    border-radius: 6px;
    padding: 6px 10px;
    align-items: center;
    gap: 5px;
    border-radius: 6px !important;
    box-shadow: none !important;
}
.tablePages .bookingsSearchBox .search img,
.tablePages .searchBox .search img{
    opacity: .45;
}
 .tablePages .bookingsSearchBox .search input,
.tablePages .searchBox .search input{
    font-size: 16px;
    color: #5D5D5D; 
    border: 0;
    padding: 0 !important;
    width: 100%;
    background: transparent !important;
}
.tablePages .searchBox .filter{
    display: flex;
    margin-top: 12px;
    justify-content: space-between;
    align-items: center;
}
.tablePages .bookingsSearchBox  select,
.tablePages .searchBox .filter select{
    background: transparent !important;
    padding: 6px 21px !important;
    box-shadow: none;
    cursor: pointer;
    font-size: 16px;
    color: #5D5D5D;
    border: 1px solid #5D5D5D !important;
    border-radius: 6px;
    width: max-content !important;
}
.tablePages .searchBox .filter .input{
    display: flex;
    align-items: center;
    gap: 6px;
}
.tablePages .searchBox .filter .input label{
    font-size: 16px;
    color: #5D5D5D;
}
.tablePages .searchBox .filter .input input{
    padding: 6px 10px;
    border: 1px solid #5D5D5D;
    font-size: 16px;
    color: #5D5D5D;
    text-transform: uppercase;
    background: transparent;
    border-radius: 6px;
}

.tablePages .searchBox button{
    font-size: 10px;
    color: white;
    padding: 9.5px 11px;
    border-radius: 50px;
    background: linear-gradient(90deg, #01ADF1 0%, #A61651 100%);
    border: 0;
}
.tablePages .referralCode{
    padding: 20px 25px 33px;
    background: #0E1012;
    margin-top: 34px;
    border-radius: 22px;
}
.tablePages .referralCode h1{
    font-size: 20px;
    color: white !important;
    font-weight: 400;
}
.tablePages .referralCode .code{
    margin-top: 41px;
    flex-wrap: wrap;
    display: flex;
    gap: 20px;
}
.tablePages .referralCode .code input,
.tablePages .referralCode .code p{
    border: 0 !important;
    width: 482px;
    padding: 18px;
    font-size: 20px;
    pointer-events: none;
    color: white;
    background: #15191C;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tablePages .referralCode .code input{
    margin-right: auto;
}
.dataTables_wrapper .dataTables_paginate{
    float: initial;
    text-align: center;
    margin-top: 42px;
    padding-top: 0 !important;
}
.tablePages .referralCode button{
    font-size: 16px;
    padding: 20px 44px;
    border-radius: 12px;
}
.tablePages .bookingsSearchBox {
    display: flex;
    gap: 28px;
}
.tablePages .bookingsSearchBox .search{
    width: 100%;
}
.tablePages .tableSelect{
    max-width: 381px;
    width: 100%;
}
.tablePages  .tableSelect select{
    width: 100%;
}
.tablePages .userBalances{
    background: #0E1012;
    border-radius: 22px;
    min-height: 176px;
    display: flex;
    align-items: center;
    padding-left: 48px;
    gap: 40px;
}
.tablePages .userBalances h2{
    flex-direction: row;
    align-items: center;
    gap: 15px;
}
.tablePages .userBalances p{
    font-size: 16px;
    color: white;
    max-width: 701px;
    margin-top: 12px;
}





.editProfileCreator.mainSection .dashboard{
    background: transparent;
    padding: 0;
}
.editProfileCreator.mainSection .coverPhoto img,
.editProfileCreator.mainSection .coverPhoto{
    width: 100%;
    height: 200px;
    max-width: 899px;
    margin: auto;
    border-radius: 22px;
    position: relative;
    object-fit: cover;
    background: linear-gradient(180deg, rgba(14, 16, 18, 0.12) 52.65%, #0E1012 99.52%);
}
.editProfileCreator.mainSection .pfp input,
.editProfileCreator.mainSection .coverPhoto input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.editProfileCreator.mainSection .coverPhoto::before{
    z-index: 1;
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, rgba(14, 16, 18, 0.12) 52.65%, #0E1012 99.52%);
}
.mainSection.editProfileCreator .dashboard .pfp {
    margin-top: -48px;
    margin-left: 47px;
    position: relative;
}
.mainSection.editProfileCreator .dashboard .pfp > img{
    z-index: 1;
    border: 4px solid #A61651;
    width: 96px;
    height: 96px;
}
.editProfileCreator .feedtabs{
    background: #0E1012;
    max-width: 100%;
    gap: 0;
    justify-content: flex-start;
}
.editProfileCreator .feedtabs a.active::after{
width: 100%;
}
.editProfileCreator .feedtabs a:first-child{
    padding-left: 24px;
}
.editProfileCreator .feedtabs a:last-child{
    padding-right: 21px;
}
.editProfileCreator.mainSection .mainFeed{
    max-width: 936px;
}
.editProfileCreator .feedtabs a{
    position: relative;
    height: 75px;
    padding: 0 18px;
    font-size: 16px;
    width: max-content;
}
.mainSection.editProfileCreator .dashboard .pfp{
    margin-bottom: 34px;
}
.mainSection.editProfileCreator .mainFeedContainer{
    background: #0E1012;
    min-height: 466px;
    border-radius: 22px;
}
.mainSection.editProfileCreator .mainFeedContainer .socialLinksTab{
    width: 100%;
    height: 100%;
    padding: 52px 0;
}

.mainSection.editProfileCreator .mainFeedContainer .countryBlockTab .input button,
.mainSection.editProfileCreator .mainFeedContainer .countryBlockTab .span.multiselect-native-select,
.mainSection.editProfileCreator .mainFeedContainer .socialLinksTab .add{
    margin: auto;
    text-transform: capitalize;
    width: 441px;
    padding: 14px 0;
    border: 1px solid #F8F8F8;
    border-radius: 6px;
    font-size: 20px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    background: transparent;;
}
.mainSection.editProfileCreator .mainFeedContainer .countryBlockTab .input button{
    width: 364px;
}
.mainSection.editProfileCreator .mainFeedContainer .basicInfoTab{
    padding: 31px 45px;
}
.mainSection.editProfileCreator .mainFeedContainer .bankDetailsTab,
.mainSection.editProfileCreator .mainFeedContainer .countryBlockTab,
.mainSection.editProfileCreator .mainFeedContainer .statsTab{
    padding: 38px 51px 45px;
    border-radius: 22px;
}
.mainSection.editProfileCreator .mainFeedContainer .changepwdTab{
    padding: 41px 45px 34px;
    border-radius: 22px;
}
.mainSection.editProfileCreator .mainFeedContainer .basicInfoTab .input:has(.file){
    flex-direction: row;
    justify-content: space-between;
}
.mainSection.editProfileCreator .mainFeedContainer .basicInfoTab .input .file{
    padding: 8px;
    width: 178px;
    background: white;
    font-size: 20px;
    font-weight: 500;
    color: black;
    border-radius: 6px;
    position: relative;
}
.mainSection.editProfileCreator .mainFeedContainer .basicInfoTab .buttons{
    margin-top: 30px;
}
.mainSection.editProfileCreator .mainFeedContainer .basicInfoTab .input .file input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}


.editForm.countryBlockTab form .input{
    flex-direction: row;
    gap: 44px;
    justify-content: center;
        align-items: center;
}
.editForm.countryBlockTab form .input label{
    font-size: 20px;
    color: #5D5D5D;
    font-weight: 500;
}
@media screen and (max-width : 1170px) {
    .mainSection .dashboard .email form .input,
    .mainSection .dashboard .email form{
        width: 100%;
    }
    .mainSection .dashboard .email form{
        flex-wrap: wrap;
    }
    .mainSection .dashboard .email form .inputDiv,
    .mainSection.support .mainFeed .accordians .accordian{
        width: 49%;
    }
    .mainSection.messages .messagesContainer .chats {
        width: 307px;
    }
    .mainSection.messages .messagesContainer .chats .chatsTop form{
            width: 120px;
    }
    .wallet .balances .balanceContainer .coins{
        width: 48%;

    }
    .mainSection .mainFeed {
    width: 75%;
}
}
@media screen and (max-width : 1024px) {
    .mainSection.publicProfile .rightsidebar{
        display: none;
    }
    .mainSection:has(.rightsidebar) .middleSec{
        width: 57vw;
    }
    
    .mainSection.messages .messagesContainer .chats {
        width: 281px;
    }
     .mainSection.messages .messagesContainer .chats .chatsTop form{
        width: 100%;
        max-width: 100%;
    }
    .createPostPopupInner{
        width: 95vw;
    }
    .createPostPopupInner .images div{
        width: 24%;
    }
    .createPostPopupInner .images div img{
        width: 100%;
    }


    .wallet .balances .balanceContainer .coins{
        padding-left: 15px;
    }
    .tablePages .userBalances h2, .wallet .balances .balanceContainer .coins h2 {
    font-size: 35px;
}
.tablePages .userBalances h2 span, .wallet .balances .balanceContainer .coins h2 span {
    font-size: 20px;
}
 .mainSection.messages .messagesContainer .messagesWindow{
        width: 100%;
    }
    body:has(.messages) header{
        display: none;
    }
    .mainSection.messages .mobileHeader button:first-child{
        margin-right: auto;
    }
   
    .mainSection.messages .top button{
        display: none !important;
    }
    .mainSection.messages .messagesContainer .messagesWindow{
        padding-top: 0;
    }
    .mainSection.messages  .mainFeed{
        position: relative;
    }
    
    .mainSection.messages .mobileHeader button:not(:first-child){
    border: 0;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #5D5D5D;
    padding: 10px;
    border-radius: 8px;
    background: #0E1012;
    }
   
    .mainSection.messages .messagesContainer .messagesWindow{
        min-height:70vh ;
    }
    .mainSection.messages .mainFeed{
        max-height: max-content;
    }
    .mainSection.messages .messagesContainer .chats .chatsTop form{
                width: 100%;
    }
    .mainSection.messages .messagesContainer .chats{
        width: 100%;
    }
    .mainSection.messages .mainFeed{
        width: 100%;
        max-width: 100%;
    }
    .mainSection.messages .messagesContainer .messagesWindow .messageTop img:first-child{
    display: block;
    margin-right: -15px;
    width: max-content;
    height: max-content;
    transform: rotate(180deg);     padding: 16px;
    margin-left: -8px;
}
}
@media screen and (max-width : 800px) {
.mainSection .mainFeed{
    width: 100%;
}
.mainSection.messages .messagesContainer .messagesWindow .messageInput{
    padding : 10px
}
header::before{
    display : none
}
header{
    position: static;
}
.mainSection.messages .messagesContainer .messagesWindow{
    padding-bottom: 75px;
}
.mainSection.messages .mainFeed{
    padding: 0;}
.mainSection.messages .top h1{
        position: absolute;
        top: -45px;
    }
     .mainSection.messages{
        gap: 71px;
    }
    .editProfileCreator .feedtabs{
        flex-direction: column;
        padding: 10px 0;
        border-radius: 22px;
    }
    .editProfileCreator .feedtabs a{
        height: 45px;
    }
  .mainSection:has(.rightsidebar) .middleSec {
        width: 100%;
        max-width: 100%;
    }
    .followers  .mobileHeader > button,
    .wallet  .mobileHeader > button,
    .publicProfile  .mobileHeader > button,
    .feedPage  .mobileHeader > button,
    .profileEdit .mobileHeader > button{
        position: absolute;
        top: 40px;
    }
   
    .mainSection .posts .post:has(.blurred) .img{
        max-width: 100%;
        max-height: 186px;
    }
    .mainSection .posts .post:has(.blurred) .img > img{
        width: 100%;
    }
    .mainSection:has(.rightsidebar) .middleSec .row .right p{
        max-width: 100%;
    }
    .mainSection.publicProfile .sharePopup a{
        font-size: 12px;
        line-height: 18px;
        gap: 12px;
        margin-bottom: 30px;
    }
    .mainSection.publicProfile .sharePopup a:last-child{
        margin-bottom: 0;
    }
    .mainSection.publicProfile .sharePopup{
        height: 220px;
        width: 226px;
        padding-left: 25px;
    }
    .mainSection.publicProfile .sharePopup a svg{
        width: 15px;
    }
    .mainSection.notifications{
        margin-top: 30px;

    }
    .mainSection.messages .messagesContainer .messagesWindow .messageTop h2{
        font-size: 16px;
    }
    .mainSection.messages .messagesContainer .messagesWindow .messageTop h2 span{
        font-size: 12px;
    }
    
    .mobileHeader{
        display: flex;
    gap: 20px;
}
.mainSection.profileEdit{
    margin-top: 0;
}
.mainSection.profileEdit .dashboard{
    margin-top: 61px;
}
.mobileHeader button{
    background: transparent;
    border: 0;
}
.mainSection {
    flex-direction: column;
            justify-content: flex-start;
    padding: 0 16px;
    gap: 20px;
}
header{
    margin-top: 32px;
    background: transparent;
    padding: 0 16px;
}
.headerdropdown .dropdownButton h2{
    font-size: 10px;
}
.headerdropdown .dropdownButton > img.pfp{
    width: 38px;
    height: 38px;
}
header .right{
    margin-left: auto;
}
header .logo,
header .right form,
header .right button{
    display: none;
}
.mainSection .sidebar{
    position: fixed;
    z-index: 11;
    min-height: 90vh;
    top: 5vh;
    left: -1000px;
    transition: left .2s ease;
    background: #15191C;
    box-shadow: 4px 8px 27.2px 0px #0000006B;
    
}

.mainSection .sidebar.active{
    left: 0;
}
.mainSection .sidebar.active .bg{
    display: flex;
}
.mainSection .sidebar .logo,
.mainSection .sidebar a{
    position: relative;
    z-index: 11;
}
.mainSection:has(.sidebar.active) .bg{
    content: "";
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    position: fixed;
    z-index:8;
    backdrop-filter: blur(6.800000190734863px);
    background: #0000001F;

}
.mainSection .mainFeed .searchBar{
    display: none;
}
.mainSection.support .mainFeed form .input label {
    font-size: 15px;
}
.mainSection.notifications .notificationsContainer .notification input{
    display: none;
}
.mainSection.notifications .notificationsContainer .notification{
    border-radius: 4px;
    padding: 10px;
}
.mainSection.profileEdit .DashboardSecHeading{
    left: 50%;
    transform: translateX(-50%);
}
.mainSection .mainFeed.feed{
    width: 100%;
}


body:has(.notifications)  header{
    display: none;
}

.publicProfile  .mobileHeader{
    justify-content: space-between;
    margin-top: 32px;
}
.publicProfile  .mobileHeader:has(.searchBar){
    margin-top: 0;
}
 .mainSection.messages .mainFeed{
        min-height: 70vh;
        height: 70vh;
    }
   .mainSection.messages .messagesContainer .messagesWindow{
    min-height: initial;
    height: 100%;
max-height: 100%;
   }
   .mainSection.messages .messagesContainer{
max-height: 100%;
    height: 100%;

   }
}
@media screen and (max-width : 767px) {
.mainSection .post .cols:first-child {
    width: 518px;
    height: 300px;
}
.mainSection.messages .messagesContainer .messagesWindow .messagesBox{
padding: 10px;
}
.mainSection .post .cols:last-child .img{
    height: 140px;
}
.mainSection .mainFeed .stories .add,
.mainSection .mainFeed .stories .story{
    min-width: 100px;
    width: 100px;
    height: 170px;
}
.dataTables_wrapper{
    overflow-x: scroll;
}
.dataTables_wrapper table{
    min-width: 767px;
}
.dataTables_wrapper::-moz-scrollbar,
.dataTables_wrapper::-webkit-scrollbar{
    display: none;
}
.tablePages .searchBox .filter{
    /* flex-direction: column; */
    flex-wrap: wrap;
    gap: 5px    ;
}
    .tablePages .searchBox .filter .tableSelect{
        padding-left: 56px;
    }
    .tablePages .searchBox .filter .input label{
        min-width: 50px;
    }

    .tablePages .referralCode button{
            padding: 12px 35px;
    }
    .tablePages .referralCode .code input{
        width: 100%;
        font-size: 18px;
    }
}

@media screen and (max-width : 650px) {
    .wallet .balances .buttons,
    .wallet .balances .balanceContainer{
        flex-direction: column;
        gap: 20px;
    }
    .wallet .balances .buttons button,
    .wallet .balances .balanceContainer .coins{
        width: 100%;
    }
    .comingSoon h1{
        font-size: 38px;
    }
    .wallet .tableContainer .tabs{
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }
    .wallet .tableContainer .tabs a{
        width: 48%;
        text-align: center;
    }
}
@media screen and (max-width : 550px) {
    .mainSection.notifications .notificationsContainer .notification .pfp{
        width: 30px;
        height: 30px;
    }
   
    .mainSection.publicProfile .middleSec .row .left .buttons a, .mainSection.publicProfile .middleSec .row .left .buttons button{
        font-size: 8px;
        height: 20px;
            padding: 0 6px;
    border-radius: 4px
    }
    .mainSection.notifications .notificationsContainer .notification > img:not(.pfp){
        display: none;
    }
    .comingSoon h1{
        font-size: 36px;
        margin-bottom: 10px;
    }
    .comingSoon form{
        width: 300px;
    }
    .comingSoon form input{
        font-size: 12px;
    }
    .comingSoon form button{
        font-size: 12px;
    }
    .comingSoon{
        padding-top: 30px;
    }
    .comingSoon .logo{
        
        margin-bottom: 84px;
    }
    .mainSection .mobileHeader .searchBar input:not([type='checkbox']){
        margin-left: 0;
    }
    .mainSection .mobileHeader .dropdown .dropdownButton{
        margin-right: 9px;
    }
    .followersContainer{
        gap: 20px;
    }
    .followersContainer .followerCard{
        padding: 14px 26px;
        border-radius: 12px;

    }
    .followersContainer .followerCard img{
        width: 50px;
        height: 50px;
    }
    .followersContainer .followerCard h2{
        font-size: 12px;
    }
    .followersContainer .followerCard h2 span{
        font-size: 10px;
    }
    .followersContainer .followerCard a,
    .followersContainer .followerCard button{
        font-size: 16px;
        padding: 8px 15px;
    }
    .tablePages .bookingsSearchBox{
        flex-direction: column;
    }
   
    .mainSection .post .postHeader .time .dropdown .dropdownButton img,
    .mainSection .post .postHeader .time > img{
        width: 10px !important;
    }
    .mainSection .dashboard .email{
        gap: 10px;
        align-items: flex-start;
        flex-direction: column;
    }
    .tablePages .bookingsSearchBox{
        gap: 20px;
    }
    .mainSection .posts{
        gap: 18px;
    }
     .tablePages .tableSelect, .tablePages .bookingsSearchBox .search{
        width: 100%;
    }
    .tablePages .bookingsSearchBox .search input{
        width: 80%;
    }
 .mainSection .posts .popular h2 a, .mainSection .posts .popular h2{
        font-size: 12px;
    }
    .mainSection .posts .popular .popularUser img{
        width: 34px;
        height: 34px;
    }
    .mainSection .posts .popular p{
        font-size: 10px;
    }
    .mainSection .posts .popular .popularContainer{
        gap: 21px;
    }
    .mainSection .mainFeed .createPost button:not(.addpost) img{
        width: auto;
        height: 15px;
    }
    .mainSection .mainFeed .createPost button:not(.addpost){
        width: 24px;
        height: 24px;
    }
    .mainSection .mainFeed .createPost button.addpost{
        font-size: 12px;
        padding: 6px 10px;
    }
    .mainSection .mainFeed .createPost{
        padding: 5px;
        padding-left: 15px;
        margin-bottom: 30px;
    }
    .mainSection.publicProfile .mainFeed .createPost{
        margin-bottom: 0;
    }
    .mainSection .post .caption a, .mainSection .post .caption{
        font-size: 11px;
    }
    .mainSection .mainFeed .stories{
        margin-bottom: 40px;
        gap: 16px;
    }
    .mainSection .post .postHeader .user > img:first-child{
        width: 24px;
        height: 24px;
    }
     .createPostPopupInner .images div{
        width: 49%;
    }
     .createPostPopupInner{
        padding: 20px;
     }
    .mainSection .post .postHeader .user p{
        font-size: 12px;
        line-height: 1;
    }
    .feedtabs {
    }
    .feedtabs a{
        padding: 0 37px;
        justify-content: center;
        height : 50px;
        font-size: 14px;
    }
    .mainSection .post .postHeader .time{
        font-size: 7px;
        gap: 7px;
        align-items: center;
    }
    .mainSection .searchBar > img{
        width: 15px;
    }
    .mainSection .searchBar{
        padding: 10px 15px;
        gap: 10px;
    }
    .mainSection .searchBar input:not([type='checkbox']){
        font-size: 12px;
    }
    .dropdown .dropdownMenu a,
    .dropdown .dropdownMenu button{
        font-size: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
    }
    .mainSection .post .postHeader .time a img,
    .mainSection .post .postHeader .time button img{
        height: 10px;
        width: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mainSection .post .caption{
        font-size: 10px;
        margin-top: 6px;
    }
    .mainSection .post .cols:last-child .img:not(.blurred){
        display: none;
    }
    .mainSection .post .cols:last-child .img.blurred{
        margin-top: 0;
    }
    .mainSection .post .cols:last-child .img{
        height: 160px;
    }
    .mainSection .post .cols:first-child{
        height: 160px;
               width: 60.5%;
    }
    .mainSection .post .cols:last-child{
            width: 34%;
    }
    .mainSection .post .engage button{
        font-size: 10px;
        gap: 5px;
    }
    .mainSection .post .engage button img{
        width: 15px;
    }
    .mainSection .post .engage{
        gap: 16px;
        margin-top: 11px;
    }
    
    .mainSection .post{
        padding: 6px 9px;
    }
    .mainSection .post .cols:last-child .img.blurred p{
        font-size: 12px;
    }
    .mainSection .post .images{
        gap: 11px;
        margin-top: 11px;
    }
    .mainSection .mainFeed .stories .story{
        background: transparent;
        width: max-content;
        height: max-content;
        min-width: max-content;
        background: none !important;
    }
.headerdropdown .dropdownMenu{
    background: #323232;
    top: calc(100% + 10px);
}
    .mainSection .mainFeed .stories .story img{
        width: 52px;
        height :52px 
    }
    .mainSection .mainFeed .stories .add{
        width: 52px;
        min-width: 52px;
        border-radius: 8px;
        position: relative;
        height: 52px;
                margin: 0 14px
    }
    .mainSection .mainFeed .stories .add p{
        position: absolute;
        bottom : -21px;
        font-size: 12px;
        text-wrap: nowrap;
        
    }
    .mainSection .mainFeed .stories .add img{
        width: 19px;
        height: 19px;
    }
    
    .mainSection .mainFeed .stories .story p{
        margin-top: 6px;
        font-size: 12px;
    }
    .mainSection .mainFeed .stories .story::before{
        display: none;
    }
    .mainSection .mainFeed .createPost input{
        font-size: 12px;
    }
    .mainSection .dashboard .email form .inputDiv{
        width: 100%;
    }
    .mainSection .dashboard .email button{
        margin-left: 0;
    }
    .mainSection .dashboard .pfp h2{
        width: 80%;
    }
    .mainSection .dashboard .pfp{
        flex-wrap: wrap;
        gap: 10px;
    }
    .mainSection .dashboard .pfp button{
        margin: 0;
        width: 48%;
    }
    .mainSection .dashboard .email form .inputDiv .input{
        padding-left: 0;
    }
    .mainSection.support .mainFeed .accordians .accordian{
        width: 100%;
    }
.mainSection .languagePopup{
    padding: 20px;
    border-radius: 11px;
    max-height: 90vh;
    overflow: scroll;
}
.mainSection .languagePopup .languages{
    gap: 10px;
    flex-direction: column;
}
.mainSection .languagePopup h2{
    margin-bottom: 20px;
}
.mainSection .languagePopup .languages{
    margin-top: 20px;
}
.mainSection .languagePopup .language .input{
    width: 16px;
    height: 16px;
}
.mainSection .languagePopup .language{
    max-width: 100%;
    width: 100%;
}
    .mainSection.support .mainFeed .mainFeedContainer, .mainSection.settings .mainFeed .mainFeedContainer{
        padding: 16px;
        border-radius: 11px;
    }
    .mainSection.settings .mainFeed .coverPhoto h1{
        margin-bottom: 12px;
    }
    .mainSection .popup h1{
        font-size: 20px;
    }
    .mainSection .referPopup p{
        font-size: 12px;
    }
    .mainSection .referPopup a{
        margin-top: 59px;
    }
    .mainSection .referPopup a{
        text-wrap: nowrap;
    }
    .mainSection .posts .post:has(video) .videoContainer button img{
        width: 21px;
    }
    .mainSection .posts .post:has(video) .videoContainer button{
        height: 23px;
        width: 60px;
        font-size: 10px;
        gap: 4px;
    }
    .mainSection .posts .post:has(video) .videoContainer{
        border-radius: 9px;
        margin-top: 9px;
    }
    .mainSection .referPopup {
        padding: 47px 20px 44px;
    }
    .mainSection .referPopup button.link{
        max-width: 270px;
    }
    .mainSection.support .searchBar, .mainSection.settings .searchBar, .mainSection.notifications .searchBar{
        padding: 10px 15px;
    }
    .mainSection.support .searchBar > img, .mainSection.settings .searchBar > img, .mainSection.notifications .searchBar > img{
        width: 15px;
    }
    .mainSection.support .searchBar input, .mainSection.settings .searchBar input, .mainSection.notifications .searchBar input{
        font-size: 12px;
    }
    .mainSection.support{
        margin-top: 20px;
    }
    .mainSection.notifications .notificationsContainer{
        border-radius: 11px;
    }
    .wallet .balances .buttons{
        margin-top: 20px;
    }
    .wallet .balances .buttons button{
        font-size: 16px;
          width: 100%;
        max-width: 320px;
        padding: 10.5px 0;
        border-radius: 12px;
        text-transform: capitalize;
    }
    .tablePages .userBalances h2 span, .wallet .balances .balanceContainer .coins h2 span{
        font-size: 18px;
        font-weight: 400;
    }
    .tablePages .userBalances h2, .wallet .balances .balanceContainer .coins h2{
        font-size: 24px;
        font-weight: 400;
        gap: 10px;
    }
    .wallet .balances .balanceContainer .coins{
        gap: 20px;
        padding: 16px 16px 20px;
        height: max-content;
    }
    
    .tablePages .userBalances img,
    .wallet .balances .balanceContainer .coins img{
        display: none;
    }
    .tablePages .userBalances p{
        font-size: 12px;
    }
    .tablePages .userBalances h2{
        line-height: 1;
    }
    .tablePages .userBalances{
        padding: 15px 15px 20px;
    }
    .wallet .balances .buttons button{
        margin: auto;
    }
    .tablePages .bookingsSearchBox select, .tablePages .searchBox .filter select,
    .tablePages .searchBox .filter .input input,
    .tablePages .searchBox .filter .input label{
        font-size: 16px;
    }
    .wallet .tableContainer .tabs{
        gap: 10px;
        flex-direction: column;
        align-items: center;
        margin: auto;
        margin-bottom: 24px;
        margin-top :-30px;
        max-width: max-content;
    }
    
    .wallet .tableContainer .tabs a{
        padding: 0 10px 8px;
        font-size: 12px;
        width: 100%;
    }
    table.dataTable tbody td a,
    table.dataTable tbody td p,
    table.dataTable tbody td .btn,
    table.dataTable tbody td, table.dataTable thead th{
        font-size: 10px !important;
    }
     table.dataTable thead th{
        padding: 13.5px 0 !important;
     }
     .dataTable{
        border-radius: 8px;
     }
     .tablePages .referralCode button,
     .tablePages .searchBox .filter .input input,
     .tablePages .bookingsSearchBox .search input, .tablePages .searchBox .search input,
     .tablePages .bookingsSearchBox select, .tablePages .searchBox .filter select{
        font-size: 12px;
     }
     .dataTable tbody tr td{
        padding: 14px 0 !important;
     }
      .editProfileCreator .feedtabs a{
        padding-left: 15px !important;
    }
    .mainSection.editProfileCreator .mainFeedContainer .tabcontent{
        padding: 16px !important;
    }
    .editForm form .input label{
        font-size: 16px;
    }
    .mainSection.editProfileCreator .mainFeedContainer .basicInfoTab .input:has(.file){
        flex-wrap: wrap;
    }
}
@media screen and (max-width : 500px) {
    .mainSection .dashboard button{   
        font-size: 10px;
        padding: 10px;
        width: max-content !important;
        margin: 0 !important;
    }
    .mainSection.profileEdit .dashboard .links a{
        font-size: 12px;
        gap: 15px;
        padding-bottom: 20px;
    }
  
    .mainSection.profileEdit .dashboard .changePfp .pfp > img{
        width: 100px;
        height: 100px;
    }
   
    .mainSection.messages .messagesContainer .messagesWindow .messageInput input{
    font-size: 12px;
    gap: 16px;
    }
    .mainSection.messages .messagesContainer .messagesWindow .messageInput button img{
    width: 24px;
    height: 24px;
    }
    .mainSection.messages .messagesContainer .messagesWindow .messagesBox .message .text{
    font-size: 12px;
    padding: 6px 8px;
    }
    .mainSection.messages .messagesContainer .messagesWindow .messagesBox{
    gap: 16px;}
    .mainSection.messages .messagesContainer .messagesWindow .messageInput{
        padding:  18px 24px;
    }
    .mainSection.messages .messagesContainer .chats .chatsTop{

    justify-content: space-between;
    }
    .mainSection.messages .messagesContainer .chats > p{
    background: transparent;}
    .mainSection.messages .messagesContainer .chats .chatsTop > img{
    width: 40px;
    height: 40px;
    }
    .mainSection.messages .messagesContainer .messagesWindow .messageTop button:nth-last-child(2),
    .mainSection.messages .messagesContainer .chats .chatsTop button:nth-last-child(2){
    display: none;
    }
    .mainSection.messages{
    position: relative;
    }
    
    .mainSection.messages .top button {
    display: none !important;
    }
    .mainSection.messages .top h1{
    position: absolute;
    top: -45px;
    }
    .mainSection.profileEdit .dashboard{
        padding: 16px;
        padding-top: 40px;
    }
    .mainSection.profileEdit .DashboardSecHeading{
        top: -53px;
    }
    .mainSection.notifications .notificationsContainer .notification h2{
        font-size: 12px;
    }
    .mainSection.notifications .notificationsContainer .notification .buttons button:not(.star){
        display: none;
    }
    .mainSection.notifications .notificationsContainer .notification .buttons button.star{
        display: flex;
    }
    .mainSection.notifications .notificationsContainer{
        gap: 16px;
        padding: 18px 9px;
    }
    
    .mainSection .dashboard .pfp h2{
    width: max-content;
    }
    .mainSection.notifications .mainFeed h1,
    .mainSection.settings .mainFeed > h1,
    .mainSection.support .mainFeed > h1{
        font-size: 20px;
        margin-top: 0;
        margin-left: 10px;
    }
    .mainSection.support .mainFeed .mainFeedContainer {
        padding-bottom: 128px;
    }
    .mainSection.publicProfile .middleSec .coverPhoto{
        height: 150px;
    }
    .mainSection.publicProfile .middleSec .coverPhoto .buttons button img{
        width: 13px;
    }
    .mainSection.publicProfile .middleSec .coverPhoto .buttons button{
        width: 26px;
        height: 26px;
    }
    .mainSection.publicProfile .middleSec .row .left .profilePic{
        width: 66px;
        height: 66px;
        margin-top: -41px;
    }
    .mainSection.publicProfile .middleSec .row .right p,
    .mainSection.publicProfile .middleSec .row .left .name,
    .mainSection.support .mainFeed .mainFeedContainer h1{
        font-size: 12px;
    }
    .mainSection.publicProfile.creatorView .middleSec .row .right p{
        font-size: 8px;
    }
    .mainSection.publicProfile .middleSec .liveButtons button{
        font-size: 12px;
        padding: 16px;
    }
    .mainSection.publicProfile .middleSec .liveButtons{
        gap: 38px;
    }
    .mainSection.publicProfile .middleSec .liveButtons{
        margin: 16px 0 14px;
    }
    .mainSection .comments .commentContainer .commentBox > img{
        width: 30px;
        height: 30px;
    }
    .mainSection .comments{
        padding-left: 0;
    }
    .mainSection .comments .commentContainer .commentBox .commentContent h2{
        font-size: 12px;
    }
    .mainSection .comments .commentContainer .commentBox .commentContent p{
        font-size: 10px;
    }
    .mainSection .comments .commentContainer .commentBox .commentContent .engage button, .mainSection .comments .commentContainer .commentBox .commentContent .engage p{
        font-size: 12px;
    }
    .mainSection .comments .commentContainer .commentBox .commentContent .engage{
        margin-top: 10px;
    }
    .mainSection .comments .commentContainer .commentBox.reply{
        margin-left: 60px;
        margin-top: 16px;
    }
    .mainSection.publicProfile .middleSec .row .left .username{
        font-size: 8px;
    }
    .mainSection.publicProfile .middleSec .row .left .followers{
        margin-top: 10px;
        gap: 23px;
        padding-right: 29px;
    }
    .mainSection.publicProfile .middleSec .row .left .buttons{
        margin-top: 10px;
        gap: 7px;
    }
    .mainSection.publicProfile .middleSec .profileInfo{
        padding-bottom: 10px;
        margin-bottom: 20px;
        border-radius: 11px;
    }
    .mainSection.publicProfile .middleSec .row{
        padding: 0 12px;
    }
    .mainSection.publicProfile .middleSec .row .right{
        margin-top: 37px;
    }
    .mainSection:has(.rightsidebar) .middleSec .row .right p{
        min-height: max-content;
    }
    .mainSection.publicProfile .middleSec .totalPosts{
        padding: 0;
        margin:0 auto 20px;
    }
    .mainSection.publicProfile .middleSec .totalPosts a{
        padding: 0;
        justify-content: center !important;
    }
    .mainSection.publicProfile .middleSec .totalPosts p{
        font-size: 12px;
    }
    .mainSection.publicProfile .middleSec .totalPosts p img{
        width: 16px;
    }
    .mainSection.publicProfile .middleSec .row .right .socialMedia img{
        width: 15px;
    }
    .mainSection.publicProfile .middleSec .row .left .tags{
        margin-top: 16px;
        gap: 3px 10px;
    }
    .mainSection.publicProfile .middleSec .row .left .tags a, .mainSection.publicProfile .middleSec .row .left .followers h2 span{
        font-size: 10px;
    }
    .mainSection.publicProfile .middleSec .row .left .followers h2{
        font-size: 12px;
    }
    .mainSection.support .mainFeed .accordians .accordian{
        padding: 10px;
    }
    .mainSection.support .mainFeed .accordians .accordianButton img{
        width: 20px;
    }
    .mainSection.support .mainFeed .accordians{
        row-gap: 16px;
        margin: 20px 0;
    }
    .mainSection.support .mainFeed form .input label{
        font-size: 12px;
    }
    .mainSection.support .mainFeed form .input textarea, .mainSection.support .mainFeed form .input.file, .mainSection.support .mainFeed form .input input{
        padding: 11px 17px;
        font-size: 12px;
    }
    .mainSection.support .mainFeed form .input textarea{
        height: 99px;
    }
    .mainSection.support .mainFeed .mainFeedContainer form button{
        font-size: 16px;
        margin-top: 30px;
        max-width: 260px;
    }
    .mainSection.settings .dashboard .pfp > img{
        width: 40px;
        height: 40px;
        margin-right: 5px;
    }
    .mainSection .dashboard .emailAddress.password form button{
        margin-left: auto !important;
    }
    .mainSection.settings .dashboard .coverPhoto > img{
        height: 63px;
        border-radius: 11px;
    }
    
    .mainSection.settings .dashboard .pfp h2 span, .mainSection.settings .dashboard .coverPhoto .title h2 span,
    .mainSection.settings .dashboard .pfp h2, .mainSection.settings .dashboard .coverPhoto .title h2{
        font-size: 10px;
    }
}