#profileImage {
    position: relative;
    cursor: pointer;
    float: left;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    margin-right: 40px;
  }

  #resultImage {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: none;
    overflow: hidden;
  }

  #resultImage img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .editImage,
  .trashImage {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: none;
      background-color: white;
      border: 1px solid black;
      cursor: pointer;
    }

  .editImage img,
  .trashImage img {
      position: absolute;
      width: 15px;
      height: 15px;
      top: 0; 
      left: 0; 
      bottom: 0; 
      right: 0; 
      margin: auto;
      object-fit: contain;
  }

  .editImage {
    display: block;
  }


.fullprofileImage {
    position: fixed; 
    top: 0;
    z-index: 14;
    width: 100%;
    height: calc(100% - 60px);
    padding: 30px 0;
    background-color: white;
    text-align: center;
}


.fullprofileImage h4 {
    color: #333;
    margin: 30px auto;
}

.containerImage {
    position: relative;
    top: 0;
    margin: 0 auto;
    max-width: 400px;
    max-height: 400px;
    width: 100%;
    height: calc(100% - 200px);
}

.containerImageProfile {
  position: relative;
  float: left;
  width: 150px;
  height: auto;
  margin-right: 40px;
}
  

#buttonCropCancel,
#buttonCrop {
    position: relative;
    display: inline-block;
    text-align: center;
    margin: 20px auto;
    width: auto;
    height: auto;
    padding: 10px 15px;
    background-color: #05d450;
    /* border: 1px solid black; */
    color: black
}

#buttonCropCancel {
  background-color: white;
  border: 1px solid black;
  color: black
}


@media (max-width: 820px) {
  #profileImage {
    position: relative;
    cursor: pointer;
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    margin-right: 0;
  }

  #resultImage {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: none;
    overflow: hidden;
  }

  .containerImageProfile {
    position: relative;
    float: left;
    width: 120px;
    height: auto;
    margin-right: 40px;
  }
  
}