.messagesScreenLeftSide{
    height: 100%;
    overflow-x: hidden;
}

.messagesScreen{
    height:calc(100vh - 120px);
    /*overflow: hidden;*/
}

.messagesScreenForm{
    margin-top: -12px;
}

.messagesScreenAlert {
    margin-top: calc(50vh);
}

.bg-transparent {
    background-color:transparent !important;
}

.no-right-border{
    border-right: none !important;
}

.no-left-border{
    border-left: none !important;
}

.border-top-dot {
    border-top:1px dotted lightgray;
}

.border-bottom-dot {
    border-bottom: 1px dotted lightgray;
}

.marginBottom20 {
    margin-bottom: 20px; 
}

.previewTitle {
    font-weight: bold; 
    font-size: 1.2em;
}

.maxWidth75Percent {
    max-width: 80%;
}

.separator-with-text {
    display: flex;
    align-items: center;
    text-align: center;
}
.separator-with-text::before, .separator-with-text::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
}
.separator-with-text::before {
    margin-right: .25em;
}
.separator-with-text::after {
    margin-left: .25em;
}

.max-content-width{
    width: max-content !important;
    max-width: 500px;
}

.blue{
    color: royalblue;
}

.black {
    color: black;
}

.white {
    color: white;
}

.gray {
    color: gray;
}

.bgGray {
    background-color: gray;
}

.font-size-large {
    font-size: large !important;
}

.font-size-medium {
    font-size: medium !important;
}

.max-height-100 {
    max-height: 100px;
}

.square-image{
    position:relative;
    overflow:hidden;
    padding-bottom:25%;
}
.square-image img{
      position: absolute;
      max-width: 100%;
      max-height: 100%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
}

.crossed {
    background:
        linear-gradient(to top left,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0) calc(50% - 0.8px),
            rgba(0,0,0,1) 50%,
            rgba(0,0,0,0) calc(50% + 0.8px),
            rgba(0,0,0,0) 100%),
        linear-gradient(to top right,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0) calc(50% - 0.8px),
            rgba(0,0,0,1) 50%,
            rgba(0,0,0,0) calc(50% + 0.8px),
            rgba(0,0,0,0) 100%);
}

.link {
    color:#0482ba;
}

.previewFromMeBody {
    background-color: #D1F4CC;
    border-radius: 5px;
}

.previewFromOtherUserBody {
    background-color: #bddef6;
    border-radius: 5px;
}

.contact-wrapper {
    display: flex;
    align-items: center;
}

.contact-icon-container {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    flex-shrink: 0;
}

.contact-icon-container i {
    font-size: 24px;
}

.contact-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.contact-name {
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

.padding20 {
    padding: 20px;
}

.previewFromMeLoading {
    position: relative;
    margin: 0 auto;
    background: linear-gradient(to right, #D1F4CC, #a0bf9c);
    background-size: 200% 100%;
    background-position-x: 175%;
    animation: 1s loading ease-in-out infinite;
}

.previewFromOtherUserLoading {
    position: relative;
    margin: 0 auto;
    background: linear-gradient(to right, #bddef6, #88a0b2);
    background-size: 200% 100%;
    background-position-x: 175%;
    animation: 1s loading ease-in-out infinite;
}

@keyframes loading {
    to {
      background-position-x: -25%;
    }
  }