/* Noto Sans Khmer */
@font-face {
  font-family: "Noto Sans Khmer";
  src: url("../fonts/Noto_Sans_Khmer/static/NotoSansKhmer-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Noto Sans Khmer";
  src: url("../fonts/Noto_Sans_Khmer/static/NotoSansKhmer-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}


/* Poppins */
@font-face {

  font-family: "Poppins";
  src: url("../fonts/Poppins/Poppins-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins/Poppins-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}

:root {

  --primary-color: #4CAF50;
  --secondary-color: #81C784;
  --white-color: #FFFFFF;
  --warning-color: #FFB300;
  --light-color: #F5F5F5;
  --dark-color: #616161;
  --info-color: #42A5F5;
  --danger-color: #8D6E63;
  --success-color: #66BB6A;
  --muted-color: #9E9E9E;
  --background-color: #FAFAFA;
  --border-color: #E0E0E0;
  --text-color: #212121;
  --bs-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  --border-radius: 6px;
  --bs-color-grey: rgba(0, 0, 0, 0.16);
  --font-poppin: "Poppins", sans-serif;
  --bd-violet-bg: #4caf50 !important;
  --bg-body: rgb(243, 244, 244);

}

.test {
  background-color: #ececec;
  --primary-color: #4caf50;
  --secondary-color: #81c784;
  --white-color: #ffffff;
  --warning-color: #ffb300;
  --light-color: #f5f5f5;
  --dark-color: #616161;
  --info-color: #42a5f5;
  --danger-color: #8d6e63;
  --success-color: #66bb6a;
  --muted-color: #9e9e9e;
  --background-color: #fafafa;
  --border-color: #e0e0e0;
  --black-color: #000;
  --bs-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  --border-radius: 6px;
  --bs-color-grey: rgba(0, 0, 0, 0.16);
  --font-poppin: "Poppins", sans-serif;
  --bd-violet-bg: #4caf50 !important;
  --bg-body: rgb(243, 244, 244);
  --bg-story: #292831;

}

* {
  font-family: "Poppins", sans-serif, "Noto Sans Khmer", sans-serif;
}

body {
  background: var(--bg-body);
}

.bg-body {
  background-color: var(--bg-body) !important;
}

.hover-link:hover {
  text-decoration: var(--primary-color);
}

.border-color {
  border-color: var(--border-color);
}

.fs-7 {
  font-size: 14px;
}

.fs-8 {
  font-size: 12px;
}

/* 
body:lang(km) {
  font-family: ;
} */

.hero-login-signup {
  height: 100vh;
  display: flex;
  align-items: center;
  margin-top: 0;
}

.a-custom {
  text-decoration: none;
}

.a-custom:hover {
  text-decoration: underline;
}

/*customized form-control   */
.form-control {
  padding: 10px 12px !important;
  color: var(--dark-color) !important;
  font-size: 15px !important;
  border: 1px solid var(--bs-color-grey) !important;
}

/*  custom placeholder */
.form-control::placeholder {
  color: var(--border-color);
}

/*  custom when focus oon form-control */

.form-control:focus {
  box-shadow: none;
  box-shadow: none;
  border: 1px solid var(--primary-color) !important;
  color: var(--dark-color);
}

.form-select {
  padding: 10px 12px !important;
  color: var(--dark-color) !important;
  font-size: 15px !important;
  border: 1px solid var(--bs-color-grey) !important;
  box-shadow: none !important;
}

/* custom form select */
main .row .col-9 .card .card-body .form-select {
  color: var(--dark-color);
  border: 1px solid var(--bs-color-grey);
  font-size: 15px !important;
}

main .row .col-9 .card .card-body .form-select:focus {
  box-shadow: none;
  box-shadow: none;
  border: 1px solid var(--bs-color-grey);
  color: var(--dark-color);
}

/*  custom radio button */
.form-check-custom input[type="radio"] {
  display: none;
}

.form-check-custom label {
  position: relative !important;
  color: var(--dark-color) !important;
  font-family: "Poppins", sans-serif !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  /* Adjust gap */
  border: 1px solid var(--border-color) !important;
  /* Adjust border width */
  padding: 10px 12px !important;
  border-radius: var(--border-radius) !important;
  /* Adjust border radius */
  font-size: 14px !important;
  /* Adjust font size */
  width: 100%;
}

.form-check-custom label:before {
  content: "";
  min-height: 16px !important;
  min-width: 16px !important;
  border: 1px solid var(--border-color) !important;
  /* Adjust border width */
  border-radius: 50% !important;
}

.form-check-custom input[type="radio"]:checked+label:before {
  min-height: 16px !important;
  min-width: 16px !important;
  border: 5px solid white !important;
  background-color: var(--primary-color) !important;
}

.form-check-custom input[type="radio"]:checked+label {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
}

.form-check-custom input[type="radio"]:checked+label:before {
  height: 16px !important;
  width: 16px !important;
  border: 5px solid white !important;
  background-color: var(--primary-color) !important;
}

.form-check-custom input[type="radio"]:checked+label {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
}

.from-check-input {
  color: var(--primary-color) !important;
}



.form-check-input:focus {
  border-color: var(--secondary-color);
  outline: 0;
  box-shadow: none;
}

.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/*  custom form-label */
.form-label {
  color: var(--dark-color);
  font-size: 14px;
}

/* custom form-label with form-control */
.input-field {
  position: relative;
}

.input-field label {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  font-size: 14px;
  padding: 0 5px;
  pointer-events: none;
  transition: 0.5s;
  background: var(--white-color);
  color: var(--dark-color);
}

.input-field input:focus~label,
.input-field input:not(:placeholder-shown)~label {
  top: 0;
  font-size: 13px !important;
  background: var(--white-color) !important;
  color: var(--primary-color) !important;
}

.input-field select:focus~label,
.input-field select:not(:placeholder-shown)~label {
  top: 0;
  font-size: 13px !important;
  background: var(--white-color) !important;
  color: var(--primary-color) !important;
  z-index: 1000;
}

.select-label {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  font-size: 14px;
  padding: 0 5px;
  pointer-events: none;
  transition: 0.5s;
  background: var(--white-color);
  color: var(--dark-color);
}

/* custom form-label with form-control */
.text-area-field {
  position: relative;
}

.text-area-field label {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  font-size: 14px;
  padding: 0 5px;
  pointer-events: none;
  transition: 0.5s;
  background: var(--white-color);
  color: var(--dark-color);
}

.text-area-field textarea:focus~label,
.text-area-field textarea:not(:placeholder-shown)~label {
  top: 0;
  font-size: 13px !important;
  background: var(--white-color) !important;
  color: var(--primary-color) !important;
}

.input-field select:focus~label,
.input-field select:not(:placeholder-shown)~label {
  top: 0;
  font-size: 13px !important;
  background: var(--white-color) !important;
  color: var(--primary-color) !important;
}



/* Password toggle icon */
.togglePassword {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--dark-color);
}

.input-field input:focus~.togglePassword {
  color: var(--primary-color);
}
/*Custom-link */
.custom-link:hover {
  color: var(--primary-color) !important;
  text-decoration: underline;
  text-decoration-color: var(--primary-color);
}
/* Btn-hover-nav */
.btn-hover-link{
  
}
/*  form label */

.form-shadow {
  box-shadow: var(--bs-shadow);
}

.custom-shadow {
  box-shadow: var(--bs-shadow);
}

.custom-link:hover {
  color: var(--primary-color) !important;
  text-decoration: underline;
  text-decoration-color: var(--primary-color);
}

/*  style logo in login form  */
.login-logo {
  width: 60px;
  height: 60px;
}

.login-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.input-icon {
  position: relative;
}

.input-icon select {
  padding-left: 30px;
}

.input-icon .bi {
  position: absolute !important;
  right: 25px;
  top: 45%;

  pointer-events: none;
  z-index: 1000;
}

/* =======otp style====== */
.otp .col-3 input {
  height: 60px;
}

.otp .col-3 input[type="number"]::-webkit-inner-spin-button,
.otp .col-3 input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
}

.otp>.col-3>.form-control:focus {
  box-shadow: none;
  border: 2px solid var(--primary-color) !important;
}

.hover-text-decoration-underline:hover {
  text-decoration: underline !important;
}



/* ============================> Responsive <======================================= */


/* sm */
@media (max-width: 575.98px) {
  .card-body>.otp>.col-3 input {
    height: 40px;
  }

  .form-shadow {
    box-shadow: none;
  }

}

/* ===video=== */
#player {
  box-sizing: border-box;
}


/* md */
.pt-10 {
  padding-top: 300px;
}

/* modal */









.link-form {
  font-size: 16px;
  color: var(--dark-color);
}

.link-form a {
  font-size: 16px;
  font-weight: 500;
}

/* text-size-evrnt*/
.text-size-event {
  font-size: 13px;
}

/*  customized  text-grey*/


/*  customized  input-search style border-radius 25px*/
.input-group-search {
  border: none;
  border-radius: 25px;
  background-color: var(--bg-body);
  font-size: 14px;
}

.input-group-search .input-group-text {
  border: none;
  color: var(--dark-color);
  font-weight: bold;
  font-size: 16px;
  padding: 0px initial;
  background-color: transparent;
  cursor: pointer;
}

.input-group-search .form-control {
  background-color: transparent !important;
  border: none !important;
  padding: 10px 12px;
  padding-left: 0 !important;
}

.input-group-search .form-control::placeholder {
  color: var(--dark-color);
}

.input-group-search .form-control:focus {
  box-shadow: none;
}

/*  custom navbar */
.navbar {
  box-shadow: var(--bs-shadow);
}

.navbar .navbar-brand {
  width: 50px;
  /* height: 60px; */
  /* background-color: red; */
  margin-right: 90px;
  padding: 16px auto;
}

.navbar .navbar-brand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.navbar .navbar-brand-outside-index {
  margin-right: 0px;
}

.navbar form .input-group {
  border: none;
  border-radius: 25px;
  background-color: var(--bg-body);
}

.navbar form .input-group .input-group-text {
  border: none;
  color: var(--dark-color);
  font-weight: bold;
  font-size: 16px;
  background-color: transparent;
}

.navbar form .input-group .form-control {
  width: 300px;
}

.custom-tooltip {
  --bs-tooltip-bg: var(--bd-violet-bg) !important;
  --bs-tooltip-color: var(--white-color) !important;
  font-size: 14px !important;
}

.navbar .navbar-nav .nav-item .nav-link {
  width: 42px;
  height: 42px;
  font-size: 22px;
  background-color: var(--bg-body);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--primary-color);
}

.navbar .navbar-list {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.navbar .navbar-list .nav-item .nav-link {
  width: 40px;
  height: 40px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--primary-color);
  font-weight: bold;
  cursor: pointer;
}

.navbar .navbar-nav .nav-item .nav-link.active {
  background-color: var(--primary-color);
  color: var(--white-color);
  border-radius: 50%;
}

.navbar .navbar-nav .nav-item:not(:last-child) .nav-link:hover i {
  transform: scale(90%);
  transition: 0.4s ease-in-out;
}

.navbar .navbar-list .nav-item .nav-link img {
  width: 100%;
  height: 100%;
  background-color: red;
  object-fit: cover;
  border-radius: 50%;
}

.navbar .navbar-list .nav-item .nav-link.dropdown-toggle::after {
  display: none;
}

.navbar .navbar-list .nav-item .dropdown-menu {
  left: -154px;
  border: 1px solid var(--border-color);
  font-size: 14px;
  margin-top: 24px;
}

.navbar .navbar-list .nav-item .dropdown-menu .dropdown-item {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--primary-color);
  font-size: 16px;
}

.dropdown-menu .dropdown-item:active {
  background-color: var(--bg-body) !important;
  color: var(--black-color);
}

.navbar .navbar-list .nav-item .dropdown-menu .dropdown-item img {
  width: 35px;
  height: 35px;
  object-fit: cover;
  border-radius: 50%;
}

.navbar .nav-link.qty-chat {
  position: relative;
}

.navbar .nav-link.qty-chat span {
  position: absolute;
  top: 0px;
  right: 0;
  background: var(--primary-color);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 12px;
  color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
}

.nav-link.qty-chat.qty-chat-sm span {
  top: -2px;
  right: 2px;
  width: 20px;
  height: 20px;
}

.nav-link.qty-notification {
  position: relative;
}

.nav-link.qty-notification span {
  position: absolute;
  top: 0px;
  right: 4px;
  background: var(--primary-color);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 12px;
  color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
}

.nav-link.qty-notification.qty-notification-sm span {
  top: -2px;
  right: 2px;
  width: 20px;
  height: 20px;
}

.navbar-mobile {
  box-shadow: var(--bs-shadow);
}

.navbar-mobile ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style-type: none;
  padding: 0;
  margin-bottom: 0px;
}

.navbar-mobile ul .nav-item .nav-link {
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 6px 0px;
  color: var(--primary-color);
}

.navbar-mobile ul .nav-item .nav-link span.active+span:last-child {
  margin-top: 35px;
}

.navbar-mobile ul .nav-item .nav-link span.active {
  position: absolute;
  top: -10px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: var(--white-color);
  color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 6px solid var(--bg-body);
}

.navbar-mobile ul .nav-item .nav-link span i {
  font-size: 24px;
  color: var(--primary-color);
}

.navbar-mobile ul .nav-item .nav-link img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

/*  custom main  */
.custom-main {
  margin-top: 70px;
}

main {
  margin-top: 67px;
}

/*  custom friend-page  */
.friend-page ul .sidebar-item .sidebar-link img {
  border-radius: 0px !important;

}

.friend-page  .card-main .card-friend .card-body .card-img{
  width: 100%;
  height: 200px;
  border-radius: var(--border-radius);
 overflow: hidden;
}

.friend-page  .card-main .card-friend .card-body .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
/* custom event page */
.event-pag  .card-img{
  width: 100%;
  height: 200px;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.friend-page .card-main .card-friend .card-body .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* custom event page */
.event-page .card-your-event .card-img {
  width: 100%;
  height: 200px;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.event-page .card-your-event .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-page .card-other-event .card-img {
  height: 300px;
}

.event-page .card-other-event .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-page .card-your-event .desc-event {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* custom save page */
.save-page .card-main .card-save .img-profile {
  width: 35px;
  height: 35px;
  overflow: hidden;
  object-fit: cover;

  border-radius: 50%;
}

.save-page .card-main .card-save .desc-save{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.save-page .card-main .card-save  .card-img{
  width: 100%;
  height:157.5px;
  border-radius: var(--border-radius);
  overflow: hidden;
  background-color: var(--bg-body);
  display: block;
}

.save-page .card-main .card-save  .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}
.save-page .card-main .card-save .desc-custom-save {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.9;
}

/*  custom page save detial */

/* .page-product-detail  textarea {
  resize: none;
  font-size: 18px;
  min-height: 300px;
} */
.save-detail-page .card-leftbar .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
}


.save-detail-page .card-leftbar .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius) !important;
  background-color: var(--bg-body);
}

.save-detail-page .card-leftbar .swiper {
  width: 100%;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
}

.save-detail-page .card-leftbar .btn-back{
  width: 45px;
  height: 45px;
  border-top-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  background-color:var(--white-color);
  color: var(--primary-color);
  font-size: 24px;
  font-weight: bold;
  left : 0px;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
 
}


.save-detail-page .card-leftbar .mySwiper2 {
  height: 396px;
  width: 100%;
}


.save-detail-page .card-leftbar .mySwiper {
  height: 20%;
  box-sizing: border-box;
  padding: 16px 0;
  padding-bottom: 0px !important;
}
/* swiper-button-next:after, .swiper-button-prev:after  */
.save-detail-page .card-leftbar .swiper-button-next,
.swiper-button-prev {
  background: var(--white-color);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
}
.save-detail-page .card-leftbar .swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
}

.save-detail-page .card-leftbar .mySwiper .swiper-slide {
  width: 25%;
  height: 80px;
  opacity: 0.4;
}

.save-detail-page .card-leftbar .mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}

.save-detail-page .card-leftbar .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.save-detail-page .card-main textarea {
  resize: none;
  font-size: 18px;
  min-height: 160px;
}
.market-page .modal-item-sale  .card-map {
    height: 240px;
    width: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
}
.market-page .modal-item-sale  .card-map  iframe {
  width: 100%;
  height: 100%;
}
.save-detail-page .card-main  .card-map iframe{
   width: 100%;
   height: 310px;
   border-radius: var(--border-radius);
}
.save-detail-page .card-leftbar .card-img {
  width: 100%;
  height: 240px;
  border-radius: var(--border-radius);
  overflow: hidden;
  background-color: var(--bg-body);
}

.save-detail-page .card-leftbar .card-product .card-body .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.save-detail-page .card-leftbar .card-product .card-body .desc-product {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.save-detail-page  .card-main .img-profile {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     overflow: hidden;
}
.save-detail-page  .card-main .img-profile  img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*  end of save-detail */










/* end of custom modal  */

/* Popup container - can be anything */
.popup-search {
  position: absolute !important;
  top: 67px;
  right: 0px;
  width: 338px;
  max-height: 470px;
  overflow: hidden;
  color: white;
  box-shadow: var(--bs-shadow);
  border-radius: 8px;
  z-index: 1000;
}

.custom-search {
  left: 335px;
}

.popup-search.hidden {
  display: none;
}

.visible {
  display: block;
}

/* custom img-profile */
.popup-content .custom-img-profile {
  position: relative;
}

.popup-content .custom-img-profile .active::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--primary-color);
  position: absolute;
  bottom: 3px;
  right: 0px;
}

.popup-content .custom-img-profile .img-profile-search {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 50%;
}

/*  custom scroll bar  */

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background-color: var(--bg-body);
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--dark-color);
}

/*  custom notification popup */
.popup-notification {
  position: fixed;
  top: 67px;
  right: 16px;
  max-width: 350px;
  color: white;
  box-shadow: var(--bs-shadow);
  border-radius: 8px;
  height: auto;
  z-index: 2000 !important;
  overflow: auto;
  background-color: var(--primary-color) !important;
  max-height: 442px;
}

.popup-notification.hidden {
  display: none;
}

.visible {
  display: block;
}

/*  custom popup notificatin*/
.popup-notification .custom-img-profile-search {
  position: relative;
}

/*  custom popup date  */

/*  custom chatPopup */

.popup-chat {
  position: fixed;
  top: 67px;
  right: 16px;
  max-width: 350px;
  color: white;
  box-shadow: var(--bs-shadow);
  border-radius: 8px;
  z-index: 1000;
  overflow: hidden;
}

.popup-chat .dropdown-option-chat {
  width: 312px;
}

.popup-chat.hidden {
  display: none;
}

.visible {
  display: block;
  opacity: 1;
}

/*  custom popup notificatin*/
.popup-chat .popup-content .card .card-body {
  max-height: 365px !important;
  overflow: auto !important;
}

.popup-chat .custom-img-profile-search {
  position: relative;
}

.popup-chat .custom-img-profile-search.active::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--primary-color);
  position: absolute;
  bottom: 3px;
  right: 0px;
}

.popup-chat .custom-img-profile-search .img-profile-search {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 50%;
}

.popup-chat .swiper {
  width: 100%;
  height: auto;
}

.popup-chat .swiper .swiper-slide {
  position: relative;
  margin-right: 0px !important;
  cursor: pointer;
}

.popup-chat .swiper .swiper-slide .icon-add-story {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  bottom: 40px;
  color: white;
}

.popup-chat .swiper .swiper-slide img {
  height: 55px;
  width: 55px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-color);
}

/* Custom styles for the right navigation button */
.popup-chat .swiper-button-next {
  background-color: #007bff;
  /* Example background color */
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  right: 10px;
  display: none;
}

.popup-chat .swiper-button-next:after {
  content: "▶";
  /* Right arrow symbol */
  font-size: 20px;
}

.popup-chat .swiper-button-prev {
  display: none;
  /* Hide the left arrow */
}

/*  userChatPopup */
.popup-user-chat {
  position: fixed;
  top: 67px;
  right: 380px;
  width: 350px;
  color: white;
  box-shadow: var(--bs-shadow);
  border-radius: 8px;
  z-index: 1000;
}

.custom-user-chat-popup {
  right: 320px;
}

.custom-user-chat-popup-page-video {
  right: 425px;
}

.popup-user-chat.hidden {
  display: none;
}

.visible {
  display: block;
  opacity: 1;
}

.popup-user-chat .card .card-header .img-profile-chat {
  width: 35px;
  height: 35px;
  object-fit: cover;
  border-radius: 50%;
}

.popup-user-chat .popup-content .card .card-body {
  height: 328px !important;
  overflow: auto;
}

.popup-user-chat .card .card-body .row .chat-box-message {
  display: flex;
}

.popup-user-chat .card .card-body .row .chat-box-message:nth-child(even) {
  flex-direction: row-reverse;
}

.popup-user-chat .card .card-body .row .chat-box-message span:nth-child(1) p {
  display: flex;
  width: 200px;
}

.popup-user-chat .card .card-body .row .chat-box-message:nth-child(even) span:nth-child(1) img {
  display: none !important;
}

.popup-user-chat .card .card-body .row .chat-box-message:nth-child(odd) span:nth-child(1) p {
  background-color: var(--primary-color) !important;
}

.popup-user-chat .card .card-body .row .chat-box-message:nth-child(even) span:nth-child(1) p {
  background-color: var(--secondary-color) !important;
}

.popup-user-chat .card .card-body .row .chat-box-message span .img-profile-chat-box {
  width: 25px;
  height: 25px;
  object-fit: cover;
  border-radius: 50%;
}

.popup-user-chat .card .card-body .row .chat-box-message span p {
  border-radius: var(--border-radius);
}

.popup-user-chat .card .card-body .row .chat-box-message .react-chat {
  display: none;
}

.popup-user-chat .card .card-body .row .chat-box-message:hover .react-chat {
  display: flex;
}

.popup-user-chat .card .card-body .row .chat-box-message:hover .react-chat i {
  cursor: pointer;
}

.popup-user-chat .popup-content .card .card-footer .input-group {
  max-width: 240px;
  padding: 0px 12px;
  padding-right: 0px;
}

/*  popup user chat second  */
.popup-user-chat-second {
  position: fixed;
  top: 75px;
  right: 320px;
  width: 350px;
  color: white;
  box-shadow: var(--bs-shadow);
  border-radius: 8px;
  z-index: 3000;
}

.popup-user-chat-second.hidden {
  display: none;
}
/* h-img-profile */
.h-img-pf{
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.h-vd-pf{
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.visible {
  display: block;
  opacity: 1;
}

.popup-user-chat-second .card .card-header .profile-chat img {
  width: 35px;
  height: 35px;
}

.popup-user-chat-second .popup-content .card .card-body {
  max-height: 350px !important;
  overflow: auto;
}

.popup-user-chat-second .card .card-body .row .chat-box-message {
  display: flex;
}

.popup-user-chat-second .card .card-body .row .chat-box-message:nth-child(even) {
  flex-direction: row-reverse;
}

.popup-user-chat-second .card .card-body .row .chat-box-message span:nth-child(1) p {
  display: flex;
  width: 200px;
}

.popup-user-chat-second .card .card-body .row .chat-box-message:nth-child(even) span:nth-child(1) img {
  display: none !important;
}

.popup-user-chat-second .card .card-body .row .chat-box-message:nth-child(odd) span:nth-child(1) p {
  background-color: var(--primary-color) !important;
}

.popup-user-chat-second .card .card-body .row .chat-box-message:nth-child(even) span:nth-child(1) p {
  background-color: var(--secondary-color) !important;
}

.popup-user-chat-second .card .card-body .row .chat-box-message span .img-profile-chat-box {
  width: 25px;
  height: 25px;
  object-fit: cover;
  border-radius: 50%;
}

.popup-user-chat-second .card .card-body .row .chat-box-message span p {
  border-radius: var(--border-radius);
}

.popup-user-chat-second .card .card-body .row .chat-box-message .react-chat {
  display: none;
}

.popup-user-chat-second .card .card-body .row .chat-box-message:hover .react-chat {
  display: flex;
}

.popup-user-chat-second .card .card-body .row .chat-box-message:hover .react-chat i {
  cursor: pointer;
}

.popup-user-chat-second .popup-content .card .card-footer .input-group {
  max-width: 240px;
  padding: 0px 12px;
  padding-right: 0px;
}

/*  popup-option poster */

/*  custom search in mobile  */

.modal-search .form-control {
  padding: 6px 12px !important;
  border-radius: 25px !important;
  background-color: var(--bg-body) !important;
  border: none !important;
}

.modal-search .form-control::placeholder {
  color: var(--dark-color) !important;
}

.modal-search .custom-img-profile {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
}

.modal-search .custom-img-profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Custom styles for the search modal */
.modal-search {
  max-height: 100%;
  overflow-y: auto;
}

.search-suggestions {
  list-style: none;
  padding: 0;
}

.search-suggestions li {
  padding: 10px;
  cursor: pointer;
}

.search-suggestions li:hover {
  background-color: #f1f1f1;
}

/*  custom style of chat  */
.chat-app .left-bar {
  height: calc(100vh - 67px);
  border-top-left-radius: var(--border-radius) !important;
  box-shadow: var(--bs-shadow);

}



.chat-app .left-bar .card-body {
  overflow: auto;
}

.chat-app .left-bar .input-group-search {
  padding: 0px 12px;
  padding-right: 0px;
  background-color: var(--bg-body);
}

.chat-app .left-bar .card-body .img-profile {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 50%;
}



.chat-app .left-bar .swiper {
  width: 100%;
  height: auto;
}

.card-rightbar .swiper .swiper-slide {
  position: relative;
  margin-right: 0px !important;
  cursor: pointer;
}

.chat-app .left-bar .swiper .swiper-slide .icon-add-story {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  bottom: 40px;
  color: white;
}

.chat-app .left-bar .swiper .swiper-slide img {
  height: 55px;
  width: 55px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-color);
}

/* Custom styles for the right navigation button */
.chat-app .left-bar .swiper-button-next {
  background-color: #007bff;
  /* Example background color */
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  right: 10px;
  display: none;
}

.chat-app .left-bar .swiper-button-next:after {
  content: "▶";
  /* Right arrow symbol */
  font-size: 20px;
}

.chat-app .left-bar .swiper-button-prev {
  display: none;
  /* Hide the left arrow */
}

.chat-app .left-bar .card-contact-chat .card-body .img-profile {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 50%;
}



.custom-pointer {
  cursor: pointer;
}

/*  main content  */
.chat-app .main-content {
  height: calc(100vh - 67px);
  box-shadow: var(--bs-shadow);
}

.browseFileBtn {
  cursor: pointer !important;
}

.chat-app .main-content .card-header {
  box-shadow: var(--bs-shadow);
  border-radius: none !important;
}

.chat-app .main-content .profile-img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-app .main-content .card-body .message-container .messages {
  max-width: 260px;
}

.chat-app .main-content .card-body .message-container .messages .message-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.chat-app .main-content .card-body .message-container .img-profile {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}

.chat-app .main-content .card-body .message-container .img-profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-app .main-content .card-body .message-container .react-icon {
  display: none;
}

.chat-app .main-content .card-body .message-container:hover .react-icon {
  display: flex;
  gap: 6px;
}

.chat-app .main-content .card-body .message-container .react-icon i {
  cursor: pointer;
}

.chat-app .main-content .card-body {
  overflow: auto;
  max-height: 100%;
  padding-bottom: 90px;
}

.chat-app .main-content .card-footer {
  box-shadow: var(--bs-shadow);
}

.chat-app .main-content .card-footer .input-group {
  padding: 6px 12px;
}

.chat-app .main-content .card-footer .input-group .input-group-text {
  padding: 0px;
  font-size: 16px;
}

.typing-indicator {
  display: flex;
  align-items: center;
  background-color: var(--bg-body);
  padding: 8px;
  border-radius: var(--border-radius);
}

.dot {
  width: 8px;
  height: 8px;
  background-color: var(--primary-color);
  border-radius: 50%;
  margin-right: 5px;
  animation: typing 1.4s infinite ease-in-out;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {

  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

/* right bar  chat*/
.chat-app .right-bar {
  height: calc(100vh - 67px);
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
}

.chat-app .right-bar .img-profile {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 50%;
}

.chat-app .right-bar .card-media .card-body .img-media {
  width: 100%;
  height: 60px;
}

.chat-app .right-bar .card-media .card-body .img-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* card-left bar all page */
.card-leftbar {
  /* position: absolute;  */
  height: calc(100vh - 70px) !important;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  box-shadow: var(--bs-shadow);
}

.card-leftbar .card-body ul .sidebar-item .sidebar-link {
  font-size: 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  /* color: var(--primary-color); */
  color: var(--black-color);
}

.card-leftbar .card-body ul .sidebar-item .sidebar-link i {
  font-size: 20px;
  margin-right: 5px;
}

.card-leftbar .card-body ul .sidebar-item .sidebar-link img {
  width: 25px;
  height: 25px;
  object-fit: cover;
  border-radius: 50%;
}

.card-leftbar .card-body ul .sidebar-item .sidebar-link.active {
  background: var(--bg-body);
  border-radius: var(--border-radius);
}

.card-leftbar .card-body ul .sidebar-item:not(:nth-child(1)) .sidebar-link:hover {
  background-color: var(--bg-body);
  border-radius: var(--border-radius);
}



.card-main {
  /* position: absolute;  */
  height: calc(100vh - 70px) !important;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  padding-bottom: 20px;
}

.crad-img-contan {
  height: auto !important;
}

.card-main .card-body .card-state .input-group {
  padding-left: 12px;
  cursor: pointer;
}

.card-main .card-body .card-state .input-group .form-control {
  cursor: pointer;
}

.card-main .card-body .card-state .card-body .img-profile {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
}

.card-main .card-body .card-poster .card-body .img-profile {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 50%;
}

.card-main .card-body .card-poster .card-body .img-poster {
  width: 100%;
  height: 240px;
}

.card-main .card-body .card-poster .card-body .img-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-main .card-body .card-poster .card-body .img-poster span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-body);
}

.placeholder-glow .placeholder {
  background-color: var(--border-color) !important;
}

@keyframes placeholder-glow {
  50% {
    opacity: 0.8;
  }
}

.card-main .card-body .card-poster .card-body .react-viewer {
  width: 25px;
  height: 25px;
  overflow: hidden;
  position: absolute;
  border-radius: 50%;
  left: 0;
}

.card-main .card-body .card-poster .card-body .react-viewer:last-child {
  font-size: 10px;
  color: var(--white-color);
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  left: 60px;
}

.card-main .card-body .card-poster .card-body .react-viewer:nth-child(1) {
  left: 0px;
}

.card-main .card-body .card-poster .card-body .react-viewer:nth-child(2) {
  left: 15px;
}

.card-main .card-body .card-poster .card-body .react-viewer:nth-child(3) {
  left: 30px;
}

.card-main .card-body .card-poster .card-body .react-viewer:nth-child(4) {
  left: 45px;
}

.card-main .card-body .card-poster .card-body .react-viewer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-main .card-body .card-poster .card-body .input-group {
  padding-left: 12px;
}

.card-main .card-body .card-poster .card-body .img-profile-comment {
  width: 45px;
  height: 45px;
  overflow: hidden;
  border-radius: 50%;
}

.card-main .card-body .card-poster .card-body .img-profile-comment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-main .card-body .card-poster .card-body .input-group-comment {
  background-color: var(--bg-body);
  border-radius: 25px;
  padding: 0px 12px !important;
}

.card-main .card-body .card-poster .card-body .input-group-comment .form-control {
  padding: 0px !important;
  border: none !important;
  background-color: transparent !important;
}

.card-main .card-body .card-poster .card-body .input-group-comment .form-control::placeholder {
  color: var(--dark-color);
  font-size: 14px;
}

.card-main .card-body .card-poster .card-body .more-content {
  display: none;
}

/*  .card-main   .card-body   .card-poster  .card-body .prof */

.card-event {
  height: calc(100vh - 80px);
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
}

.card-event-coming .card-body .card-img {
  width: 45px;
  height: 45px;
  border-radius: var(--border-radius);
}

.card-event .card-might-like .img-profile {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
}

.card-event .group-member {
  position: absolute;
  left: 0;
  width: 25px;
  height: 25px;
  overflow: hidden;
  border-radius: 50%;
}

.card-event .group-member img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-event .group-member:nth-child(1) {
  left: 0;
}

.card-event .group-member:nth-child(2) {
  left: 15px;
}

.card-event .group-member:nth-child(3) {
  left: 30px;
}

.card-event .group-member:nth-child(4) {
  left: 45px;
}

.card-event .group-member:last-child {
  font-size: 10px;
  color: var(--white-color);
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  left: 45px;
}

.card-event .card-suggest-group .card-body .card-img {
  width: 100%;
  position: relative;
}

.card-event .card-suggest-group .card-body .card-img .card-img-cover {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.card-event .card-suggest-group .card-body .card-img .card-img-profile {
  position: absolute;
  left: 10px;
  bottom: 5px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

/*  card poster group */
.card-group-poster .img-profile {
  width: 50px;
  height: 50px;
  border: none;

}

.card-group-poster .img-profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.card-group-poster .img-profile .img-profile-memeber-group {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--white-color);
}

.card-group-poster .img-profile .img-profile-memeber-group img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-group-poster .card-poster-member-group .card-body .img-poster {
  width: 100%;
  height: 360px;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.card-group-poster .card-poster-member-group .card-body .img-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-group-poster .card-poster-member-group .card-body .img-profile-member {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
}

.card-group-poster .card-poster-member-group .card-body .img-profile-member img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.group-page .card-main .card-group .card-img {
  width: 100%;
  height: 300px;
  object-fit: cover;

}

.group-page .card-main .card-group .card-img .card-img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;

}



.group-page .card-main .card-group .card-img .card-img-profile {
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

/*  end of card-poster member */
.card-rightbar {
  height: calc(100vh - 70px);
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
}

.card-rightbar .input-group {
  padding-left: 12px;
}

.card-rightbar .swiper {
  width: 100%;
  height: auto;
}

.card-rightbar .swiper .swiper-slide {
  position: relative;
  margin-right: 0px !important;
  cursor: pointer;
}

.card-rightbar .swiper .swiper-slide .icon-add-story {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  bottom: 40px;
  color: white;
}

.card-rightbar .swiper .swiper-slide img {
  height: 55px;
  width: 55px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-color);
}

/* Custom styles for the right navigation button */
.card-rightbar .swiper-button-next {
  background-color: #007bff;
  /* Example background color */
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  right: 10px;
  display: none;
}

.card-rightbar .swiper-button-next:after {
  content: "▶";
  /* Right arrow symbol */
  font-size: 20px;
}

.card-rightbar .swiper-button-prev {
  display: none;
  /* Hide the left arrow */
}

.card-rightbar .card-contact-chat .card-body .img-profile {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 50%;
}

.dropdown-option-chat {
  width: 264px;
  top: 16px !important;
  padding: 10px;
  z-index: 1;
}

.dropdown-option-chat li .dropdown-item:hover {
  background-color: var(--bg-body);
  border-radius: var(--border-radius);
}

.dropdown-item:focus {
  color: var(--black-color);
  /* background-color: var(--primary-color); */
}

/* modal  */
/* .modal-view-story .modal-dialog   .modal-content{
    max-width: 500px;
   
}  */
/*  create style video page  */

.video-page .card-body ul .sidebar-item .sidebar-link img {
  width: 25px;
  height: 25px;
  object-fit: cover;
  border-radius: 0;
}

/* CARD-MAIN  */
 .card-main .video-card .card-body .video {
  max-width: 100%;
  height: 240px !important;


}

 .card-main .video-card .card-body .video video {
  width: 100% ;
  height: 100%;
 
  
}

video#player {
  width: 100%;
  object-fit: cover;
  height: 100%;
  
}

.plyr__poster {
  background-size: cover !important;
}

.plyr {
  height: 100% !important;
}

.video-page .card-main .video-card .card-body .img-profile {
  width: 45px;
  height: 45px;
  overflow: hidden;
  border-radius: 50%;
}

.video-page .card-main .video-card .card-body .img-profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*  custom market page  */

.market-page .card-leftbar .card-body ul .sidebar-item .sidebar-link img {
  border-radius: 0;
}

.market-page .card-main .card-product .card-body .card-img {
  width: 100%;
  height: 240px;
  border-radius: var(--border-radius);
  overflow: hidden;
  background-color: var(--bg-body);
}

.discount-label {
  left: 0px;
  top: 0px;
  position: absolute;
  background: var(--primary-color);
  padding: 4px;
  text-align: center;
  color: var(--white-color);
  border-radius: var(--border-radius);
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
}

.market-page .card-main .card-product .card-body .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.market-page .card-main .card-product .card-body .desc-product {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*  custom style sell page */
.sell-page .card-leftbar .card-body ul .sidebar-item .sidebar-link img {
  border-radius: 0;
}

.sell-page .card-main .card-body .card-sell .card-img {
  height: 130px;
  display: block;
  border-radius: var(--border-radius);
  overflow: hidden;
  background-color: var(--bg-body);
  
}

.sell-page .card-main .card-body .card-sell .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sell-page .card-main .card-body .card-sell .desc-product {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sell-page .img-sell {
  height: 160px;
  width: 100%;
  border-radius: var(--border-radius);
}

.card-sell .dropdown-product-sell {
  top: 20px !important;
}

.card-sell .dropdown-product-sell li .dropdown-item {
  border-radius: var(--border-radius);
}


/* Page Detail Product */
.page-product-detail .card-leftbar {
  /* height: auto; */
  overflow: initial;

}

.page-product-detail .card-main textarea {
  resize: none;
  font-size: 18px;
  min-height: 160px;
}

.page-product-detail .card-leftbar .swiper {
  width: 100%;
  height: auto;
}

/* .page-product-detail  textarea {
  resize: none;
  font-size: 18px;
  min-height: 300px;
} */
.page-product-detail .card-leftbar .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
}

.page-product-detail .card-leftbar .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius) !important;
  background-color: var(--bg-body);
}

.page-product-detail .card-leftbar .swiper {
  width: 100%;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
}

.page-product-detail .card-leftbar .btn-back {
  width: 45px;
  height: 45px;
  border-top-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  background-color: var(--white-color);
  color: var(--primary-color);
  font-size: 24px;
  font-weight: bold;
  left: 0px;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;

}


.page-product-detail .card-leftbar .mySwiper2 {
  height: 396px;
  width: 100%;
}


.page-product-detail .card-leftbar .mySwiper {
  height: 20%;
  box-sizing: border-box;
  padding: 16px 0;
  padding-bottom: 0px !important;
}

/* swiper-button-next:after, .swiper-button-prev:after  */
.page-product-detail .card-leftbar .swiper-button-next,
.swiper-button-prev {
  background: var(--white-color);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
}

.page-product-detail .card-leftbar .swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
}

.page-product-detail .card-leftbar .mySwiper .swiper-slide {
  width: 25%;
  height: 80px;
  opacity: 0.4;
}

.page-product-detail .card-leftbar .mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}

.page-product-detail .card-leftbar .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .page-product-detail  .swiper-button-next{
  display: block !important;
} */
.page-product-detail .card-main {
  padding-bottom: 0;
}

/* Article  Page*/
.article-page .card-leftbar .card-body ul .sidebar-item .sidebar-link img {
  border-radius: 0;
}

.article-page .dropdown-option-poster {
  top: 40px !important;
  right: -42px !important;
}


.article-page .mySwiperPageDetailPost {
  width: 100%;
  height: 100vh;
  border-radius: var(--border-radius);
}


.article-page .mySwiperPageDetailPost .swiper-button-next,
.swiper-button-prev {
  background: var(--white-color);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
}

.article-page .mySwiperPageDetailPost .swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
}

.article-page .mySwiperPageDetailPost .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.article-page .mySwiperPageDetailPost .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-page .img-profile-user-comment {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
}

.article-page .img-profile-user-comment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-page   .img-profile {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
}

.article-page  .form-control-comment {
  resize: none;
  font-size: 18px;
  min-height: 100px;
  width: 100%;
  border: none !important;
  background-color: var(--bg-body);
  outline: none;
  border-radius: none !important;
}

/*  Navbar-category  */
/* .card-sidebar-category  .card-body  .swiper {
    width: 100%;
    height: 100%;
  } */


.article-page  .form-control-comment::placeholder {
  color: var(--dark-color);
}

.article-page  .react-comment {
  bottom: -23px;
  border-radius: none;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  padding-left: 12px;
}

.article-page .card-footer {
  padding-bottom: 40px !important;
}
/*  -- */


.modal-comment-custom .card-body {
   height :300px !important;
   padding-bottom: 160px;
}
.article-page-detail .card-leftbar .img-profile {
  width: 45px;
  height: 45px;
  overflow: hidden;
  border-radius: 50%;
}

.article-page-detail .card-leftbar .img-profile  img {
width: 100%;
height: 100%;
object-fit: cover;
}
.article-page-detail .mySwiper-article-detail {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--border-radius);
}


.article-page-detail .mySwiper-article-detail .swiper-button-next,
.swiper-button-prev {
  background: var(--white-color);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
}

.article-page-detail .mySwiper-article-detail .swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
}

.article-page-detail .mySwiper-article-detail .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  
}

.article-page-detail .mySwiper-article-detail .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-page-detail  .img-poster{
        height: 360px;
        border-radius: var(--border-radius);
        overflow: hidden;
}

.article-page-detail  .img-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-page-detail .card-popular  .img-poster-popuplar{
        width: 100%;
        height:100px;
        overflow: hidden;
        border-radius: var(--border-radius);
        display: block;
}
.article-page-detail .card-popular  .img-poster-popuplar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
}
.article-page-detail .card-popular  .img-profile {
    width: 30px;
    height: 30px;
    overflow: hidden; 
    border: 50%;
  }
  .article-page-detail .card-popular  .img-profile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }




/*  card-side-bar */


.card-sidebar-category .card-body .swiper .swiper-wrapper .swiper-slide a {
  color: var(--black-color);
  display: block;
  text-decoration: none;
  font-size: 16px;
  padding: 6px 0px;
  width: auto;
  border-radius: var(--border-radius);
  width: 100%;
  text-align: center;
  
}

.card-sidebar-category .card-body .swiper .swiper-wrapper .swiper-slide a.active {
  background-color: var(--bg-body);
}

/*  modal  */

.modal-view-story.show {
  backdrop-filter: blur(10px);
  /* Apply your desired filter here */
  background-color: var(--bg-story);
  /* Optional: adjust the color and opacity */
}

.modal-view-story .modal-dialog .modal-content .swiper {
  width: auto !important;
  height: auto !important;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.modal-view-story .modal-dialog .modal-content .swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100% !important;
  background-color: green !important;
  max-width: 500px;
  height: 500px !important;
}

.modal-view-story .modal-dialog .modal-content .swiper-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.modal-view-story .modal-dialog .modal-content .option-story .story-profile .img-profile {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
}

.modal-view-story .modal-dialog .modal-content .option-story {
  top: 25px;
  position: absolute;
  z-index: 10;
  /* Ensure it's above other content */
  width: 94%;
  left: 50%;
  transform: translateX(-50%);
}

.modal-view-story .modal-dialog .modal-content .btn-close-modal-story {
  color: white !important;
  font-size: 20px;
}

.modal-view-story .modal-dialog .modal-content .swiper-pagination {
  position: absolute;
  top: 0px !important;
  left: 0;
  width: 100%;
  text-align: center;
}

.modal-view-story .modal-dialog .modal-content .swiper-pagination .swiper-pagination-bullet {
  background-color: transparent;
  width: 30% !important;
  border-radius: 0 !important;
  height: 4px !important;
  position: relative;
  overflow: hidden;
  opacity: 0.7;
  background: var(--bg-body);
}

.modal-view-story .modal-dialog .modal-content #playPauseButton {
  font-size: 30px;
  color: white;
}

.modal-view-story .modal-dialog .modal-content .swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

.modal-view-story .modal-dialog .modal-content .swiper-pagination .swiper-pagination-bullet-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--white-color);
  transform: scaleX(0);
  transform-origin: left;
  animation: progress 5s linear infinite;
}

@keyframes progress {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

.modal-view-story .modal-dialog .modal-content .paused .swiper-pagination-bullet-active::before {
  animation-play-state: paused;
}

/* Buttons styles */

.modal-view-story .modal-dialog .modal-content .controls button {
  background: transparent;
  border: none;
  font-size: 24px;
  color: #007bff;
  cursor: pointer;
}

/*  custom modal option poster */
.dropdown-option-poster {
  width: 260px;
}

/* .dropdown-option-poster  .dropdown-item {
  background-color: green;
} */

.dropdown-option-poster .dropdown-item {
  cursor: pointer;
  padding: 10px;
}

.dropdown-option-poster .dropdown-item:hover {
  background-color: var(--bg-body);
  border-radius: var(--border-radius);
}

/* modal save option  */
/* .modal-save-option.show{
     display: block;
} */

.modal-save-option .modal-dialog .card .card-body ul .img-album {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--border-radius);
  cursor: pointer;
}

/* Coment */
.hover-none {
  border: none !important;
}

.hover-none:hover {
  border-color: none !important;
}

/* custom placeholder hover node */
.hover-none::placeholder {
  color: var(--border-color) !important;
}

.popup-user-chat .popup-content .card .card-body::-webkit-scrollbar {
  width: 5px;
}

.popup-user-chat .popup-content .card .card-body::-webkit-scrollbar-track {
  background-color: var(--border-color);
}

.popup-user-chat .popup-content .card .card-body::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
}

.modal-view-story .modal-dialog .modal-content .controls button:hover {
  color: #0056b3;
}

/* .show {
  display: block;
} */

/*  modal  share  */
/* .modal-share.show{
      display: block;
} */
.modal-share .modal-dialog {
  max-width: 420px;
}

.modal-share .modal-dialog .card .icon-social {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
  background-color: var(--bg-body);
}

/* =================================> friends <=======================================*/

.friend-list-img {
  width: 95px;
  height: 95px;
  object-fit: cover;
  border-radius: 50%;
}

.btn-verify-friend,
.btn-remove-friend {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
}

/* ==============================> end of friends <==================================*/

/*  custom when ntraocus oon hover none */

.hover-none:focus {
  box-shadow: none;
  box-shadow: none;
  border: none !important;
}

.card .show-contan-container .show-contan {
  width: 100%;
  height: 80%;
  right: 2px;
  background-size: cover;
  display: none;
  z-index: 1;
}

.card .show-contan-container:hover .show-contan {
  transition: all 0.3s;
  display: block;
}

.show-contan form .form-select {
  /* background: var(--bd-violet-bg); */
  border: none !important;
}

/* ====start: Avatar ===*/
.avatar-event .avatar-group {
  display: flex;
  align-items: center;
  /* justify-content: center; */
}

.avatar-event .avatar {
  position: relative;
  transition: .2s;
  cursor: pointer;
}

.avatar-event .avatar:not(:first-child) {
  margin-left: -.8rem;
}

.avatar-event .avatar:hover {
  z-index: 1;
  transform: translateY(-.5rem);
}


.avatar-event .avatar img {
  width: 45px;
  height: 45px;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .1);
}

.avatar-event .avatar span {
  overflow: hidden;
  width: 45px;
  height: 45px;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .1);
}

/* Profile */
.profile-user .profile-img {
  width: 150px;
  height: 150px;
  top: -85px;
  left: 50px;
}

.profile-user .icon{
  left: 176px;
  top:-10px
}

@media (max-width : 780px) {
  .profile-user .profile-img {
    width: 130px;
    height: 130px;
 
    left: 40px;
  }
  .profile-user .icon{
    left: 145px;
    top:-15px
  }

 

}

/* body {
  background-image: linear-gradient(to top, #ecedee 0%, #eceeef 75%, #e7e8e9 100%);
  min-height: 100vh;
  font: normal 16px sans-serif;
  padding: 60px 0;
} */

.photo .gallery-container {
  background-color: #fff;
  color: #35373a;
  min-height: 100vh;
  border-radius: 20px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
}

.photo .gallery-container h1 {
  text-align: center;
  margin-top: 70px;
  font-family: 'Droid Sans', sans-serif;
  font-weight: bold;
}

.photo .gallery-container p.page-description {
  text-align: center;
  max-width: 800px;
  margin: 25px auto;
  color: #888;
  font-size: 18px;
}

.photo .tz-gallery {
  padding: 40px;
}

.tz-gallery .lightbox img {
  width: 100%;
  height: 100%;

}


.baguetteBox-button {
  background-color: transparent !important;
}


@media(max-width: 768px) {
  body {
    padding: 0;
  }

  .container.gallery-container {
    border-radius: 0;
  }
}


/*  style modal  create-post */
.modal-create-post .modal-dialog {
  top: 0;
  margin-top: 0px;
  height: 100vh;
  display: flex;
  align-items: center;
  max-width: 500px;
  border: none !important;
}

.modal-create-post .modal-dialog .modal-content .card {
  width: 100%;
}

.modal-create-post .modal-dialog .modal-content .card .img-profile {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
}

.modal-create-post .modal-dialog .modal-content .card .img-profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-create-post .modal-dialog .modal-content .card .card-body .form-control {
  border: none !important;
  color: var(--dark-color);
  font-size: 16px;
}

.modal-create-post .modal-dialog .modal-content .card .card-body .form-control::placeholder {
  font-size: 16px;
  color: var(--dark-color);
}

.modal-create-post .modal-dialog .modal-content .card .card-body .textarea-create-post {
  resize: none;
  font-size: 18px;
  min-height: 100px;
}

/* modal-dialog-scrollable */

/*  modal comment */
.modal-comment .modal-dialog {
  max-width: 640px;
}
.modal-comment .modal-dialog .modal-content {
     padding-bottom: 30px;
}

.modal-comment .card-body {
  max-height: 420px;
  overflow: hidden;
  overflow-y: auto;
}

/* .modal-comment.show {
  display: block;
} */

.modal-comment  .card-body .img-profile {
  width: 45px;
  height: 45px;
  overflow: hidden;
  border-radius: 50%;
}

.modal-comment  .card-body .img-profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-comment  .card-body .img-poster {
  width: 100%;
  height: 300px;
}

.modal-comment  .card-body .img-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

 .react-viewer {
  width: 25px;
  height: 25px;
  overflow: hidden;
  position: absolute;
  border-radius: 50%;
  left: 0;
}

.react-viewer:last-child {
  font-size: 10px;
  color: var(--white-color);
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  left: 60px;
}

 .react-viewer:nth-child(1) {
  left: 0px;
}

 .react-viewer:nth-child(2) {
  left: 15px;
}

 .react-viewer:nth-child(3) {
  left: 30px;
}

 .react-viewer:nth-child(4) {
  left: 45px;
}

 .react-viewer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.modal-comment .card .card-body .img-profile-user-comment {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
}

.modal-comment .card .card-body .img-profile-user-comment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-comment .card .card-footer .img-profile {
  width: 45px;
  height: 45px;
  overflow: hidden;
  border-radius: 50%;
}

.modal-comment .card .card-footer .img-profile {
  width: 45px;
  height: 45px;
  object-fit: cover;
}

.modal-comment .card .card-footer .img-profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-comment .card .card-footer .form-control-comment {
  resize: none;
  font-size: 18px;
  min-height: 100px;
  width: 100%;
  border: none !important;
  background-color: var(--bg-body);
  outline: none;
  border-radius: none !important;
 
}
.comment-poster{
  resize: none;
  font-size: 18px;
  min-height: 100px;
  width: 100%;
  border: none !important;
  background-color: var(--bg-body);
  outline: none;
  border-radius: none !important;
}

.modal-comment .card .card-footer .form-control-comment::placeholder {
  color: var(--dark-color);
}

.modal-comment .card .card-footer .react-comment {
  bottom: -23px;
  border-radius: none;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  padding-left: 12px;
}
.show{
  display: block;
}



/*  Modal -item-sale  */
.add-photo-card {
  position: relative;
  /* width: 140px; */
  height: 140px;
  border-radius: var(--border-radius);

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
}
#defaultPhoto{
  background: var(--bg-body);
}

.photo-upload-btn {
  width: 100%;
  height: 100%;
  background-color: var(--bg-body);
  color: white;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.photo-upload-btn i {
  margin-right: 5px;

}

.remove-photo-btn {
  position: absolute;
  top: -12px;
  right: -4px;
  border: none;
  cursor: pointer;
  background: transparent;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  overflow: initial;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color);
}
/*  modal item sale------- */
.modal-item-sale  .input-field input::placeholder{
  color: var(--dark-color);
  font-size: 14px;
}
.modal-item-sale .custom-item-sale {
  resize: none;
  font-size: 18px;
  min-height: 120px;
  text-align: start;
}

.modal-item-sale .input-field textarea:focus~label,
.modal-item-sale .input-field textarea:not(:placeholder-shown)~label {
  top: 0;
  font-size: 13px !important;
  background: var(--white-color) !important;
  color: var(--primary-color) !important;
}

.modal-item-sale .modal-dialog {
  max-width: 600px;
}

.modal-item-sale .img-edit {
  width: 100%;
  height: 200px;
  background-color: var(--bg-body);
  border-radius: var(--border-radius);
}

.modal-item-sale form .img-edit button {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: var(--white-color);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-item-sale form .img-edit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-item-sale .card .card-body .img-profile {
  width: 45px;
  height: 45px;
  overflow: hidden;
  border-radius: 50%;
}

.modal-item-sale .card .card-body .img-profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-item-sale .card .card-body .ts-control {
  padding: 12px 12px !important;
  border-radius: var(--border-radius);
  color: var(--dark-color) !important;
  background-color: var(--white-color) !important;
}

.modal-item-sale .card .card-body .ts-control:focus {
  border: 1px solid var(--primary-color) !important;
}

.modal-item-sale .card .card-body .ts-dropdown {
  border: none !important;
  border-radius: var(--border-radius) !important;
}

.modal-item-sale .card .card-body .ts-dropdown .option {
  font-size: 16px !important;
}

.modal-item-sale .card .card-body .ts-dropdown .option.active {
  background: var(--bg-body) !important;
}

.modal-item-sale .card .card-body .ts-dropdown .option:hover {
  background-color: var(--bg-body);
}

.modal-item-sale .card .card-body .box-add-photo-item-sale {
  background-color: var(--bg-body);
  width: 100%;
  height: 120px;
  border-radius: var(--border-radius);
}

.modal-item-sale .card .card-body .box-add-photo-item-sale .btn-add-item-sale i:nth-child(1) {
  font-size: 40px;
  color: var(--dark-color);
}

/* modal option poster  */
/*  modal edit sell */


/*  modal category product of market */



.modal-category-product .card .card-body ul .sidebar-item .sidebar-link {
  font-size: 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 6px;
  /* color: var(--primary-color); */
  color: var(--black-color);
  gap: 8px;
}

.modal-category-product .card .card-body ul .sidebar-item .sidebar-link i {
  font-size: 20px;
  margin-right: 5px;
}

.modal-category-product .card .card-body ul .sidebar-item .sidebar-link img {
  width: 25px;
  height: 25px;
  object-fit: cover;
  border-radius: 50%;
}

.modal-category-product .card .card-body ul .sidebar-item .sidebar-link:hover:not(.sidebar-link:nth-child(1)) {
  background: var(--bg-body);
  border-radius: var(--border-radius);
}

.modal-category-product .card .card-body ul .sidebar-item .sidebar-link.active {
  background: var(--bg-body);
  border-radius: var(--border-radius);
}

.modal-category-product .card .card-body ul .sidebar-item:not(:nth-child(1)) .sidebar-link:hover {
  background-color: var(--bg-body);
  border-radius: var(--border-radius);
}

/*  modal media */
.modal-media .img-media {
  width: 100%;
  height: 120px;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.modal-media .img-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*  custom offcanvas  leftbar   */

.offcanvas-leftbar {
  /* position: absolute;  */
  height: 100vh;
  max-width: 300px !important;
  overflow: hidden;
  overflow-y: auto;
  box-shadow: var(--bs-shadow);
}

.offcanvas-leftbar .card .card-body ul .sidebar-item .sidebar-link {
  font-size: 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  color: var(--primary-color);
}

.offcanvas-leftbar .card .card-body ul .sidebar-item .sidebar-link i {
  font-size: 20px;
  margin-right: 5px;
}

.offcanvas-leftbar .card-body ul .sidebar-item .sidebar-link img {
  width: 25px;
  height: 25px;
  object-fit: cover;
  border-radius: 50%;
}

.offcanvas-leftbar .card-body ul .sidebar-item .sidebar-link.active {
  background: var(--bg-body);
  border-radius: var(--border-radius);
}

.offcanvas-leftbar .card-body ul .sidebar-item:not(:nth-child(1)) .sidebar-link:hover {
  background-color: var(--bg-body);
  border-radius: var(--border-radius);
}

.offcanvas-leftbar .card-header .btn-close:focus {
  box-shadow: none !important;
}


/* account setting */


.section-setting .container-fluid .row .col-md-3 .card .card-body .nav .nav-link {
  margin: 4.5px 0;
}


.card .card-body .nav-pills .nav-link {
  color: var(--dark-color) !important;
}

.card .card-body .nav-pills .nav-link:hover {
  background-color: var(--bg-body) !important;
  border-radius: var(--border-radius) !important;
}

.card .card-body .nav-pills .nav-link.active {
  background-color: var(--bg-body) !important;
  border-radius: var(--border-radius) !important;
  color: var(--primary-color);
}




.setting-left {
  height: calc(100vh - 80px);
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
}

.setting-right {
  height: calc(100vh - 80px);
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
}


.personal-profile-img {
  position: relative;
  width: 125px;
  height: 125px;
  background-color: red;
  border-radius: 50%;
  overflow: hidden;
}

.personal-profile-img::after {
  content: "";
  position: absolute;
  top: 75%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: var(--bg-story);
  z-index: 2;
}

.personal-profile-img i {
  position: absolute;
  z-index: 399;
  font-size: 50px;
  top: 75%;
  left: 40%;
  font-size: 20px;
  color: var(--white-color);
}


#camera-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
}

#profile-picture-input {
  display: none;
}

.personal-profile-img img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}


/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-remove .modal-body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-remove .modal-body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.pointer {
  cursor: pointer;
}

/* end of account setting */


/*  custom modal create article post */


/* sm */
@media (max-width: 575.98px) {

  .card-body>.otp>.col-3 input {
    height: 40px;
  }

  .form-shadow {
    box-shadow: none !important;
  }

  .form-shadow {
    box-shadow: none;
  }

  .chat-app .main-content .card-body .message-container .messages {
    max-width: 150px !important;
  }

  .modal-view-story .modal-dialog .modal-content .swiper-slide {
    height: 100vh !important;
  }

  /* .container-fluid {
    padding: 0 !important;
  }

  .navbar-mobile .container-fluid {
    padding: 0 13px !important;
  } */

  .custom-shadow {
    box-shadow: none !important;
  }

  .navbar {
    box-shadow: none !important;
  }

  .custom-navbar-mobile {
    padding: initial !important;
  }
}

/* h-bg-grup */
.h-img-bg {
  height: 500px;
}

/* h  friend */
.h-f {
  height: 120px;
}

/* md */
@media (max-width: 767.98px) {
  .form-shadow {
    box-shadow: none;
  }

  /* Your styles here */
  main {
    margin-top: 76px;
  }

  .popup-user-chat {
    right: 16px;
  }

  .popup-chat .popup-content .card .card-body {
    max-height: 335px !important;
  }

  /* .popup-chat {
    width: 70% !important;
  } */

  .card-main {
    padding-bottom: 90px !important;
  }

  /* .home-page .card-main */
}

@media (max-width: 767.98px) {
  .h-img-bg {
    height: 200px;
  }

}

/* lg */
@media (max-width: 991.98px) {

  /* Your styles here */
}

/* xl */
@media (max-width: 1199.98px) {
  /* Your styles here */
}

/* xxl */
@media (max-width: 1399.98px) {
  /* Your styles here */
}

/* ============================> end of Responsive <======================================= */
/* Profile User img */
.contact-profile {
  width: 150px;
  height: 150px;
  overflow: hidden;
  /* border-radius: 50%; */
}

.contact-profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.profile-navlink .active {
  background-color: var(--primary-color);
  color: var(--white-color);
}

/* Gruop */
/* @media (max-width:1400px) {
  .group .card-body > .img >img {
  
  background-color: #4CAF50

  }
  
} */
/* ==Team== */

.member {
  transition: 0.3s;
}


.member:hover .overlay-member {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.30;
}


.member:hover .box-title-1 {
  opacity: 0;
}





.member img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  border-radius: 2px;
}



.cuser-p {
  cursor: pointer;
}


.team .icons-container {
  left: 0;
  right: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.3s;
  text-align: center;
}

.team .box-title-1 {
  background-color: var(--border-color);
}

.team .icons-container a {
  transition: color 0.3s;
  margin: 0 3px;
  padding-top: 7px;
  border-radius: 4px;
  width: 36px;
  cursor: pointer;
  height: 36px;
  display: inline-block;
  transition: ease-in-out 0.3s;
  color: var(--primary-color);
}

.team .icons-container a:hover {
  color: var(--white-color) !important;
}

.member:hover .icons-container {
  opacity: 1;
}

.h-img-team {
  height: 230px;

}

@media (max-width:600px) {
  .add-friend {
    padding: 5px;
  }

  .add-friend .btn {
    width: 50%;
  }

}

/*  card poster group */
.card-group-poster .img-profile {
  width: 50px;
  height: 50px;
  border: none;

}

.card-group-poster .img-profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.card-group-poster .img-profile .img-profile-memeber-group {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--white-color);
}

.card-group-poster .img-profile .img-profile-memeber-group img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-group-poster .card-poster-member-group .card-body .img-poster {
  width: 100%;
  height: 360px;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.card-group-poster .card-poster-member-group .card-body .img-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-group-poster .card-poster-member-group .card-body .img-profile-member {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
}

.card-group-poster .card-poster-member-group .card-body .img-profile-member img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.group-page .card-main .card-group .card-img {
  width: 100%;
  height: 300px;
  object-fit: cover;

}

.group-page .card-main .card-group .card-img .card-img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;

}



.group-page .card-main .card-group .card-img .card-img-profile {
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}


/* ============================> Responsive <======================================= */



/* sm */
@media (max-width: 575.98px) {

  .card-body>.otp>.col-3 input {
    height: 40px;
  }

  .form-shadow {
    box-shadow: none !important;
  }

  .form-shadow {
    box-shadow: none;
  }

  .chat-app .main-content .card-body .message-container .messages {
    max-width: 150px !important;
  }

  .modal-view-story .modal-dialog .modal-content .swiper-slide {
    height: 100vh !important;
  }

  /* .container-fluid {
    padding: 0 !important;
  } */
  /* .navbar-mobile .container-fluid {
    padding: 0 13px !important;
  } */

  .custom-shadow {
    box-shadow: none !important;
  }

  .navbar {
    box-shadow: none !important;
  }

  .custom-navbar-mobile {
    padding: initial !important;
  }
}

/* h-bg-grup */
.h-img-bg {
  height: 500px;
}

/* h  friend */
.h-f {
  height: 120px;
}

/* md */
@media (max-width: 767.98px) {
  .form-shadow {
    box-shadow: none;
  }

  /* Your styles here */
  main {
    margin-top: 76px;
  }

  .popup-user-chat {
    right: 16px;
  }

  .popup-chat .popup-content .card .card-body {
    max-height: 335px !important;
  }

  /* .popup-chat {
    width: 70% !important;
  } */

  .card-main {
    padding-bottom: 90px !important;
  }

  /* .home-page .card-main */
}

@media (max-width: 767.98px) {
  .h-img-bg {
    height: 200px;
  }

}

/* lg */
@media (max-width: 991.98px) {

  /* Your styles here */
}

/* xl */
@media (max-width: 1199.98px) {
  /* Your styles here */
}

/* xxl */
@media (max-width: 1399.98px) {
  /* Your styles here */
}

/* ============================> end of Responsive <======================================= */