.body {
  font-family: "Poppins";
}

.card-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 24%;
}

.card-header[data-has-floating-images="true"][data-floating-left="profile"] {
  margin-bottom: 13.5%;
}

.card-header[data-image-type="cover"] {
  padding-top: 56%;
}

.banner-image-container {
  width: 100%;
}

.card-header .banner-image[data-image-type="cover"],
.card-header
  .banner-image[data-image-type="logo"]:not([data-editor-version="none"]) {
  object-fit: cover;
}

.card-header .banner-image {
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  object-position: center center;
  left: 0px;
  top: 0px;
}

.left-picture {
  transition: box-shadow 0.2s, opacity 0.2s;
  position: absolute;
  background: #fff;
  transform-origin: center;
  will-change: transform;
  z-index: 2;
  left: 5%;
}

.left-picture[data-image-type="profile"] {
  width: 27%;
  padding-top: 27%;
  border-radius: 50%;
}

.left-picture[data-image-type="profile"] .left-picture-img {
  border-radius: 50%;
}

.left-picture .left-picture-img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center center;
  box-shadow: 0 2px 4px 0 rgba(22, 29, 37, 0.1);
}

.right-picture {
  border-radius: 5px;
  transition: box-shadow 0.2s, opacity 0.2s;
  position: absolute;
  background: #fff;
  transform-origin: center;
  will-change: transform;
  z-index: 2;
  right: 5%;
  width: 35.5555555556%;
  padding-top: 20%;
}

.right-picture .right-picture-img {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(22, 29, 37, 0.1);
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center center;
}

.card-page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: rgba(var(--accent-color));
  padding: 2rem 0;
  font-size: small;
  font-family: "Poppins";
}

.card {
  max-width: 500px;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background: #fff;
  width: 100%;
  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
    rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
  font-size: small;
  font-family: "Poppins";
}

.user-details {
  margin: 1rem;
  overflow-wrap: break-word;
}

.title {
  color: grey;
  font-size: 18px;
  margin-top: -20px;
}

.detail-list {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.detail-list .detail-item {
  min-height: 45px;
  display: flex;
  align-items: center;
  margin: 1px;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.detail-list .detail-icon-circle {
  width: 40px;
}

.detail-list .detail-data {
  display: flex;
  margin-left: 0.875rem;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  text-align: left;
  overflow: hidden;
}

.detail-list .detail-data-value a {
  font-size: 1rem;
  font-weight: 600;
  width: 100%;
  line-height: 1.4;
  display: flex;
  align-items: baseline;
  text-decoration: none;
  color: black;
}

.detail-list .detail-data-value + .detail-data-label {
  margin-top: 0.125rem;
}

.save-btn-container {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  position: sticky;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.9) 40%
  );
  padding: 1.5rem 2rem calc(1.75rem + var(--bottom-safety-height, 0rem));
  z-index: 1;
  font-family: "Poppins";
}

.save-btn {
  max-width: 220px;
  width: 100%;
  position: relative;
  padding: 0.75rem 2.5rem;
  border-radius: 50px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 1.2rem;
  background: rgb(var(--card-color));
  color: black;
  border: unset;
  box-shadow: 0 1px 5px 0 rgba(82, 93, 102, 0.25),
    0 2px 8px 0 rgba(82, 93, 102, 0.15);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-family: "Poppins";
}