* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Ubuntu,
    Oxygen,
    Cantarell,
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  background-color: #f4f2ee;
  color: #5f6163;
  font-size: 14px;
}
input,
button,
textarea {
  border: none;
  font: inherit;
  background-color: transparent;
}
button {
  cursor: pointer;
}
a {
  text-decoration: none;
  color: #0a66c2;
}
.header {
  height: 50px;
  background-color: white;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 999;
}
.header__avatar-wrapper {
  width: 50px;
  height: 60%;
}
.header__avatar-img {
  max-height: 100%;
  display: block;
  justify-self: center;
}
.header__search-wrapper {
  width: calc(100% - 100px);
  height: 60%;
  background-color: #edf3f8;
  display: flex;
  align-items: center;
}
.header__magnifier {
  margin-left: 10px;
  max-height: 60%;
}
.header__input {
  outline: none;
  flex: 1;
  height: 60%;
  font-weight: bold;
  padding-left: 5px;
  padding-right: 10px;
  padding-top: 4px;
}
.header__message-notification-wrapper {
  width: 50px;
  height: 60%;
  position: relative;
}
.header__message-notification-img {
  max-height: 100%;
  display: block;
  justify-self: center;
}
.header_message-notification-bubble {
  max-height: 20px;
  position: absolute;
  top: 0;
  right: 2px;
  display: inline-block;
  border-radius: 50%;
  border: double 1px white;
}
.summary__background-wrapper {
  position: relative;
  background-color: white;
}
.summary__background-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  vertical-align: middle;
}
.summary__background-setting-btn {
  background-color: white;
  padding: 5px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  height: 30%;
  margin: 20px;
}
.summary__actions {
  height: 50px;
  background-color: white;
  padding: 0 10px;
  display: flex;
}
.summary__actions-left {
  width: 100px;
  position: relative;
}
.summary__actions-avatar-wrapper {
  position: absolute;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: white;
  bottom: 0;
  border: double 2px #5f6163;
  border-radius: 50%;
  height: 100px;
  align-items: center;
  justify-content: center;
}
.summary__actions-avatar-img {
  width: 50px;
}
.summary__actions-avatar-text {
  font-size: 0.8em;
}
.summary__actions-right {
  margin-left: auto;
  display: flex;
  justify-content: space-between;
  width: 80px;
  align-items: end;
}
.summary__actions-right-img {
  width: 25px;
  height: 25px;
}
.summary__profile-info {
  background-color: white;
  padding: 30px 10px;
}
.summary__profile-name {
  color: rgb(0 0 0 / 0.9);
}
.summary__about {
  background-color: white;
  padding: 20px 10px;
  margin-top: 10px;
}
.summary__about-title {
  display: flex;
}
.summary__about-edit {
  display: block;
  width: 25px;
  height: 25px;
  margin-left: auto;
}
.summary__about-content {
  padding-top: 10px;
}
.dot::before {
  content: "\00b7";
}

.main {
  padding-bottom: 50px;
}

.featured {
  background-color: white;
  padding: 20px 10px;
  margin-top: 10px;
}
.featured__content {
  padding-top: 10px;
}
.add-button-with-plus-sign {
  display: inline-block;
  margin-top: 20px;
  font-weight: 500;
}
.add-button-with-plus-sign::before {
  content: "";
  background-image: url(./images/icons8-plus-100.png);
  background-size: 100%;
  display: inline-block;
  height: 1em;
  width: 1em;
  margin-right: 5px;
}

.private {
  background-color: white;
  padding: 20px 10px;
  margin-top: 10px;
}
.private__title {
}
.private__title--italic {
  font-style: italic;
}
.private__rows {
  margin-top: 20px;
  display: flex;
  justify-content: start;
}
.private__profile-viewed {
  padding-right: 10px;
  padding-top: 10px;
}
.private__search-appearance {
  padding-left: 10px;
  padding-top: 10px;
  border-left: 1px solid #ebebeb;
}
.private__content-title {
  color: #0a66c2;
}
.private__rows-content {
  font-size: 0.8em;
}

.activity {
  background-color: white;
  padding: 20px 10px;
  padding-bottom: 10px;
  margin-top: 10px;
}
.activity__follower {
  font-size: 0.8em;
}
.activity__article {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}
.activity__thumb {
  aspect-ratio: 1;
  max-height: 55px;
  object-fit: cover;
  vertical-align: bottom;
}
.activity__content-col {
  flex: 1;
  line-height: 1.2;
}
.activity__content {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgb(0 0 0 / 0.9);
  font-weight: 500;
}
.activity__reaction {
  color: #5f6163;
  font-size: 0.8em;
  display: inline-block;
}
.see-all-btn {
  text-align: center;
  line-height: 2.5;
  display: inline-block;
  width: 100%;
  border-top: 1px solid #ebebeb;
  background-color: white;
}
.see-all-btn:hover {
  background-color: rgb(112 181 249 / 0.1);
}

.experience {
  background-color: white;
  padding: 20px 10px;
  margin-top: 10px;
}
.experience__summary {
  margin-top: 10px;
  display: flex;
  align-items: center;
  color: #5f6163;
}
.experience__company-thumb {
  height: 55px;
  aspect-ratio: 1;
  align-self: start;
  margin-right: 10px;
}
.experience__description-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.big-dot-wrapper {
  flex-basis: 55px;
  margin-right: 10px;
}
.big-dot {
  display: block;
  width: 0.5em;
  height: 0.5em;
  background-color: #b2b2b2;
  border-radius: 50%;
  margin-right: auto;
  margin-left: auto;
}
.experience__company-name {
  color: rgb(0 0 0 / 0.9);
  font-weight: 500;
}
.experience__details {
}
.experience__details-job-title-row {
  display: flex;
  align-items: center;
}
.experience__details-job-title {
  color: rgb(0 0 0 / 0.9);
  font-weight: 500;
}
.experience__details-job-edit {
  display: block;
  width: 25px;
  height: 25px;
  margin-left: auto;
}
.experience__location {
  font-size: 0.8em;
  font-weight: 500;
}
.experience__description {
  max-height: 5.5em;
  overflow: hidden;
  position: relative;
  color: rgb(0 0 0 / 0.6);
}
.experience__description-wrapper {
  border-left: 1px solid #b2b2b2;
  margin-left: 27.5px;
  padding-left: calc(27.5px + 10px);
}
.experience__description-more {
  position: absolute;
  bottom: 0.2em;
  padding-left: 10px;
  z-index: 1;
  background-color: white;
  right: 0;
  font-weight: 500;
  color: #5f6163;
}

.education {
  background-color: white;
  padding: 20px 10px;
  margin-top: 10px;
}
.education__item {
  margin-top: 10px;
  display: flex;
  color: #5f6163;
}
.education__company-thumb {
  height: 55px;
  aspect-ratio: 1;
  align-self: start;
  margin-right: 10px;
}
.education__name {
  color: rgb(0 0 0 / 0.9);
  font-weight: 500;
}
.education__edit {
  display: block;
  width: 25px;
  height: 25px;
  margin-left: auto;
}
.add-education {
  background-color: white;
  padding: 20px 10px;
  border-top: 1px solid #ebebeb;
  text-align: center;
  position: relative;
}
.add-education__close-btn {
  display: block;
  margin-left: auto;
  height: min-content;
}
.add-education__close-btn-img {
  width: 25px;
  aspect-ratio: 1;
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 10px;
  margin-right: 10px;
}
.add-education__main-img {
  width: 55px;
  aspect-ratio: 1;
  vertical-align: bottom;
}
.add-education__long-text {
  font-size: 0.8em;
  padding: 0 40px;
}
.add-education__main-btn {
  color: inherit;
  margin-top: 10px;
  line-height: 3;
  display: block;
  width: 100%;
  border: 1px solid #0a66c2;
  border-radius: 20em;
  font-weight: 500;
}
.add-education__main-btn:hover {
  background-color: rgb(112 181 249 / 0.1);
}

.volunteer {
  background-color: white;
  padding: 20px 10px;
  margin-top: 10px;
}

.skill {
  background-color: white;
  padding: 20px 10px;
  margin-top: 10px;
}
.skill__title {
  display: flex;
}
.skill__edit {
  display: block;
  width: 25px;
  height: 25px;
  margin-left: auto;
}
.skill__list {
  margin-top: 10px;
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  padding-left: 10px;
}
.skill__list-item {
  font-weight: 500;
}
.skill__list-item::after {
  content: "\00b7";
  font-weight: bold;
  margin: 0 10px;
}
.skill__list-item:last-child::after {
  content: "";
}

.recommendation {
  background-color: white;
  padding: 20px 10px;
  margin-top: 10px;
}

.accomplishment {
  background-color: white;
  padding: 20px 10px;
  margin-top: 10px;
}
.accomplishment__row {
  display: flex;
  margin-top: 10px;
}
.accomplishment__number-of-items {
  width: 55px;
  height: 55px;
  font-size: 2em;
  text-align: right;
  margin-right: 10px;
}
.accomplishment__type {
  font-weight: 500;
  color: rgb(0 0 0 / 0.9);
}
.accomplishment__details {
  width: calc(100% - 55px);
}
.accomplishment__item {
  margin: 10px 0;
  display: flex;
  align-items: start;
}
.accomplishment__name {
  color: rgb(0 0 0 / 0.9);
  font-weight: 500;
}
.accomplishment__item-right {
  width: 25px;
  margin-left: auto;
}
.accomplishment__edit {
  width: 100%;
  aspect-ratio: 1;
}
.accomplishment__see-more-btn {
  position: relative;
  color: #0a66c2;
  font-weight: 500;
}
.accomplishment__see-more-btn-chevron {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

.contact {
  background-color: white;
  padding: 20px 10px;
  margin-top: 10px;
}
.contact__title {
  display: flex;
}
.contact__edit {
  display: block;
  width: 25px;
  height: 25px;
  margin-left: auto;
}
.contact__row {
  display: flex;
  margin: 10px 0;
}
.contact__icon {
  width: 20px;
  height: 20px;
  aspect-ratio: 1;
  margin: 0 10px;
}
.contact__type {
  font-weight: 500;
}
.contact__info {
  max-width: calc(100% - 40px);
}
.content__info-link {
  overflow-wrap: break-word;
}

.other-profiles {
  padding: 20px 10px;
  border-top: 1px solid #b2b2b2;
}
.profile-row {
  margin-top: 20px;
  display: flex;
  align-items: center;
  color: inherit;
}
.profile__avatar {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 10px;
}
.profile__name {
  font-weight: 500;
  color: rgb(0 0 0 / 0.9);
}
.profile__relationship {
  font-size: 0.8em;
}
.profile__headline {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8em;
}
.profile__msg-btn,
.profile__add-connection-btn {
  margin-left: auto;
  min-width: 35px;
  min-height: 35px;
  border: 1.5px solid #b2b2b2;
  border-radius: 50%;
}
.profile__msg-btn:hover,
.profile__add-connection-btn:hover {
  background-color: rgb(0 0 0 / 0.04);
}
.profile__msg-btn-img,
.profile__add-connection-btn-img {
  width: 1.2em;
  aspect-ratio: 1;
  vertical-align: bottom;
}

.nav-bottom {
  height: 50px;
  background-color: white;
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: 100%;
  color: #5f6163;
  border-top: 1px solid #b2b2b2;
}
.nav-list {
  height: 100%;
  list-style: none;
  display: flex;
  text-align: center;
}
.nav-list__item {
  height: 100%;
  align-self: center;
  position: relative;
  flex-grow: 1;
  flex-basis: 20%;
}
.nav-list__item-btn-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  color: inherit;
  position: relative;
}
.nav-list__icon {
  align-self: center;
  height: 25px;
  width: 25px;
}
.nav-list__item-text {
  font-size: 0.8em;
}
.nav-list__item_bubble {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: 50%;
  margin-left: 5px;
  z-index: 1;
}

.cta-try-app {
  height: 70px;
  background-color: #f3f2f0;
  width: 100%;
  position: fixed;
  z-index: 999;
  bottom: 50px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  box-shadow: 0 0 20px rgb(0 0 0 / 0.7);
}
.cta-try-app__close-btn-img {
  width: 25px;
  vertical-align: middle;
}
.cta-try-app__message {
  margin-left: 10px;
  font-weight: 500;
}
.cta-try-app__continue-btn {
  margin-left: auto;
  margin-right: 10px;
  line-height: 2;
  background-color: #0a66c2;
  color: white;
  font-weight: 500;
  padding: 0 1em;
  border-radius: 1em;
}
.cta-try-app__continue-btn:hover {
  background-color: #004182;
}