:root {
  --no-image: url('../images/no_image.jpg');
}
.position-relative {
  position: relative;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.article-details__content {
  --color-primary: #2687c9;

  --text-color-white: #fff;
  --text-color-grey: #777777;

  --input-field-gap: 16px;

  --bg-color-main: #fff;
  --bg-color-grey: #f8f8f8;
  --bg-color-grey2: #333333;

  --val-05: 8px;
  --val-005: -8px;
  --val-1: 16px;
  --val-1\/5: 24px;
  --val-2: 32px;
  --val-2\/5: 40px;
  --val-3: 48px;
  --val-4: 64px;
  --val-5: 80px;
  --val-13: 13px;
  --val-10: 10px;
  --val-010: -10px;
  --val-20: 20px;
  --val-020: -20px;
  --val-30: 30px;

  /* color */
  --color-hero-searchbar-transparent: transparent;
  --color-grey3: #e8e8e8;
  --color-grey4: #d8d8d8;

  /* text color */
  --text-color-white: #fff;
  --text-color-primary: #2687c9;
  --text-color-black1: #151618;
  --text-color-grey1: #333333;
  --text-color-grey2: #666666;
  --text-color-grey3: #999999;
  --text-color-grey4: #777777;
  --text-color-grey5: #efeef0;
  --text-color-grey6: #e6e6ea;

  /* bg color */
  --color-hero-searchbar: #e5e5e5;
  --bg-color-transparent: transparent;
  --bg-color-primary: #2687c9;
  --bg-color-primary-01: rgba(38, 135, 201, 0.1);
  --bg-color-hero: #f8f8f8;
  --bg-color-white: #fff;

  /* icons */
  /* --right-arrow-icon: url('../../knowledge-center/icons/right_arrow.svg');
  --left-arrow-icon: url('../../knowledge-center/icons/left_arrow.svg'); */

  --no-person-image: url('../../../images/default-profile-picture.png');
}
.portfolio_body
  .portfolio_body_right
  div#middle_container_wrapper.article-details__container {
  max-width: 100% !important;
  width: 100% !important;
  margin-top: 0;
}
.article-details__content .border-radius-20 {
  border-radius: 20px !important;
  overflow: hidden;
}

.article-details__content {
  padding: 25px 25px 20px 25px !important;
  background-color: var(--bg-color-main);
  border-radius: 20px !important;
  margin-bottom: 32px;
}

.article-details__hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}
.article-details__hero-title {
  margin-bottom: 20px;
}
.article-details__hero-title h3 {
  color: var(--bg-color-grey2);
}
.article-details__body-description {
  color: var(--bg-color-grey2);
  margin-top: 10px;
  font-size: 16px;
}
.article-details__body-description>p{
  margin: 0;
}
.article-details__publishedBy{
  color: var(--bg-color-grey2);
}
/* .article-details__body-description > p > br {
  display: none;
} */
/* Author Section */
.article-details__author-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 16px;
}
/* .article-details__author-section .add-article__modal-header-left {
  width: 220px;
} */
/* .article-details__author-section
  .article_feed_header
  .article_feed_header_right {
  display: none;
} */
.article-details__author-section
  .add-article__modal-header-left
  .profile_info_main17.profile-21
  > .com_name_main17 {
  width: unset;
}
.article-details__author-status {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* width: calc(100% - 250px); */
  width: 200px;
}
.article-details__author-status p {
  margin: 0;
  margin-right: 16px;
  padding: 0;
}
/* Follow User */
.article-details__follow-button {
  cursor: pointer;
  background-color: #e9f3fa;
  padding: 5px 10px;
  border-radius: 10px;
  color: #2687c9;
}
.article-details__follow-button:hover {
  background-color: #2687c9;
  color: #ffffff;
}
/* End Follow User */
/* End Author Section */

/* More Artilces */
/* no image */
.article-details__no-image {
  display: flex;
  width: 100%;
  height: 100%;
}
.article-details__no-image::before {
  content: '';
  background-image: var(--no-image);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 20px 20px 0 0;
  /* border-radius: var(--border-radius-1\/4);
  overflow: hidden; */
}
.article-details__hero-top .article-details__no-image::before {
  border-radius: 20px;
}
/* end no image */
/* skeleton */
.skeleton__wrapper {
  padding-top: 3px;
  height: 100%;
  width: 100%;
}
.skeleton {
  --bg: #e1e1e1;
  --glare-bg: linear-gradient(
    90deg,
    transparent,
    hsla(0, 0%, 100%, 0.4),
    transparent
  );
  position: relative;
  background-color: var(--bg);
  overflow: hidden;
}

.skeleton::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--glare-bg);
  transform: translateX(-100%);
  animation: skeleton-glare 1.75s infinite ease-out;
  z-index: 1;
}

@keyframes skeleton-glare {
  to {
    transform: translateX(100%);
  }
}
.card__img {
  /* width: 100%;
  height: 100%; */
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
  object-position: center;
  /* position: absolute !important;
  left: 0;
  top: 0; */
}
/* end skeleton */
.article-details__image-card {
  padding-top: 3px;
  transition: transform 0.3s ease;
  /* aspect-ratio: 1/1.2; */
  aspect-ratio: 16 / 9;
}
.article-details__image-card:hover {
  transform: translateY(-3px);
  cursor: pointer;
}
.article-details__image-card,
.article-details__image-card img {
  border-radius: 20px 20px 0 0;
  overflow: hidden;

  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Image card */
.article-details__hero-image .article-details__image-card__container {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.article-details__hero-image .article-details__image-card__container img {
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}
/* footer */
.article-details__content .article__footer {
  margin-top: 32px;
}
.article__footer-comments {
  cursor: pointer;
}
.article__footer-comments-and-reply {
  margin-top: 24px;
}
/* end footer */
.more__article {
  /* margin-top: 32px; */
  margin-top: 48px;
}
.more__article-userinfo {
  /* font-size: 16px; */
  color: var(--text-color-grey2);
  font-size: 20px;
  font-weight: bold;
}
.more__article-slider {
  display: flex;
  margin: 16px 0;
  /* flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  column-gap: 24px; */
}

/* Best Stories Section */
/* .article-details__best-stories {
  background-color: var(--bg-color-white);
  padding: var(--val-2) 0 0;
} */
.more__article__heading {
  color: var(--text-color-grey1);
  font-size: var(--val-1\/5);
}
.more__article__container-slider {
  width: 100%;
  margin-top: var(--val-1);
  /* height: var(--slider-height); */
}
.more__article__slider {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.more__article__slider .swiper {
  width: 100%;
}
.more__article__slider-item.more__article__slider-item__less-item {
  max-width: 30% !important;
}

.article-details__slider-item__details {
  /* padding-right: 2.5vw; */
  /* margin-top: 16px; */
  margin-top: -3px;
  background-color: var(--bg-color-hero);
  display: flex;
}
.article-details__slider-item__details-inner {
  margin-top: 20px;
  padding: 0 16px 16px;
}
.article-details__slider-item__details:hover
  .article-details__details__heading {
  text-decoration: underline;
}
.article-details__details__heading {
  /* margin-bottom: var(--val-1); */
  font-size: 26px;
  line-height: 20px !important;
  color: var(--text-color-grey1);
  height: 40px;
}
.article-details__details__description,
.article-details__details__description > * {
  font-size: var(--val-1);
  line-height: var(--val-1\/5);
  color: var(--text-color-grey2);
  /* max-width: var(--description-maxwidth); */
  margin-top: var(--val-05);
  font-weight: var(--font-semibold);
}
/* End Best Stories Section */
/* End More Artilces */

#edit_comment_reply_to_reply.edit_comment_reply_to_reply .after_comment .my_streamcontent2_right_input .mentions-input-box .cssload-container-div {
  background: transparent !important;
}
/* adding css for reply laoder */

/* end adding css for reply laoder */



.other_post_article_3dot{
  position: relative;
  top: -28px !important;
}

.post_head_cat21_marginLeft{
  margin-right: 12px;
}