.chat-section { display: flex; flex-direction: column; padding: 0; height: 100%; background: transparent; border-radius: 0.625rem; }
.chat-section__body { width: 100%; height: 100%; padding: 1rem; max-height: 100%; overflow: auto;overflow-x: hidden; }
.chat-section__body .chat-section__message { padding: 0; color: #000000; display: flex; align-items: flex-start; margin-bottom: 1.5rem; width: 100%; }
.chat-section__body .chat-section__text { padding: 0; margin-left: 0.4375rem; width: 100%; font-size: 1.125rem; background: #fff; border-radius: 5px; box-shadow: 0px 0px 2.125rem rgba(0, 0, 0, 0.23); }
.chat-section__body .chat-section__message.chat-section__message--received { padding-right: 3.5rem; }
.chat-section__body .chat-section__message.chat-section__message--sent { padding-left: 3.5rem; align-self: flex-end; }
.chat-section__body .chat-section__message.chat-section__message--sent .chat-section__text-header { color: #fff; background: #141414; }

.chat-section__text-header { padding: 0.75rem 1rem; display: flex; border-radius: 5px 5px 0 0; align-items: center; background: #E3E3E3; }
.chat-section__text-header > div { padding-left: 1rem; }
.chat-section__text-header h3 { font-size: 1rem; font-weight: 600; }
.chat-section__text-header h4 { font-size: 1rem; }
.chat-section__text-header .user-icon { padding-left: 0; display: flex; align-items: center; justify-content: center; float: left; height: 2.5rem; width: 2.5rem; font-size: 0.875rem; border-radius: 50%; color: #fff; background: #705395; }
.chat-section__text-header .user-icon.user-icon2 { background: #538995; }
.chat-section__text-header .user-icon.user-icon3 { background: #535E95; }

.chat-section__body .chat-section__text-body { padding: 1rem; }
.chat-section__body .chat-section__text-body p { font-size: 1rem; }

.chat-section__footer { padding-top: 1.5rem; display: flex; align-items: center; position: absolute;
    bottom: 0;
    left: 0;
    right: 0; }
.chat-section__form { width: 100%; position: relative; display: flex; align-items: center; justify-content: space-between; }
.chat-section__input { padding: 1.45rem; resize: none; font-family: "ProximaNova", 'Avenir Next Regular', sans-serif; border: none; font-size: 1rem; height: 2.125rem; width: 100%; color: #fff; box-shadow: 0px 0.2857rem 1rem rgba(0, 0, 0, 0.15);
     /* border-radius: 0.714rem; */
    padding-left: 3rem;
    padding-right: 3rem; background: rgba(13, 13, 13, 0.85);
    backdrop-filter: blur(7px);
    overflow: hidden;
}
.chat-section__input2{
    border-radius: 0.714rem;
    padding-left: 1rem; padding-right: 1rem;
}
.chat-section__btn:focus, .chat-section__input:focus { outline: none; }
.chat-section__btn { position: absolute; right: 0; top: 0; padding: 0.5rem; border: medium none; width: 4rem; height: 100%; font-size: 1rem; color: #fff; background: transparent;}
.chat-section__btn i { line-height: 1.875rem; }

/* Desktop */
@media only screen and (min-width: 992px) {
    .chat-section { margin: 0 auto; height: 30rem;}
    .chat-section__header { min-height: 3.875rem; }
    .chat-section__form { width: 100%; margin: 0 auto; }
    .chat-section__body { padding: 0 1rem; }
}