.postFormContainer{
    display: flex;
    padding: var(--spacing);
    border-bottom: 10px solid var(--lightgrey);
    flex-shrink: 0;
    position: relative;
}
.postDestinationContainer{
    position :absolute;
    top:-3px;
    right:0;
}
.postDestination{
    font-size: small;
    font-weight: 300;
    border-radius: 8px;
    white-space: nowrap; 
    max-width: 200px; 
    overflow: hidden;
    text-overflow: ellipsis; 
    padding: 1px 1px 2px 1px;

}
.userImageContainer{
    width: 35px;
    height: 35px;
}
.userImageContainer img{
   width: 100%;
   border-radius: 10px;
   background-color: white;
}

.textareaContainer{
    flex: 1;
    padding-left: var(--spacing);
    max-width: 90%;
}

.textareaContainer textarea{
    width: 100%;
    border: none;
    resize: none;
    font-size: 16px;
}
.textareaContainer textarea:focus{
   outline: navy;
}

#submitPostButton{
    /* color:white; */
    background-color: var(--mo-primary);
    border:none;
    border-radius: 10px;
    padding: 5px 15px;
    color: black;
}

#submitPostButton:disabled{
    background-color: var(--mo-primary-border-subtle);
    color: var(--mo-gray-500);
}

.replyFormContainer {
    display: flex;
    padding: var(--spacing);
    border: none;
    flex-shrink: 0;
}
#originalPostContainer .post{
    padding:0 0 var(--spacing) var(--spacing);
}

/* extras */
.otherButtons{
    margin-top: 12px;
}
.otherButtons .others{
    cursor: pointer;
    position: relative;
    margin-right: -10px;
}
.others.uploadButtons{
    width: 13px;
    cursor: pointer;
}
.others.uploadButtons label{
    cursor: pointer;
}

.mediaUploadButton{
    background-color: #064bb1;
    max-width: 27px;
    position: absolute;
    left: -5px;
    top: -5px;
    /* opacity: 0.01; */
    display: none;
    
}


.mediaUploadIcon{
    position: absolute;
    left: 0;
    top: 5.1px;
    
}
.gifButton{
    margin-top: -1.6px;
}
.gif{
    font-size: 10px;
    height: 20px;
    margin-top: -2px;
    border: 1px dotted var(--mo-info);
    padding-top: 1px;
    cursor: pointer;
}
.mediaArea{
    /* height: 40px; */
    /* max-height: 40px; */

    /* background: yellow; */
    padding: 15px 0 5px 0;
    /* width: 300px; */
}
.mediaContainer{
    height: 40px;
}
.postMediaPreview{
    width: 75px;
    max-width: 100px;
    margin-right: 10px;
    display: flex;
    position: relative;
}
.postMediaPreviewItem{
    /* width: 100%;
    height: auto; */
    flex: 1;
    /* object-fit: contain;the replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box */
    object-fit: cover; /*ensures the image covers the entire container*/
    /* object-position: center; /*centers the image horizontally and vertically */
    width: 100%; /*scales the image to the width of the container */
    /* height: 100%; scales the image to the height of the container */
    max-height: 180px;
    border-radius: 10px;
}
.removeButton{
    position: absolute;
    background-color: #0024585e;
    color: white;
    width: 30%;
    display: flex;
    justify-content: center;
    top: 0;
    right:0;
    border-radius: 7px;
}
.removeButton::after{
    content: " x "
}
.removeButton:hover{
    background: var(--mo-danger);
}





/* mediaplayer */
.mediaPlayerModal{
    background: #000000f5;
}
.mediaPlayerModal .modal-content{
    background: none;
}
/* .mediaPlayerModal .modal-content{
    background: none;
} */
.mediaPlayerModalHeader{
    position: relative;
}
.closeMediaButton{
    font-weight: 100;
    border-radius: 50%;
    padding: 3px 10px;
    opacity: 0.91;
    position: absolute;
    top: -16px;
    right: -6px;
    border: 1px solid gray;
    z-index: 999;
}
.mediaPlayerNext{
    right: -42px;
}
.mediaPlayerPrev{
    left: -42px;
}
.mediaPlayerCarouselIndicators{
    bottom: -80px;
    height: 50px;
    padding: 10px;
}
.mediaPlayerIndicator{
    border: 1.5px solid  rgb(0 0 0 / 58%) !important;
    border-radius: 10px;
}
.mediaPlayerModal .carousel-control-prev-icon:hover, .mediaPlayerModal .carousel-control-next-icon:hover{
    background-color: rgb(0 0 0 / 58%);
    border-radius: 10px;

}

emoji-picker{
    z-index: 999;
    left: -50px;
}



/*GROWING TEXT-AREA*/
/* 
The trick is that you exactly replicate the content of the <textarea> in an element that can auto expand height, 
and match its sizing.
1. So you’ve got a <textarea>, which cannot auto expand height.
2. Instead, you exactly replicate the look, content, and position of the element in another element. 
3. You hide the replica visually (might as well leave the one that’s technically-functional visible).


Now all three elements are tied to each other. 
    Whichever of the children is tallest is will push the parent to that height, and the other child will follow. 
    This means that the minimum height of the <textarea> will become the “base” height, 
    but if the replicated text element happens to grow taller, everything will grow taller with it.

So clever. I love it so much.
*/

.grow-wrap {
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    display: grid;
  }
  .grow-wrap::after {
    /* Note the weird space! Needed to preventy jumpy behavior */
    content: attr(data-replicated-value) " ";
  
    /* This is how textarea text behaves */
    white-space: pre-wrap;
  
    /* Hidden from view, clicks, and screen readers */
    visibility: hidden;
  }
  .grow-wrap > textarea {
    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
    resize: none;
  
    /* Firefox shows scrollbar on growth, you can hide like this. */
    overflow: hidden;
  }
  .grow-wrap > textarea,
  .grow-wrap::after {
    /* Identical styling required!! */
    /* border: 1px solid black; */
    /* padding: 0.5rem; */
    font: inherit;
  
    /* Place on top of each other */
    grid-area: 1 / 1 / 2 / 2;
  }