@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
*{ padding: 0; margin: 0; box-sizing: border-box;}
html {min-height: 100%;overflow: hidden !important; overflow-y: scroll!important;}
:root {margin: 0;padding: 0;--color-black:#000000;--color-bg:#F1F5F9;--color-blue:#3279EA;--color-blue1:#0284C7;--color-blue2:#E0F2FE;--color-header:#385C96;--color-green:#4CAF50;--text-color:#6b6b6b;--font-family:"Inter", sans-serif;--font-24:24px;--border-radius-0:0px;
}
:root {
    margin: 0;
    padding: 0;
    --black-bg1:#222222;
    --orange-bg1:#F37A12;
    --green01:#599E00;
    --blue01:#02C4B7;
    --blue02:#0070D7;
    --light-grey01:#F2F5FF;
    --light-grey02:#E7E7E7;
    --light-grey03:#848484;
    --radius4:4px;
    --radius8:8px;
    --margin-15:15px;
  
  }
body{padding:0px 0 0 0; margin: 0; font-family:"Inter", sans-serif;font-optical-sizing: auto;font-size: 16px; font-weight: normal; background: #fff;overflow: hidden !important; overflow-y: hidden !important; min-height: 100vh; color: var(--text-color); }
img{max-width: 100%;}
a,a:hover,a.active,a:active,a:focus{outline: none; text-decoration: none;}
a, a:hover, a:focus, a:active, a.active {outline: 0;-webkit-transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-ms-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out;text-decoration: none; cursor: pointer;}

/*---------------------------- login pages css ----------------------------*/
#login-main {overflow: hidden;min-height: 100vh;display: flex;align-items: stretch;flex-wrap: wrap;}
.login-content {flex:0 0 50%;max-width: 50%; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 5%;}
.poster-images {flex:0 0 50%;max-width: 50%;position: fixed;width: 50%; right:0; top: 0; overflow: hidden; min-height: 100vh}.poster-images img{position: absolute;left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;object-position: top;}
.login-pad {width: 100%;}.login-headings{text-align: center;}.login-headings h2{margin: 0; padding: 0;color: var(--color-black); font-size: var(--font-24); font-weight: 700;}
.login-headings p{margin: 0; padding: 0;font-size: 16px; color: var(--text-color); font-weight: 400;}.login-headings p a{color: var(--color-blue); text-decoration: underline;}
.login-content hr {background: #000;width: 100%;margin-top: 0;margin-bottom: 2rem;}label{color: var(--color-black);font-size: 16px;}.form-control, .form-select{background-color: var(--color-bg);border-color: var(--color-bg); font-size: 1rem;}
.form-select{background-color: var(--color-bg);border-color: var(--color-bg);}
.form-check {display: flex;align-items: center;justify-content: start;gap: 10px;}
.form-check-input {width: 1.5em;height: 1.5em;background-color: var(--color-bg);border-color: var(--color-bg);}
.btn-primary{background: var(--color-blue); border-color: var(--color-blue);}
@media screen and (max-width:992px) {
.login-content {flex:0 0 100%;max-width:100%;/*justify-content: start;*/}
.poster-images{display: none;}
}
/*-------------------------------- end ----------------------------------*/
@media screen and (max-width:1366px) {
/*.container, .container-lg, .container-md, .container-sm, .container-xl {max-width: 100%;
}*/
}
.body-bg{background: var(--color-bg);}
#masthead {
    background: var(--color-header);position: fixed; left: 0;top: 0;width: 100%;display: flex;justify-content: space-between;padding: 5px 15px;z-index: 1021;}
#masthead::before {position: absolute;left: 0;top: 0;width: 24.333%;height: 100%;content: "";background: #fff;z-index: -1;}
.profile-ico .dropdown-menu {left: auto !important;right: 0 !important;}
.search-box {display: flex;border-radius: .25rem;background: var(--color-bg);min-width: 260px;height: 51px;align-items: center;justify-content: space-between;padding:0 10px;}
.search-box input {width: 100%;background: none;border: none;height: 51px;outline: none;padding: 0 0rem;}
.search-icon {padding: 0 1rem;padding-left: 0;}
.noti-ico a {display: flex;width: 51px;height: 51px;border-radius: .25rem;background: var(--color-bg);align-items: center;justify-content: center;}
.noti-ico {position: relative;}
.noti-alerts {position: absolute;right: -5px;top: -4px;width: 20px;height: 20px;border-radius: 50%;color: #fff;background: #E33732;display: flex;justify-content: center;align-items: center;font-size: 12px;}
.message-ico a {display: flex;width: 51px;height: 51px;border-radius: .25rem;background: var(--color-bg);align-items: center;justify-content: center;}
.menu-ico a {display: flex;width: 51px;height: 51px;border-radius:.25rem;background: var(--color-bg);align-items: center;justify-content: center;}
#navbarDropdown {display: flex;align-items: center;color: #fff;gap: 10px}
.profile-pic {width: 51px;height: 51px;overflow: hidden;border-radius: 50%;border: 2px solid #F1F5F9;min-width: 51px;max-width: 51px;}
@media screen and (max-width:680px) {#masthead::before {height: 62%; display:none;}}
#page-main {padding-top: 130px;padding-left: 365px; padding-right: 365px;min-height:100vh;}
.nav-card{box-shadow: 0px 0px 4px 0px #00000024;border:none;}
.navbar.main-nav, .navbar.quick-links {margin: 0;padding: 0;}
.navbar.main-nav ul,.navbar.quick-links ul {margin: 0;padding: 0;list-style: none;width: 100%;}
.navbar.main-nav li a, .navbar.quick-links li a {display: flex;align-items: center;padding: .5rem;gap: 10px;width: 100%;color: var(--color-black);}
 .navbar.quick-links li a{font-size: 12px;padding-left: 0; padding-right: 0;}
.navbar.quick-links ul {display: flex;flex-wrap: wrap;}
.navbar.quick-links li {flex: 0 0 50%;max-width: 50%;}
.navbar.main-nav li.active a { background: var(--color-bg);}
.main-content{max-width: 100%; margin: 0 auto;}

.add-btn {position: relative;/* width: 100px;  height: 100px; */margin: 0 auto;overflow: hidden;border-radius: 50%;border: 2px dashed #d9d9d9;aspect-ratio: 1;margin: 0 5px;}
.add-btn button {position: relative;width: 100%;height: 100%;/*! overflow: hidden; */display: flex; justify-content: center; align-items: center;border: none;cursor: pointer;background: #E3E8EF;}
.add-btn input {position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0; cursor:pointer; }
.slider-pic {margin: 0 auto;overflow: hidden;/* width: 100px;  height: 100px; */border-radius: 50%;position: relative;display: flex;justify-content: center;align-items: center;aspect-ratio: 1;margin: 0 5px;}.slider-pic a {margin: 0 auto;overflow: hidden;width: 100%;height: 100%;border-radius: 50%;position: relative;display: flex;justify-content: center;align-items: center;}
.slider-pic a img{width: 100%; height: 100%; object-fit: cover}
.slick-prev::before, .slick-next::before {color: #000;}
.social-slider .slick-next {right: 0;z-index: 1000;}
.social-slider .slick-prev {left: 0;z-index: 1000;}
.border-blue{border: 4px solid var(--color-blue);}
.slick-slide {text-align: center;}
.what-mind .btn {background: var(--color-bg);padding: 0;width: 50px;min-width: 50px;}
.users {
    /*overflow: hidden;*/
    width: 36px;height: 36px;border-radius: 50%;min-width: 36px;}
.card-header {background: none;font-size: 14px;color: var(--color-black);font-weight: 600;}
.card-header a{color: var(--color-black);}
.card-header span{color: #6b6b6b; font-size: 12px; font-weight: normal;}
.card-header p{color: #6b6b6b; font-size: 14px; font-weight: normal;}
.full-img {overflow: hidden;border-radius: .25rem;}
.full-img img,.full-img iframe,.full-img video {aspect-ratio: 16/9;width: 100%;height: 100%;object-fit: cover;}
.card{height: fit-content;}
.round {width: 36px;height: 36px;display: flex;align-items: center;border-radius: 50%;justify-content: center;}
.bg-hot {background: #FAE3E3;}
.bg-grey{background: #EBEFF4}
.btn-post {background: #E0F2FE;border-radius: 36px;/* padding: 0; */font-size: 16px;display: flex;white-space: nowrap;align-items: center;}
.comments-box .form-control {border-radius: 36px;font-size: 16px;height: 10px;}
.img-gallery{min-width: 36px;position: relative;}
.img-gallery input{position: absolute; left: 0; top:0; width: 100%; height: 100%; opacity: 0; cursor: pointer;}
.stcky-left {position: fixed;left: 15px;top: 130px;height: calc(100vh - 160px);width: 296px;overflow-y:auto;}
.stcky-right {position: fixed;right: 15px;top: 130px;height: calc(100vh - 160px);width: 296px;overflow-y:auto;}
.gallery-view {height: 320px;}
.gallery-view-half {height: 149px;}
.overlays {position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 2;background: rgba(0,0,0,0.5);color: #fff;}
.full-img {position: relative;}
.overlays a {color: #fff;display: flex;align-items: center;justify-content: center;height: 100%;font-size: 20px;width: 100%;}
.card.nav-card {
    /*height: 100%;*/
    justify-content: space-between;display: flex;align-items: stretch;}
.my-links-card {box-shadow: 0px 0px 4px 0px #00000024;border: none;}
.howworks-card{  box-shadow: 0px 0px 4px 0px #00000024;border: none;min-height: 170px;}
.howworks-card img {min-width: 134px;max-width: 134px;position: absolute;right: 1rem; top: 50%; transform: translateY(-50%)}
.btn-new {background: #E0F2FE;font-size: 14px;color: #0284C7;border-radius: .20rem;}
.btn-new:hover,.btn-new:focus {background: var(--color-blue);color: #fff;}
.my-links-card .card-header{background: none;}.my-links-card .card-header h5{font-weight: 600;font-size: 16px; color: var(--color-black);}.my-links-card .card-header a{color: #6b6b6b; font-size: 14px;}
.levels-text h4 {margin: 0;font-size: 14px;font-weight: 600;color: #000;}
.levels-text span {color: #6b6b6b;font-size: 14px;}
.levels-text h4 a {color: #000; }
.price-text{font-size: 14px; color: #000;}.price-text .text-success{color: #4CAF50; font-weight: 600}
.peoples-list {max-height: 220px;}
.mCSB_inside > .mCSB_container {margin-right: 1rem;}
.peoples-content {font-size: 14px;}
.peoples-content a {font-size: 14px; font-weight: 600;color: #000;}
.peoples-content p {font-size: 12px;color: #8d8d8d;}
.card-header .dropdown-toggle::after {display: none;}
.card-header .dropdown-toggle::before {display: none;}
@media screen and (max-width:1920px) {#masthead::before {width:17.75%;}
.stcky-left{width: 320px;}.stcky-right{width: 320px;}
#page-main {padding-left: 365px; padding-right: 365px;}}

@media screen and (max-width:1366px) {
#masthead::before {width: 24.333%;}
.stcky-left{overflow: hidden; overflow-y: scroll;}
.stcky-right{overflow: hidden; overflow-y: scroll;}
.stcky-left{width: 296px;}.stcky-right{width: 296px;}
#page-main {padding-left: 341px; padding-right: 341px;}}
@media screen and (max-width:1200px) {
.search-box {min-width: 400px;}
.main-content{ margin: 0;}
#page-main {padding-left: 15px; padding-right: 341px;}}

@media screen and (max-width:992px) {
.search-box {min-width: 100%;}
.main-content{max-width: 100%; margin: 0 auto;}
.stcky-right {width: 100%;position: relative;top: 0;right: 0;height: fit-content;}

#page-main {padding-left: 15px; padding-right: 15px;}}

@media screen and (max-width:680px) {
 #page-main {padding-top: 120px;}
.search-box {min-width: 100%;}
#masthead::before {width:100%;}
.btn-sm-views{flex-wrap: wrap;}
.btn-sm-views .btn.btn-lg {height: 50px;display: flex;align-items: center;justify-content: center;min-width: 100%;gap: .5rem;font-size: 14px;}
.btn-post-small {right: 1rem;}
.btn-post-small button {background: none;border: none;cursor: pointer;outline: none;}}

/*---------------------- 06-11-2024 css start from here ------------------------------*/
.plancard-blue{box-shadow: 0px 0px 4px 0px #00000024; background: var(--color-blue); border: none;}.btn{font-size: 14px!important}
.btn.btn-lg.btn-outline-light {color: #fff;}
.btn.btn-lg.btn-outline-light:hover,.btn.btn-lg.btn-outline-light:focus {color: var(--color-blue);background: #fff !important;}
.plancard-blue p{margin: 0;}.active-ball{background: #4CAF50; border: 1px solid #fff; border-radius: 50%; width: 15px; height: 15px; min-width: 10px;}
.plancard-white{background: #fff;box-shadow: 0px 0px 4px 0px #00000024; border: none;}
.plancard-white .card-header{background: var(--color-blue2);color:#000; font-size: 18px;}.plancard-white h2{font-size: 18px;}
.plancard-white ul{list-style: disc;padding-left: 1rem;}.plancard-white li{font-size: 14px; color: #6b6b6b;}
.border-radius-0{border-radius: var(--border-radius-0);}

.cancel-suscription-content h2 {font-size: 20px;font-weight: 700;}
.cancel-suscription-content h5 { font-size: 18px;}
.cancel-suscription-content ul {margin: 0; padding: 0 0rem 0 1rem;list-style: disc;}
.cancel-suscription-content li {font-size: 16px;}.border-radius-1{border-radius: .25rem}.bg-success{background: #4CAF50!important}.font-14{font-size: 14px;}
.potential-pay .card-body{max-height: 230px;}

.eye-drop {position: absolute;right: 1rem;top: 45px;}
.login-pad .btn {font-size: 18px !important;}
.search-people h5 a{color: #000; text-align: center;font-size: 16px;}
.userbig-img {margin: 0 auto;width: 130px;height: 130px;overflow: hidden;border-radius: 50%;border: 1px solid #ddd;}
.search-for{font-size: 16px; font-weight: 500; color: #000;}.search-for span{color: #6b6b6b;}


#slidingDiv {display: none;       /* Initially hidden */padding: 20px;background-color: #fff;border: 1px solid #ddd;width: 100%;max-width: 320px;min-width: 320px;position: absolute;top: 40px;           /* Adjust as needed */left: 0px;          /* Adjust as needed */z-index: 1000;font-size: 12px;
}
@media screen and (max-width:680px) {
#slidingDiv{left: 50%;transform: translateX(-50%); right: auto; min-width: 350px}}
.uploadeds {overflow: hidden;overflow-x: auto;margin-bottom: 1rem;}
.col-pic {min-width: 100px;width: 100px; max-width: 100px;}
.uploaded-img {position: relative;width: 100%;height: 100px;border-radius: .25rem;overflow: hidden;border: 1px solid #ddd;}
.trash {position: absolute;left: auto;right: 0;top: 0;background: #fff;width: 32px;height: 32px;display: flex;justify-content: center;align-items: center;}
.trash img {width: auto !important;height: auto !important;object-fit: contain !important;}
.uploaded-img img {width: 100%;height: 100%;object-fit: cover;}
.browse-files {position: relative;padding: 1rem;border: 1px dashed #6b6b6b;border-radius: .25rem;gap: 10px;}
.browse-files input {position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;cursor: pointer;}



/*-------------------------------- 11-11-2024 ---------------------------------*/
body{font-size: 14px;}
#masthead{
/* background: #6b6b6b;box-shadow: 0px 0px 4px 0px #00000024; */
background:linear-gradient(to right, #fff 30%, #d3d3d3 40%, #6b6b6b 100%);
}

#masthead_guest{
/* background: #6b6b6b;box-shadow: 0px 0px 4px 0px #00000024; */
background:linear-gradient(to right, #fff 30%, #d3d3d3 40%, #6b6b6b 100%);
}

#masthead_member{
/* background: #6b6b6b;box-shadow: 0px 0px 4px 0px #00000024; */
background:linear-gradient(to right, #fff 30%, #dad9ff 40%, #0003d5 100%);

}

#masthead.verify-bg{background: #2BCC06;}
#page-main.without-rightsidebar{padding-right: 30px;}.heading-insides h2{color: var(--color-black); font-size: 28px; font-weight: 600;}
.groups-img {overflow: hidden;border-radius: .4rem;height: 170px;}
/* .groups-img img {width: 100%;height: 100%;object-fit: cover; object-position: top;} */
.groups-img img {width: 100%;height: 100%;object-fit: cover;aspect-ratio: 16/9;}
.thumbs a svg {fill: #6b6b6b;}.thumbs a:hover svg,.thumbs a:focus svg {fill:var(--color-blue);}
.groups-cards {color: #6b6b6b;}
.groups-cards h5 a {color: var(--color-black);font-size: 16px;font-weight: 700;}
.groups-text {font-size: 14px;font-weight: 500;}
.groups-text p {margin: 0;}
.common-cards {box-shadow: 0px 0px 4px 0px #00000024;border: none;}
@media screen and (max-width:1170px) {
#page-main.without-rightsidebar {  padding-right: 15px;}}
.overflow-hidden{overflow: hidden;}
.posters-img  {overflow: hidden;height: 290px;display: flex;width:100%; justify-content: center;}
.posters-img img {width: 100%;height: 100%;object-fit: cover;aspect-ratio: 16/9;}
.posters-cards {color: #6b6b6b;}
.posters-cards h5 {color: var(--color-black);font-size: 24px;font-weight: 700;}
.posters-cards h5 a {color: var(--color-black);font-size: 24px;font-weight: 700;}
.posters-text {font-size: 16px;font-weight: 500;}
.posters-text p {margin: 0;}.posters-text strong{color: var(--color-black);}
.nav-pills .nav-link{border-bottom: 4px solid transparent;border-radius: 0 !important;background: none;color: var(--color-black); font-size: 16px; font-weight: 500;  padding-top: 1rem;padding-bottom: 1rem;}
.nav-pills .nav-link.active{border-bottom: 4px solid var(--color-blue);background: none;color: var(--color-blue);}
.max-w-100{max-width: 100%;}
.floats-div h5{margin: 0; color: var(--color-black);font-weight: 600;}.floats-div p{margin-bottom: 0; color: #6b6b6b}
.img-pro-pic2 {overflow: hidden;width: 50px;height: 50px;border-radius: 50%; min-width:50px; max-width: 50px; display:flex; align-items:center; justify-content:center;}
.img-pro-pic2 a {overflow: hidden;width: 50px;height: 50px;border-radius: 50%; min-width:50px; max-width: 50px; display:flex; align-items:center; justify-content:center;}
.table td {vertical-align: middle;}
.table-responsive {white-space: nowrap;}.table td .form-select{width: 200px;}
.date {color: #6b6b6b;}
.photos-videos {overflow: hidden;}
.photos-videos img,.photos-videos video,.photos-videos iframe {width: 100%;height: 100%;object-fit: cover;aspect-ratio: 4/3;}
.delete-icos {position: absolute;z-index: 2;right: 1rem;top: 1rem;background: rgba(255,255,255,0.5);width: 36px;height: 36px;display: flex;justify-content: center;align-items: center;border-radius: 50%;}
.delete-icos img {aspect-ratio: auto;width: auto;height: auto;object-fit: contain;}
#slidingDiv1 {display: none;       /* Initially hidden */padding:10px 20px;background-color: #fff;border: 1px solid #ddd;width: 100%;max-width: 200px;/*min-width: 200px;*/min-width: 60px;position: absolute;bottom: 40px;           /* Adjust as needed */left: 0px;          /* Adjust as needed */z-index: 1000;font-size: 12px;
}
@media screen and (max-width:680px) {
#slidingDiv1{left: 0;right: auto; min-width: 200px}}

.font-12{font-size: 12px;}
.social-slider span {font-size: 12px;font-weight: 600;}
.navbar.main-nav li a, .navbar.quick-links li a {font-size: 14px;font-weight: 600;}.navbar.quick-links li a {font-size: 12px;font-weight: 400;}

/*------------------------- 13-11-2024 -----------------------*/
.about-contents h1,.about-contents h2,.about-contents h3,.about-contents h4,.about-contents h5,.about-contents h6,.about-contents ul,.about-contents li,.about-contents p,.about-contents img,.about-contents video,.about-contents iframe{  margin: 0; padding: 0;color: var(--color-black); font-size: 14px;}  .about-contents h1{font-weight: 600; font-size: 20px;}
.about-contents ul{list-style: none; padding-left: 0px} .about-contents li{padding-left: 25px; position: relative;}.about-contents li:before{position: absolute; left: 0; top: 5px; content: ""; width: 12px; height: 12px; background: var(--color-blue);}
.h1-common{font-weight: 500; font-size: 20px;color: var(--color-black);}
.btn-file{right: 1rem; bottom: 1rem;}
.btn-file input{position: absolute;left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0;}
.profile-poster {border-radius: 10px;overflow: hidden;}

.user-pic-inside {width: 120px;height: 120px;display: flex;align-items: center;justify-content: center;overflow: hidden;border-radius: 50%;border: 4px solid #fff;
}
.user-pic-big {left: 1rem;bottom: 1rem;
}

.btn-file.btn-user-adds {position: absolute;background: #fff;width: 26px;height: 26px;border-radius: 50%;display: flex;justify-content: center;align-items: center;right: 8px;bottom: 1px;font-weight: bold;
}
.btn-user-adds {font-size: 12px;color: #666;}
.font-16{font-size: 16px;}

.delete-label {display: flex;width: 36px;height: 36px;justify-content: center;align-items: center;background: #FDE9E5;border-radius: 50%;
}
.add-label {background: #DBFFDC;width: 36px;height: 36px;display: flex;justify-content: center;align-items: center;border-radius: 50%;
}
.friends-request .card-body{max-height:300px;}.invited-users .card-body{max-height: 300px}

.card-newlinks {margin: 0;padding: 0;line-height: normal;list-style: none;
}
.card-newlinks li {background: #fff;border-radius: .5rem;box-shadow: 0px 0px 4px 0px #00000024;padding: 0rem;
}


.pointer {  display: flex;  font-size: 16px;  height: 80px;  position: relative;  background: #777777;  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);  align-items: center;  justify-content: center;  padding: 0rem;  min-width: 150px;  max-width: 150px;
}

.pointer .text-content {  display: flex;  position: relative;  vertical-align: middle;  color: #ffffff;  padding: 0 2rem;  flex-direction: column;  justify-content: center;  align-items: center;  font-size: 16px;  font-weight: 600;
}
.pointer .text-content p {text-align: center;
}

.card-newlinks li a {padding: 1rem;
}
.text-members {color: var(--color-black);font-size: 16px;
}
.text-members span {font-size: 14px;color: #6b6b6b;text-align: center;
}
/*.total-pays{font-size: 16px; font-weight: 600; color: var(--color-black); border: 1px dashed var(--color-green); background: #fff;border-radius: 4px;}*/
.total-pays{font-size: 16px;
    font-weight: 600;
    color: #fff;
    /* border: 1px dashed var(--color-green); */
    background: #0E9AFF;
    border-radius: 4px;}
.greens strong{color: var(--color-white);}
.card-newlinks li:nth-child(1) .pointer{background: #0E9AFF}
.card-newlinks li:nth-child(2)  .pointer{background: #F36F56}
.card-newlinks li:nth-child(3) .pointer{background: #3AA186}
.card-newlinks li:nth-child(4) .pointer{background: #4FB5DC}
.card-newlinks li:nth-child(5) .pointer{background: #3D304C}
.card-newlinks li:nth-child(6) .pointer{background: #F07B11}
.card-newlinks li:nth-child(7) .pointer{background: #A2C03B}
.card-newlinks li a .btn-actives button{display:none;}
.card-newlinks li.active a .btn-actives button{display: flex;}

.btn-actives {min-width: 150px;max-width: 150px;
}
.btn-actives button {width: 100%;text-align: center;justify-content: center;
}
.accordion-button {  font-size: 16px;  font-weight: 600;
}
.accordion-body {  color: #6b6b6b;  font-size: 14px;
}

.accordion-item {  border-radius: .5rem;  border: none;  box-shadow: 0px 0px 4px 0px #00000024;overflow: hidden;
}

.member-cards-img {
    position: relative;width: 130px;height: 130px;border-radius: 50%;display: flex;justify-content: center;align-items: center;
}

.member-cards-img a{
    overflow: hidden;
    position: relative;
    border-radius: 50%;
}
.member-cards-img img {aspect-ratio: 1;width: 100%;height: 100%;object-fit: cover;
}

.members-cards .dropdown {position: absolute;right: 1rem;top: 1rem;
}
.members-cards .dropdown a::after {display: none;
}
.members-cards .dropdown .dropdown-menu{min-width: 13rem; font-size: 12px}


.wrap-modal-slider .fa-arrow-right.slick-arrow {position: absolute;right: 1rem;top: 50%;z-index: 1001;color: #fff;font-size: 20px;transform: translateY(-50%);
}
.wrap-modal-slider .fa-arrow-left.slick-arrow {position: absolute;left: 1rem;top: 50%;z-index: 1001;color: #fff;font-size: 20px;transform: translateY(-50%);
}
.toggle-content {display:none;
}

.content-box {  display: none; max-height: 250px;}

.comment-user {display: flex;min-width: 32px;max-width: 32px;height: 32px;border-radius: 50%;overflow: hidden;
}
.hot-label {width: 32px;height: 22px;max-width: 32px;min-width: 32px;display: flex;justify-content: center;align-items: center;
}
.modal-dialog-scrollable {overflow-x: hidden;
}
.bg-light{background: #F1F5F9!important}


/* *******************************
message-area
******************************** */

.message-area {height: 100vh;overflow: hidden;
}

.chat-area {position: relative;width: 100%;background-color: #fff;border-radius: 0.3rem;height: 90vh;overflow: hidden;min-height: calc(100% - 1rem);
}

.chatlist {outline: 0;height: 100%;overflow: hidden;width: 300px;float: right;padding: 15px;
}

.chat-area .modal-content {border: none;border-radius: 0;outline: 0;height: 100%;
}

.chat-area .modal-dialog-scrollable {height: 100% !important;
}

.chatbox {width: auto;overflow: hidden;height: 100%;border-right: 1px solid #ccc;
}

.chatbox .modal-dialog,
.chatlist .modal-dialog {max-width: 100%;margin: 0;
}

.msg-search {display: flex;align-items: center;justify-content: space-between;padding-bottom: 17px;margin-bottom: 1rem;border-bottom: 1px solid #ccc;padding-top: 10px;
}
.chat-area .form-control {display: block;width: 100%;padding: 0.375rem 0.75rem;font-size: 14px;font-weight: 400;line-height: 1.5;color: #222;background-color: #fff;background-clip: padding-box;border: 1px solid #ccc;-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 0.25rem;transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.chat-area .form-control:focus {outline: 0;box-shadow: inherit;
}

a.add img {height: 36px;
}

.chat-area .nav-tabs {border-bottom: 1px solid #dee2e6;align-items: center;justify-content: space-between;flex-wrap: inherit;
}

.chat-area .nav-tabs .nav-item {width: 100%;
}

.chat-area .nav-tabs .nav-link {width: 100%;color: #180660;font-size: 14px;font-weight: 500;line-height: 1.5;text-transform: capitalize;margin-top: 5px;margin-bottom: -1px;background: 0 0;border: 1px solid transparent;border-top-left-radius: 0.25rem;border-top-right-radius: 0.25rem;
}

.chat-area .nav-tabs .nav-item.show .nav-link,
.chat-area .nav-tabs .nav-link.active {color: #222;background-color: #fff;border-color: transparent transparent #000;
}

.chat-area .nav-tabs .nav-link:focus,
.chat-area .nav-tabs .nav-link:hover {border-color: transparent transparent #000;isolation: isolate;
}

.chat-list h3 {color: #222;font-size: 16px;font-weight: 500;line-height: 1.5;text-transform: capitalize;margin-bottom: 0;
}

.chat-list p {color: #6b6b6b;font-size: 14px;font-weight: 400;line-height: 1.5;text-transform: capitalize;margin-bottom: 0;
}

.chat-list a.d-flex {margin-bottom: 0px;position: relative;text-decoration: none;
}

.chat-list .active {display: block;content: '';clear: both;position: absolute;bottom: 3px;right: -2px;height: 12px;width: 12px;background: #00DB75;border-radius: 50%;border: 2px solid #fff;
}

.msg-head .active {display: block;content: '';clear: both;position: absolute;bottom: 3px;right: -2px;height: 12px;width: 12px;background: #00DB75;border-radius: 50%;border: 2px solid #fff;
}

.msg-head h3 {color: #222;font-size: 18px;font-weight: 600;line-height: 1.5;margin-bottom: 0;
}

.msg-head p {color: #6b6b6b;font-size: 14px;font-weight: 400;line-height: 1.5;text-transform: capitalize;margin-bottom: 0;
}

.msg-head {padding: 15px;border-bottom: 1px solid #ccc;
}

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

.moreoption .navbar {padding: 0;
}

.moreoption li .nav-link {color: #222;font-size: 16px;
}

.moreoption .dropdown-toggle::after {display: none;
}

.moreoption .dropdown-menu[data-bs-popper] {top: 100%;left: auto;right: 0;margin-top: 0.125rem;
}

.msg-body ul {overflow: hidden; padding: 0 1rem;
}

.msg-body ul li {list-style: none;margin: 15px 0;
}

.msg-body ul li.sender {display: block;width: 100%;position: relative;
}

.msg-body ul li.sender:before {display: block;clear: both;content: '';position: absolute;top: -6px;left: -7px;width: 0;height: 0;border-style: solid;border-width: 0 12px 15px 12px;border-color: transparent transparent #f5f5f5 transparent;-webkit-transform: rotate(-37deg);-ms-transform: rotate(-37deg);transform: rotate(-37deg);
}

.msg-body ul li.sender p {color: #000;font-size: 14px;line-height: 1.5;font-weight: 400;padding: 15px;background: #f5f5f5;display: inline-block;border-bottom-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;margin-bottom: 0;
}

.msg-body ul li.sender p b {display: block;color: #180660;font-size: 14px;line-height: 1.5;font-weight: 500;
}

.msg-body ul li.repaly {display: block;width: 100%;text-align: right;position: relative;
}

.msg-body ul li.repaly:before {display: block;clear: both;content: '';position: absolute;bottom: 15px;right: -7px;width: 0;height: 0;border-style: solid;border-width: 0 12px 15px 12px;border-color: transparent transparent #4b7bec transparent;-webkit-transform: rotate(37deg);-ms-transform: rotate(37deg);transform: rotate(37deg);
}

.msg-body ul li.repaly p {color: #fff;font-size: 14px;line-height: 1.5;font-weight: 400;padding: 15px;background: #4b7bec;display: inline-block;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-left-radius: 10px;margin-bottom: 0;
}

.msg-body ul li.repaly p b {display: block;color: #061061;font-size: 14px;line-height: 1.5;font-weight: 500;
}

.msg-body ul li.repaly:after {display: block;content: '';clear: both;
}

.time {display: block;color: #000;font-size: 12px;line-height: 1.5;font-weight: 400;
}

li.repaly .time {margin-right: 20px;
}

.divider {position: relative;z-index: 1;text-align: center;
}

.msg-body h6 {text-align: center;font-weight: normal;font-size: 14px;line-height: 1.5;color: #222;background: #fff;display: inline-block;padding: 0 5px;margin-bottom: 0;
}

.divider:after {display: block;content: '';clear: both;position: absolute;top: 12px;left: 0;border-top: 1px solid #EBEBEB;width: 100%;height: 100%;z-index: -1;
}

.send-box {padding: 15px;border-top: 1px solid #ccc;
}

.send-box form {display: flex;align-items: center;justify-content: space-between;margin-bottom: 15px;
}

.send-box .form-control {display: block;width: 100%;padding: 0.375rem 0.75rem;font-size: 14px;font-weight: 400;line-height: 1.5;color: #222;background-color: #F1F5F9;background-clip: padding-box;border: 1px solid #F1F5F9; height: 50px;  -webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 0.25rem;transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.send-box button {border: none;background: #F1F5F9;padding:0px;width:50px; min-width:50px; max-width:50px;color: #3279ea;border-radius: 50%;font-size: 24px;font-weight: 400; display: flex; justify-content: center; align-items: center;
}

.send-box button i {margin-right: 5px;
}

.send-btns .button-wrapper {position: relative;width: 125px;height: auto;text-align: left;margin: 0 auto;display: block;background: #F6F7FA;border-radius: 3px;padding: 5px 15px;float: left;margin-right: 5px;margin-bottom: 5px;overflow: hidden;
}

.send-btns .button-wrapper span.label {position: relative;z-index: 1;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 100%;cursor: pointer;color: #343945;font-weight: 400;text-transform: capitalize;font-size: 13px;
}

#upload {display: inline-block;position: absolute;z-index: 1;width: 100%;height: 100%;top: 0;left: 0;opacity: 0;cursor: pointer;
}

.send-btns .attach .form-control {display: inline-block;width: 120px;height: auto;padding: 5px 8px;font-size: 13px;font-weight: 400;line-height: 1.5;color: #343945;background-color: #F6F7FA;background-clip: padding-box;border: 1px solid #F6F7FA;border-radius: 3px;margin-bottom: 5px;
}

.send-btns .button-wrapper span.label img {margin-right: 5px;
}

.button-wrapper {position: relative;width: 100px;height: 100px;text-align: center;margin: 0 auto;
}

button:focus {outline: 0;
}

.add-apoint {display: inline-block;margin-left: 5px;
}

.add-apoint a {text-decoration: none;background: #F6F7FA;border-radius: 8px;padding: 8px 8px;font-size: 13px;font-weight: 400;line-height: 1.2;color: #343945;
}

.add-apoint a svg {margin-right: 5px;
}

.chat-icon {display: none;
}

.closess i {display: none;
}


/* --------------------------------- CSS for chat box ------------------------------- */
.back-to{margin: 0 0 15px 0;}
.message-box{min-height: 100%; display: flex;flex-direction: column;margin: 0 0 2rem 0; background: #fff; border-radius: 8px;}
.message-box-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;border-bottom: 1px solid #d9d9d9;
}
.to-message {
  max-width:fit-content;
  padding: .75rem;
  border-radius: 8px;
  background: var(--light-grey02);
  font-size: 14px;
  color: var(--black-bg1);
}
.from-message {
  max-width: fit-content;
  padding: .75rem;
  border-radius: 8px;
  background: var(--light-grey01);
  font-size: 14px;
  color: var(--black-bg1);
}

.from-date {
    max-width: fit-content;
    padding: .75rem;
    border-radius: 64px;
    background: var(--light-grey01);
    font-size: 8px;
}

.message-box-body {
  flex-grow: 1;
  padding: 1rem 1rem;
  overflow-y: auto;max-height: 75vh;position: relative;
}

.message-box-body {
  position: relative;
}
.conversation-box {
  
  width: 100%;
  background: rgba(255,255,255,0.8);
  padding:0 1rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.conversation-box p {
  margin: 0;
}


.message-box-footer {
  position: relative;padding: 1rem;border-top: 1px solid #d9d9d9;
}

.message-form form {
  display: flex;
  background: var(--light-grey01);
  border-radius: 4px;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  gap: 20px;
  overflow: hidden;
}
.message-form form textarea {
  width: 100%;
  border: none;
  background: none;
  height: 40px;
  padding-top: 10px;
}
.message-form form button {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: none;
  background: #fff;
  min-width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*---------------- 30-07-2024 ------------*/

.message1 .msg_btn {
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #DBF4F0;
}
.message1 a.disabled{background: #F2F5FF; cursor:not-allowed;}
.message1 {
  border-radius: 10px;
}

.message-box-body{font-size:14px;}
.chat-box{border:0px solid #fff!important;}
.enabled .to-message {background: #FFE6D6;}
.message-form form button {position: relative;}
.message-form form button input[type="file"] {position: absolute;left: 0;top: 0;opacity: 0;height: 100%;width: 100%;cursor: pointer;}

.profile-menu{display:flex}.profile-menu a{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--black-bg1)}
/* .profile-menu a .profile-pic{width:40px;height:40px;overflow:hidden;border-radius:50%} */
.navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-toggler:focus{box-shadow:0 0 0 #fff}

.message1 .msg_btn {
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #DBF4F0;
  }
  .message1 a.disabled{background: #F2F5FF; cursor:not-allowed;}
  .message1 {
    border-radius: 10px;
  }
/* ---------------------------------- end chat box css ----------------------- */


@media (max-width: 767px) 
{
    .chat-icon {display: block;margin-right: 5px;}.chatlist {width: 100%;}.chatbox {width: 100%;position: absolute;left: 1000px;right: 0;background: #fff;transition: all 0.5s ease;border-left: none;}
    .showbox {left: 0 !important;transition: all 0.5s ease;}.msg-head 
    h3 {font-size: 14px;}.msg-head p {font-size: 12px;}
    .msg-head .flex-shrink-0 img {height: 30px;}
    .send-box button {width: 28%;}
    .send-box .form-control {width: 100%; padding-right:50px; !important}.chat-list h3 {font-size: 14px;}.chat-list p {font-size: 12px;}.msg-body ul li.sender p {font-size: 13px;padding: 8px;border-bottom-left-radius: 6px;border-top-right-radius: 6px;border-bottom-right-radius: 6px;}.msg-body ul li.repaly p {font-size: 13px;padding: 8px;border-top-left-radius: 6px;border-top-right-radius: 6px;border-bottom-left-radius: 6px;}
}

.uploads-buttons {right: 1rem;top: 50%;transform: translateY(-50%);font-size: 18px;color: #000;
}
.uploads-buttons button {background: none;border: none;outline: none;position: relative;color: #000;padding: 0;width: auto !important;min-width: auto !important;max-width: fit-content !important;
}

.uploads-buttons input[type="file"] {opacity: 0;width: 100%;height: 100%;position: absolute;left: 0;top: 0;cursor: pointer;
}
.three-steps {position: absolute;left: 0;top: 0;width: 100%;height: 100%;
}
.counter-overs {position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background: rgba(0,0,0,0.5);color: #fff;font-size: 24px;font-weight: 700;opacity: 0;transition: all .5s ease-in-out;
}
.slider-pic a:hover .counter-overs {opacity: 1;transition: all .5s ease-in-out;
}
@media (max-width: 992px) {.counter-overs{opacity: 1;}
}/* Container styling */
.gallery {position: relative;width: 100%;max-width: 600px; /* Set a maximum width for the gallery */margin: auto;display: flex;flex-direction: column;overflow: hidden;
min-height: 100vh; justify-content: center;
}

.image-container {position: relative;width: 100%;display: flex;justify-content: center;align-items: center;
}

.gallery-image {width: auto;height: auto;max-width: 100%; /* Limit width to the container */max-height: calc(100vh - 200px); /* Optional: Prevent overly tall images */object-fit: contain; /* Ensure the entire image fits within the container */opacity: 0;transition: opacity 0.5s ease;display: none;
}

.gallery-image.active {opacity: 1;display: block;
}

/* Overlay styling */
.overlay {position: absolute;bottom: 0;left: 0;width: 100%;padding: 10px;background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */color: #fff;font-family: Arial, sans-serif;display: flex;flex-direction: column;gap: 5px;
}

/* User profile section */
.user-profile {display: flex;align-items: center;gap: 10px;
}

.profile-thumb {width: 40px;height: 40px;border-radius: 50%;object-fit: cover;
}

.username {font-weight: bold;font-size: 14px;
}

/* Caption text */
.caption {font-size: 16px;line-height: 1.4;
}

/* Progress bar styling */
.progress-bar-container {margin-bottom: 10px;width: 100%;height: 4px;background-color: #ddd;
}

.progress-bar {width: 0;height: 100%;background-color: #0095f6;transition: width 0.5s ease;
}

/* Button styling */
.prev-btn, .next-btn {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0, 0, 0, 0.6);color: #fff;border: none;padding: 8px 16px;cursor: pointer;font-size: 16px;
}

.prev-btn { left: 10px; }
.next-btn { right: 10px; }

/* Responsive adjustments */
@media (max-width: 600px) {.prev-btn, .next-btn {font-size: 14px;padding: 6px 12px;}
}
.modal-customs .btn-close { width: 40px;height: 40px;display: flex;justify-content: center;align-items: center;opacity: 1;border-radius: 0;
}
.modal-customs .modal-content{background: none}


.photo-hot-icos {position: absolute;right: 1rem;bottom: 1rem;background: rgba(255,255,255,0.95);width: 36px;height: 36px;display: flex;ustify-content: center;align-items: center;border-radius: 50%;}
.photo-hot-icos img{width: auto; height: auto;object-fit: contain;}
.photo-hot-icos.disabled a{cursor: not-allowed;}
.photo-hot-icos.disabled a img{  -webkit-filter: grayscale(100%);filter: grayscale(100%);}
.my-details {list-style: none;margin: 0;padding: 0;font-size: 16px;}
.my-details li {display: flex;align-items: center;gap: 1rem;color: #000000;}
.my-details li a {color: #000;}
.my-detailstimeline {list-style: none;margin: 0;padding: 0;font-size: 16px;}
.my-detailstimeline li {display: flex;align-items: center;gap: 1rem;color: #fff;}
.my-detailstimeline li a {color: #fff;}
.my-detailstimeline li svg{fill:#fff}
.posters-timelineimg  {overflow: hidden;height: 250px;display: flex;width:100%; justify-content: center;}
.posters-timelineimg img {width: 100%;height: 100%;object-fit: cover;aspect-ratio: 16/9;}
.posters-timelineimg:after{position: absolute; left: 0; top: 0; width: 100%;height: 100%; content: "";  background: rgb(0,0,0);background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); }
.poster-timeline-content{z-index: 2; color: #fff; width: 100%;height: 100%;}.user-pic-inside{min-width: 120px; max-width: 120px;}

/* Responsive adjustments */
@media (max-width: 600px) {
.my-detailstimeline li{color: #000;}
#timelines-one .user-pic-inside{margin-top: -80px;}
.my-detailstimeline li svg{fill:#000}
}

.friend-search img {position: absolute;left: 1rem;top: 11px;}
.friend-search .form-control {padding-left: 3rem;}
.contact-card {min-height: 100%;}
.contact-card h4 {font-size: 18px; margin-bottom: 0}


/* Own CSS */
#slidingCmtDiv1 {display: none;       /* Initially hidden */padding:10px 20px;background-color: #fff;border: 1px solid #ddd;width: 100%;max-width: 200px;min-width: 200px;position: absolute;bottom: 40px;           /* Adjust as needed */left: 0px;          /* Adjust as needed */z-index: 1000;font-size: 12px;
}
@media screen and (max-width:680px) {
#slidingCmtDiv1{left: 0;right: auto; min-width: 200px}
    
 
}

.delete-thumb-icos {position: absolute;right: 0rem;top: 0rem;background: rgba(255,255,255,0.5);width: 36px;height: 36px;display: flex;justify-content: center;align-items: center;border-radius: 50%;}
.delete-thumb-icos img {aspect-ratio: auto;width: auto;height: auto;object-fit: contain;}

.profile-picture {
    width: 100%; /* Adjust size as needed */
    height: 100%; /* Adjust size as needed */
    border-radius: 50%; /* Makes the image circular */
    object-fit: cover; /* Ensures the image fits within the circle */
    overflow: hidden;
  }
  
  .contact-card {min-height: 100%;}
  .contact-card h4 {font-size: 18px; margin-bottom: 0}
  
  .notifictions ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .notifictions li {
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: .75rem;
    margin-bottom: .75rem;
  }
  .notifictions li:nth-child(odd) h5 {
    color:var(--color-blue);
  }
  
  .notifictions li:nth-child(even) h5 a {
    color:var(--blue01);
  }
  .notifictions li:last-child{margin: 0; padding: 0; border:none}
  .notifictions a.delete {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #cacbd1;
  }
  
  
  .noti-text {
    display: flex;
    gap: 10px;
    flex-direction: column;
    flex-grow: 1;
  }
  
  .noti-text h5 {
    margin: 0;
    font-size: 18px;font-weight: 400;
  }
  .noti-text p {
    margin: 0;
    color: var(--light-grey03);
    font-size: 16px;
  }
  .noti-text span {
    color: var(--light-grey03);
  }
  .font-10 {
    font-size: 10px;
  }

  .min-w40 {
    min-width: 40px;
  }

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

  .UsrCmt{
    max-height: 250px;
    overflow: hidden;
    overflow-y: auto;
    margin-top: 5%;
  }

  .posters-timelineimg h2{
    font-size: 24px;
  }
  
    @media screen and (max-width:680px) {
      #masthead {
        background: #6b6b6b;}
    }

   .BlackClr{
    color: black;
  }

  .profile-pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.postCmt{background: none !important;border: none;}

/*New css on may 26*/

.story-container .overlay {
    width: 100%;
}
.slidingDiv {
    white-space: nowrap;
}
@media screen and (max-width:680px) {
    #pills-tab {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    #pills-tab li, #pills-tab li a,#pills-tab li button {
      width: 100%;
      display: flex;
      text-align: center;
      justify-content: center;
    }
    .story-container .overlay {
    width: 100%;
    }
    
    #slidingDiv {
      left: 0 !important;
      transform: translateX(0px) !important;
      min-width: 321px;
    }
    /*.play-pause-btn {*/
    /*    display: none !important;*/
    /*}*/
}

@media screen and (max-width:768px) {
    .msg-head .flex-shrink-0 img{width:100%!important; height:100%!important;object-fit:cover}
}

@media screen and (max-width:680px) {
.posters-timelineimg {overflow: hidden;height: fit-content;display: flex;width: 100%;justify-content: center;}
.poster-timeline-content {height: fit-content;position: relative !important;background: #fff;}
.posters-timelineimg h2 {
	color: #000 !important;
}
}

.carousel-inner img, .carousel-inner video {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	aspect-ratio: 16/9;
	object-position: top;
}
.carousel-inner img {
	object-fit: contain;
}

.carousel-control-next, .carousel-control-prev {
    background-color: rgba(0,0,0,0.75);
	width: 36px;
	height: 36px;
	top: 50%;
	transform: translateY(-50%);
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 1rem;
    height: 1rem;
}

.btn-new-close {
	right: 0;
	top: 0;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1002;
	/*background-color: #fff;*/
	border-radius: 0;
	opacity: 1;
}

@media screen and (max-width: 680px) {
    .sm-header-views {width: 100%;justify-content: space-between;}
    #masthead {padding: 10px 0!important;}
    .top-2 {position: relative;top: 1px;}
    
/*    .message-ico a, .noti-ico a, .menu-ico a, .profile-pic {*/
/*	min-width: 40px;*/
/*	max-width: 40px;*/
/*	height: 40px;*/
/*}*/


}

.round {
	min-width: 36px;
	max-width: 36px;
}

#offcanvasExample {
	max-width: 320px!important;
	width:320px!important;
}

/*#slidingCmtDiv1 {*/
/*	display: none !important;*/
/*}*/

.online-dot { display: flex; width: 8px; height: 8px; border-radius: 50%; border: 1px solid #fff; background: #80ed30; min-width: 8px; max-width: 8px; } 
.online-members 
{ 
    border-radius: 5px;
	position: fixed;
	right: 1rem;
	bottom: 0rem;
	z-index: 10001;
	width: 319px;

}


@media screen and (max-width: 992px) {
    .online-members 
    { 
    	width: fit-content;
    }
}

/*newly added notification dropdown*/

.notification-list {
  padding: 0rem;
  background: #fff;
  border-radius: 0 0px 15px 15px;
  position: absolute;
  right: 0;
  top: 55px;
  max-width: 380px;
  width: 380px;
  list-style: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.noti-ico:hover .notification-list {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.notification-list li {
  display: flex;
  /*! justify-content: space-between; */
  /*! gap: 1rem; */
  border-bottom: 1px solid #E4E3FF;
  /*! align-items: center; */
  padding: .75rem 1rem;
}
.noti-highlits {
  min-width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3279ea;
  display: flex;
}
.noti-users {
  border-radius: 50%;
  overflow: hidden;
  max-width: 40px;
  min-width: 40px;
  height: 40px;
  background: #ddd;
}
.noti-users img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.notification-list li {color:#000; font-size:13px;} 
.notification-list li span.text-mute{color:#9fa4aa!important; font-size:11px}

.notification-list li a {
  width: auto !important;
  background: none !important;
  height: fit-content !important;
  padding: 0 !important;
  /*! text-align: center; */
  display: flex;
  width: 100% !important;
  justify-content: center !important;
}

.story-icon {
  /*right: 10px;*/
  /*bottom: 80px;*/
  display: flex;
  /*flex-direction: column;*/
  flex-direction: row;
  gap: 10px;
}

.story-icon .story-icon-inside {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size : 12px;
  flex-direction : column;
  gap: 5px;
}

.story-icon .story-icon-inside a {
  background: rgba(255,255,255,0.75);
  padding: 0rem;
  min-width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

@media screen and (max-width: 1366px) {
    .notification_page {
        overflow-x: auto;
    }
}

@media screen and (max-width: 680px) {
.chat-area {
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.notification_page {
    overflow-x: auto;
}
.notification_page ul.justify-content-end {
	justify-content: flex-start !important;
}
/*.chatlist {*/
/*  height: 300px;*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  overflow: hidden;*/
/*  order: 1;*/
/*  border-bottom : 1px solid #ddd;*/
/*}*/
.chatbox {
  position: relative;
  left: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: none;
  order: 2;
}

.chatlist {
  display: none !important;
}
.notification-list {
	display: none;
}
.smcommentcount{
    width: 100%;
    text-align: center;
}

.round{
    margin:0 auto;
    
}
.menu-ico a,.profile-pic,.noti-ico a,.message-ico a{width:36px; min-width:36px; max-width:36px; height:36px;}
}
#navbarDropdown::after {
	display: none;
}
.nav-brand2 {
	min-width: 70px;
	max-width: 70px;
	width: 70px;
}
.body-bg.modal-open {
	padding-right: 0 !important;
}
.profile-menu .dropdown-menu li {
  border-bottom: 1px solid #ddd;
}
.profile-menu .dropdown-menu li:last-child {
  border-bottom: 0px solid #ddd;
}
.chat-list h3 {font-size: 15px;}
.chat-list p{font-size:12px;}
.round.disabled a {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

.EmotionCmtImg.disabled {
  pointer-events: none;    /* disable clicking */
  opacity: 0.6;            /* visual “disabled” cue */
  cursor: default;         /* not a pointer anymore */
}

@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
.blink{
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}

.story-icon-inside.disabled a,
.story-icon-inside.disabled img {
    pointer-events: none;    /* disables clicks */
    opacity: 0.5;
    cursor: not-allowed;
}

#offcanvasExample-chat {
    display: none;
}

@media screen and (max-width: 992px) {
    #offcanvasExample-chat {
        display: flex;
        width: 320px;
    }
}

.chat-list.friend-item1 {
	position: relative;
}

.chat-list.active {
    bottom: 3px !important;
}

.small-screensimg a {
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;height:240px;display:block;
}

.small-screensimg a video, .small-screensimg a img {
    overflow: hidden;
    aspect-ratio: 16/9;
    height: 100% !important;
    width:  100% !important;
    position:absolute;left:0;top:0;
}
.owl-stage {
    display: flex;
}

.owl-carousel,
.owl-stage-outer,
.owl-stage,
.owl-item {
  width: 100% !important;
}

.owl-carousel .item {
  width: 100% !important;
  box-sizing: border-box;
}

@media (min-width: 1367px) {
.peoples-content a {font-size: 14px;}
.my-links-card .btn {font-size: 14px !important;}
}
@media (max-width: 1366px) {
.peoples-content a {font-size: 11px;}
.my-links-card .btn {font-size: 12px !important;}
}
@media (max-width: 1024px) {
.peoples-content a {font-size: 14px;}
.my-links-card .btn {font-size: 14px !important;}
}


.online-members {
  border-radius: 5px;
  position: fixed;
  right: 1rem;
  bottom: 0rem;
  z-index: 10001;
  width: 319px;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Style for minimized button */
.online-members.minimized {
  width: 60px;
  padding: 10px;
  justify-content: center;
  border-radius: 50px;
}

/* Hide text when minimized */
.online-members.minimized span.online-dot + * {
  display: none;
}

/* Dot indicator */
.online-dot {
  width: 10px;
  height: 10px;
  background: #00ff00;
  border-radius: 50%;
  display: inline-block;
}

.online-members.minimized aside {
  display: none;
}

@media screen and (max-width:680px) {

.noti-texts .noti-description{
  /* display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; */
  overflow: hidden;
  max-width: 200px;
  max-width: 200px;
  white-space: normal;
}
}

.noti-table td, .noti-table th{
  vertical-align: top !important;
}