.MediaContainer, .ProfileImage {
  width: auto;
  height: auto;
  position: relative;
  display: flex;
  margin: auto;

  text-align: center;
  
  justify-items: center;
  align-items: center;

  background: transparent;
  min-width: 28px;
  min-height: 28px;


  border: 3px solid #d6e0f5;

}

.MediaContainer {
  border-radius: 3px;
}

.ProfileImage {
  border-radius: 50%;
}


.MediaContainer .MediaTag {
  position: relative;

  -webkit-box-shadow: 0px 0px 18px -4px rgba(181,177,181,1);
  -moz-box-shadow: 0px 0px 18px -4px rgba(181,177,181,1);
  box-shadow: 0px 0px 18px -4px rgba(181,177,181,1);
}


.ProfileImage img{
  position: relative;
  border-radius: 50%;
}


.MediaUploadBtn {
  position: absolute;
  background: #d6e0f5;/*#1DA1F2;#00B4FF;*/
  width: 32px;
  height: 32px;
  line-height: 33px;
  text-align: center;
  border-radius: 50%;
  overflow: hidden;
  /*top: calc(100% - 16px);
  right: -16px;

  background-image: url('./icon165b.png');*/
  background-repeat: no-repeat;
  background-position: center;*

/* 
  border: 1px solid #c1d0f0;
  */

  -webkit-box-shadow: 0px 0px 18px -4px rgba(181,177,181,1);
  -moz-box-shadow: 0px 0px 18px -4px rgba(181,177,181,1);
  box-shadow: 0px 0px 18px -4px rgba(181,177,181,1);
}



.MediaContainer .MediaUploadBtn {
  top: calc(100% - 16px);
  right: -16px;

  background-image: url('../images/icon165b.png');
}

.ProfileImage .MediaUploadBtn {
  background-image: url('../images/icon94b.png');
}





.MediaUploadBtn input[type = "file"] {
  transform: scale(2);
  opacity: 0;

}

.MediaUploadBtn input[type="file"]::file-selector-button {
    cursor: pointer;
  
}





.MediaClearBtn {
  position: absolute; /* Sit on top of the page content */
  background: #ffff;/*#d6e0f5;#1DA1F2;#00B4FF;*/
  width: 28px;
  height: 28px;
  /*line-height: 33px;*/
  text-align: center;
  border-radius: 50%;
  overflow: hidden;
  top: calc(50% - 14px);
  right: calc(50% - 14px);

  background-image: url('../images/icon120b.png');
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */

-webkit-box-shadow: 0px 0px 18px -4px rgba(181,177,181,1);
  -moz-box-shadow: 0px 0px 18px -4px rgba(181,177,181,1);
  box-shadow: 0px 0px 18px -4px rgba(181,177,181,1);


  transition: opacity 1s ease-out;
  opacity: 0;
}



/*
img[src=""] {
    display: none;
}

img[src="./ui3.png"] {
    display: block;
}
*/


.MediaContainer:hover .MediaClearBtn {
  opacity: 0.6;
}

.ProfileImage:hover .MediaClearBtn {
  opacity: 0.6;
}