.vm-cover-photo-camera-icon-wrapper {
  float: right;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
  background-color: white;
  border-radius: 4px;
  padding: 6px 6px 6px 6px;
  position: absolute;
  right: 20px;
  bottom: 15px;  
}

.vm-cover-photo-camera-icon-wrapper > .fas.fa-camera {
  font-size: 16px;
  margin-right: 5px;
  color: var(--link-color);
}

.vm-cover-photo-camera-icon-wrapper > span {
  font-size: 12px;
  font-weight: bold;
  padding-top: 1px;
  color: var(--link-color);
}

.vm-cover-photo-camera-icon-wrapper {
  transition: background-color 0.3s ease;
}

.vm-cover-photo-camera-icon-wrapper:hover {
  background-color: rgba(256, 256, 256, 0.85); 
}

@media screen and (max-width: 768px) {
  .vm-cover-photo-camera-icon-wrapper {
    width: 40px;
    height: 40px;
    padding: 0;
    right: 12px;
    bottom: 12px;
    border: 1px solid #ccd0d5;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  }

  .vm-cover-photo-camera-icon-wrapper > .fas.fa-camera {
    margin-right: 0;
    color: var(--link-color);
  }

  .vm-cover-photo-camera-icon-wrapper > span {
    display: none;
  }

  .vm-cover-photo-camera-icon-wrapper:hover {
    background-color: #f0f2f5;
  }
}

.vm-cover-image-bg {
  height: 250px;
  border-radius: 8px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #17283d;
  cursor: pointer;
}

.vm-cover-image-bg--image {
  height: auto;
}

.vm-cover-image {
  cursor: pointer;
}

.vm-cover-image-bg > img {
  cursor: zoom-in;
}

.vm-cover-image-bg-default {
  display:flex; 
  align-items:center; 
  justify-content:center; 
  background-color:grey; 
  color:#fff;
}

.vm-cover-image-bg-default > img {
  max-width: 100%;
  height: 150px;
}

.vm-cover-image:hover .vm-cover-photo {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(142, 142, 142, 0.2);
  transition: opacity 0.3s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

.vm-banner-container {
  background: #fff;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.vm-header-image {
  min-height: 100px;
  max-height: 350px;
  overflow: hidden;
  text-align: center;
  position: relative;
}

.vm-header-image img {
  width: 100%;
}

/* Cover-photo crop area: same responsive treatment, at the banner's 1100:350 ratio.
   min-height keeps the cropper usable for wide, non-square source images, where
   width * 350/1100 alone would otherwise collapse the box too short. */
.banner-crop-content {
  width: 100%;
  height: 400px;
  width: min(600px, 100%);
  height: calc(min(600px, var(--crop-available-width)) * 350 / 1100);
  min-height: 320px;
  margin: auto;
}

#banner-crop-image {
  display: block;
  max-width: 100%;
}

.vm-profile-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  min-width: 0;
  max-width: 100%;
}

.vm-profile-container .fl-row-content-wrap {
  min-width: 0;
  max-width: 100%;
}

.vm-profile-wrapper {
  display: flex;
  /* max-width: 90%; */
  width: 100%;
  min-width: 0;
  overflow: hidden;
  z-index: 999;
  margin-top: -104px;
  margin-left: 42px;
}

.vm-profile-pic {
  position: relative;
  z-index: 9;
}

.vm-profile-pic .vm-profile-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  background-color: #eee;
  border-radius: 100%;
  overflow: hidden;
  border: 3px solid white;
}

.vm-profile-pic .vm-profile-photo:hover {
  cursor: pointer;
}

.vm-profile-pic .vm-profile-photo > .fas.fa-user {
  font-size: 100px;
  color: #ccc;
}

.vm-profile-pic .vm-profile-photo img {
  width: 100% !important;
  height: auto;
}

.vm-profile-pic img {
  width: 150px;
  height: 150px;
  object-fit: cover;
}

.vm-profile-pic #profile-upload-user-photo {
  position: absolute;
  right: 10px;
  top: auto;
  z-index: 9999;
  bottom: 0;
  cursor: pointer;
}

.vm-profile-pic #profile-upload-user-photo:hover {
  text-decoration: none;
}

.vm-profile-photo {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
}

.vm-profile-photo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(142, 142, 142, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.vm-profile-photo:hover::after {
  opacity: 1;
}

.vm-profile-pic #profile-upload-user-photo i {
  display: flex;
  align-items: center;
  padding: 5px;
  background-color: #fff;
  border: 2px solid transparent;
  border-radius: 50%;
  overflow: hidden;
  font-size: 24px;
  margin-top: -20px;  
  color: var(--link-color, #050505);
  transition: background-color 0.3s ease-in-out;
}

.vm-profile-pic #profile-upload-user-photo i:hover {
  background: rgba(250, 250, 250, 1);
}

.vm-profile-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 85px;
  padding: 15px 0;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.vm-profile-details h1 {
  margin: 0;
}

/* Truncate name based on available width (flexible, no fixed max-width) */
.vm-profile-details,
.vm-profile-details .vm-status {
  min-width: 0;
  overflow: hidden;
}

.vm-truncate-text {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Square crop area that shrinks with the modal width and the viewport height, so
   the Cropper canvas never overflows the modal on mobile. Width and height resolve
   to the same value (see --crop-available-width on .crop-modal), which keeps the
   box square without relying on aspect-ratio — an in-flow <img> inflates the block
   height and wins over aspect-ratio before Cropper replaces it.
   The plain declarations are the fallback for browsers without min(). */
.profile-crop-content {
  width: 100%;
  height: 400px;
  width: min(400px, 70vh, 100%);
  height: min(400px, 70vh, var(--crop-available-width));
  min-height: 220px;
  margin: auto;
}

#profile-crop-image {
  display: block;
  max-width: 100%;
}

.vm-crop-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.crop-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  background-color: white;
  padding: 0;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
  max-width: 92vw;
  max-height: 90vh;
  overflow: auto;
  /* Width available to the crop area: the mobile modal width minus its padding.
     Used by the crop-content rules above to stay inside the modal. */
  --crop-available-width: calc(92vw - 40px);
}

.crop-modal * {
  box-sizing: border-box;
}

.crop-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 16px 20px;
  border-bottom: 1px solid #dadde1;
}

.crop-modal__header h3 {
  margin: 0;
  color: #050505;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.crop-modal__close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e4e6eb;
  color: #050505;
  appearance: none;
  font-size: 0;
  line-height: 1;
}

.crop-modal__close::before,
.crop-modal__close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  content: '';
}

.crop-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.crop-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.crop-modal__close:hover {
  background: #d8dadf !important;
  color: #050505 !important;
}

.banner-crop-content,
.profile-crop-content {
  overflow: hidden;
  border-radius: 8px;
  background: #1c1e21;
}

/* Explicit widths keep the fixed-position modal from shrink-to-fitting around
   the cropper canvas; min() caps them to the viewport on small screens.
   400px / 600px content + 2 x 20px padding preserves the desktop sizing. */
#profile-crop-modal {
  width: 440px;
  width: min(440px, 92vw);
}

#banner-crop-modal {
  width: 640px;
  width: min(640px, 92vw);
}

.crop-buttons {
  display: flex; 
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: stretch;
  align-content: stretch;
  padding: 16px 20px;
  border-top: 1px solid #dadde1;
}

.crop-modal .crop-buttons button {
  min-height: 36px;
  margin: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: 6px;
  background: #e4e6eb !important;
  color: #050505 !important;
  font: inherit;
  font-weight: 600;
}

.crop-modal .crop-buttons button:last-child {
  background: var(--primary-color, #2a7ab0) !important;
  color: var(--primary-on, #fff) !important;
}

.crop-modal .crop-buttons button:hover {
  background: #d8dadf !important;
}

.crop-modal .crop-buttons button:last-child:hover {
  background: var(--primary-hover, #1a5a80) !important;
}

@media only screen and (max-width: 768px) {
  .vm-banner-container.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 0 !important;
  }

  .vm-cover-image-bg {
    border-radius: 0 !important;
  }

  .vm-cover-image-bg:not(.vm-cover-image-bg--image) {
    height: 150px;
  }

  .vm-cover-image-bg > img {
    border-radius: 0 !important;
  }

  .vm-profile-wrapper {
    margin-top: -60px;
    margin-left: 15px;
    align-items: flex-end;
  }

  .vm-profile-pic .vm-profile-photo {
    width: 100px;
    height: 100px;
  }

  .vm-profile-pic img {
    width: 100px;
    height: 100px;
  }

  .vm-profile-info {
    margin-top: 0;
    padding-bottom: 8px;
    min-width: 0;
  }

  .vm-profile-pic #profile-upload-user-photo {
    top: auto;
    right: 5px;
    bottom: 0;
  }

  .vm-profile-pic #profile-upload-user-photo i {
    font-size: 18px;
    padding: 4px;
  }
}

@media only screen and (max-width: 480px) {
  .vm-profile-wrapper {
    margin-left: 10px;
    align-items: flex-end;
  }

  .vm-profile-pic .vm-profile-photo {
    width: 80px;
    height: 80px;
  }

  .vm-profile-pic img {
    width: 80px;
    height: 80px;
  }

  .vm-profile-wrapper {
    margin-top: -45px;
  }

  .vm-profile-info {
    margin-top: 0;
    padding: 0 0 6px;
  }

  .vm-profile-details h1 {
    font-size: 1.2em;
  }
}