#container {
  background-color: #f2f2f7;
  border: 6px solid #cac4d0;
  border-radius: 1rem;
  #chat-view {
    grid-template-rows: auto 1fr;

    .modal {
      .modal-button-panel {
        background-color: #2a2a2a !important;
        border: 0 !important;

        .modal-svg-camera-button,
        .modal-svg-refresh-button {
          margin: 0;
          margin-bottom: 3rem;
          margin-top: auto !important;
          position: absolute;
          bottom: 0;
          background: unset;
          scale: 2.8;
        }

        .modal-svg-close-button {
          position: absolute;
          top: 0.8rem;
          left: 0.6rem;
          margin: 0;
          border-radius: 50%;
          background: unset;
        }

        .modal-svg-submit-button {
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          margin: 0;
          margin-top: auto;
          margin-bottom: 3rem;
          right: 1.2rem;
          border-radius: 50%;
          scale: 1.8;
          min-width: 24px;
          min-height: 24px;
          background-color: #017021 !important;

          svg {
            padding: 0.5rem;
          }
        }

        .modal-svg-submit-disabled {
          display: none;
        }
      }
    }

    #chat-banner {
      margin: 0.4rem;
      margin-bottom: 0;

      .banner-container {
        display: flex;
        flex-flow: row wrap;
        gap: 10px;
        padding: 0.6rem;
        border-radius: 20px;
        background-color: white;

        img {
          border-radius: 50%;
        }
        div {
          display: flex;
          flex-flow: column wrap;
          justify-content: center;
          gap: 4px;

          h2 {
            margin: 0;
            font-size: 0.9rem;
          }

          span {
            border-radius: 30px;
            padding: 2px 4px;
            width: fit-content;
            font-size: 0.7rem;
            color: #399ca4;
            background-color: #d1f6f9;
          }
        }
      }
    }

    #messages {
      overflow-x: hidden;
      .outer-message-container {
        .deep-chat-messages {
          display: flex;
          gap: 10px;
          padding: 0.3rem;

          .deep-chat-button {
            min-width: 65px;
            border-radius: 8px !important;
            padding: 12px !important;
            border: 0 !important;
            font-weight: bolder;

            &.red {
              background-color: #ffe0e2 !important;
              color: #942323;
            }

            &.green {
              background-color: #d1faea !important;
              color: #1d6045;
            }
          }
        }

        .deep-chat-options {
          .deep-chat-button {
            display: block !important;
            background-color: transparent !important;
            text-align: left;
          }

          /* :not(.deep-chat-button:first-child) {
            margin-top: 0.5rem;
          } */
        }

        .sticker-container {
          img {
            width: 100px;
            object-fit: contain;
            height: 100px;
          }
        }

        .video-container {
          video {
            width: 100%;
          }
        }

        .inner-message-container {
          .text-message,
          .html-message {
            max-width: 85%;
          }

          .html-message {
            padding: 0;
          }

          .groupImg-message {
            flex-flow: column wrap;
            max-width: 24rem;

            .caption-wrapper {
              p {
                margin: 0.5rem;
              }
            }
          }

          .groupQuickButtons-message {
            .deep-chat-options {
              display: flex;
              gap: 10px;
              flex-wrap: wrap;

              .deep-chat-button {
                flex-grow: 1;
                text-align: center;
                padding: 8px 7px !important;
                background-color: white !important;
                font-weight: bold;
              }
            }
          }

          .groupList-message {
            .deep-chat-list-item {
              h4 {
                margin: 0;
                margin-bottom: 0.5rem;
              }

              .list-wrapper {
                padding: 0 1rem;
                .deep-chat-button {
                  width: 100%;
                  margin-bottom: 0.2rem;
                  padding: 8px 7px !important;
                  .item-wrapper {
                    pointer-events: none;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;

                    p {
                      margin: 0;
                      width: 100%;
                      text-align: left;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .input-wrapper {
      display: flex;
      margin: 0.4rem;
      margin-top: 0;
      #input {
        #file-attachment-container {
          height: 6.6em;
          top: -5em;
          .file-attachment {
            width: 5.05em;
            height: 5.05em;
          }
        }

        .input-button-container {
          .input-button {
            #submit-icon {
              height: 100%;
              filter: unset;
              width: 0.85rem;
            }
          }
        }
      }
    }
  }
}

@media (min-width: 1025px) {
  .text-input-container-right-small-adjustment {
    margin-right: 2em;
  }

  #container {
    #chat-view {
      .input-wrapper {
        #input {
          scale: 1.15;
        }
      }
    }
  }
}

@media screen and (min-width: 0px) and (max-width: 760px) {
  #container {
    #chat-view {
      .modal {
        max-width: unset;
        max-height: unset;
        width: 100%;
      }
      #messages {
        .outer-message-container {
          .inner-message-container {
            .groupImg-message {
              max-width: 16rem;
            }
          }
        }
      }
    }
  }
}