/**
 * author style
 *
 * This file is automatically populated if the user chooses custom colors in the Customizer.
 */

#author-container {
  width: 100%;
  min-height: 70vh;
}

.author__header {
  margin: 4em 10em;
}

.author__img-container {
  margin-bottom: 1em;
}
.author__img-container img {
  border-radius: 50%;
}
.author__img {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  max-width: fit-content;
}

.author__content {
  padding-left: 3em;
}

.author__name {
  color: #4c1c8a;
}

.author__role,
.author__description {
  font-weight: normal;
  color: #141414;
  margin-bottom: 2em;
  white-space: pre-line;
}

.author__about {
  color: #5e27a7;
  font-weight: 600;
  margin-bottom: 1em;
}

.author__a-link-edit {
  height: 3em;
  width: fit-content;
}

.author__btn-link-edit,
.author__btn-link-new-post {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3em;
  border-radius: 3px;
  color: #9839ff;
  background: #fff;
  width: 100%;
  padding: 0 1rem;
  line-height: 1;
  border: 2px solid #9839ff;
}

.author__btn-link-edit i,
.plus-icon {
  margin-right: 0.5rem;
}

.author__btn-link-edit:hover {
  color: #fff;
  background: #9839ff;
  border: 2px solid #9839ff;
}
.author__btn-link-edit-more:focus {
  border: 2px solid #9839ff;
}

.author__btn-link-load-more {
  height: 3em;
  border-radius: 3px;
  color: #9839ff;
  background: #fff;
  width: 10em;
  padding: 0;
  line-height: 1;
  border: 2px solid #9839ff;
}

.author__btn-link-load-more:hover,
.author__btn-link-new-post:hover {
  color: #fff;
  background: #9839ff;
  border: 2px solid #9839ff;
}
.author__btn-link-load-more:focus,
.author__btn-link-new-post:focus {
  border: 2px solid #9839ff;
}

.author__btn-link-new-post:hover .plus-icon {
  content: url(/https/blog.basetis.com/wp-admin/images/plus_icon_white.svg);
}
.plus-icon {
  content: url(/https/blog.basetis.com/wp-admin/images/plus_icon_purple.svg);
}

#author__nav-tabs {
  box-shadow: none;
}

.nav-tabs {
  border: none;
}

.author__nav-tab {
  color: #777;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.6px;
  border: none;
  border-bottom: 2px solid #cacaca !important;
  border-radius: 0;
  background: transparent;
  padding: 15px;
}

.author__nav-tab:hover {
  color: #777;
  border: none;
}

.author__nav-tab.active {
  color: #32284a;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 2px solid #9839ff !important;
  border-radius: 0;
  padding: 15px;
}

.author__total-posts {
  color: #abb8c3;
  font-size: 15px;
  padding: 2px 0 0 10px;
}

.author__post-title {
  height: 50px;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.posted-on {
  margin: 1rem 0;
}

.author__post-image {
  height: 134px;
  width: 100%;
  object-fit: cover;
}

.author__post-icons {
  height: 20px;
  width: 20px;
  margin-right: 0.5rem;
}

.author__icon-heart {
  font-size: 20px;
  padding-right: 5px;
}

.load-list-profile {
  width: 96%;
}

/* RESPONSIVE 1200px SMALL DESKTOP DESIGN */
@media only screen and (max-width: 1200px) {
  .author__header {
    margin: 4em 5em;
  }
}
/* RESPONSIVE 991px SMALL DESKTOP DESIGN */
@media only screen and (max-width: 991px) {
  .author__content {
    padding-left: 0;
  }
}
/* RESPONSIVE 768px TABLET DESIGN */
@media only screen and (max-width: 768px) {
  .author__header {
    margin: 4em 4em;
  }
  .author__img-container {
    display: flex;
    justify-content: start;
  }
  .author__img {
    width: 60px;
    height: 60px;
  }
  #author__nav-tabs {
    width: 100%;
  }
}
/* RESPONSIVE 576px MOBILE DESIGN */
@media only screen and (max-width: 576px) {
  .author__header {
    margin: 2em 1em;
  }
  .author__img-container {
    justify-content: center;
  }
  .author__content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 767px) {
  .new-post-btn {
    display: none;
  }
  .author-edit-btn {
    display: none;
  }
  .responsive-author-edit-btn {
    display: flex;
    justify-content: center;
  }
  .author__a-link-edit {
    width: 100%;
  }
  .author__name {
    font-size: 24px;
  }
}
@media (min-width: 768px) {
  .author-edit-btn {
    display: flex;
    justify-content: end;
  }
  .responsive-author-edit-btn {
    display: none;
  }
}