body {
  background-attachment: fixed;
  background-color: #003eaa;
  background-image: radial-gradient(circle at bottom right, #0006, #fff3);
  background-position  : center center;
  background-repeat    : no-repeat;
  background-size      : cover;
  font-family          : "Figtree", sans-serif;
  font-size            : 1.5rem;
}


.section,
#chatbox {
  max-height: 100vh;
  height    : 100vh;
}

#chatbox {
  box-shadow: 0px 0px 10px #737373;
  overflow-y: auto;
}

.card-img-top {
  width       : auto;
  height      : 4ch;
  margin-block: 2rem;
  align-self: center;

}


.required::after {
  content: "*";
  color  : red;
}

.btn {
  font-size: inherit;
}

#message-container {
  position       : relative;
  display        : flex;
  flex-direction : column;
  justify-content: space-between;
}

.incoming-balloon,
.outgoing-balloon {
  width        : fit-content;
  max-width    : 66%;
  height       : auto;
  border-radius: 20px;
  padding      : 0.5rem 1rem;
  margin       : 1rem;
  overflow     : hidden;
}

.incoming-balloon p,
.outgoing-balloon p {
  margin: 0;
}

.incoming-balloon,
.typing {
  background-color: #e5f1ff;
  color           : #2c2b27;
  align-self      : flex-start;
}

:is(.incoming-balloon,
  .typing) :is(strong, b, em, i) {
  color: #161513;
}

.incoming-balloon .btn-group,
.balloon-action {
  margin-inline     : -1rem;
  margin-block-end  : -0.5rem;
  display           : flex;
  margin-block-start: 1rem;
}

.incoming-balloon .btn-group .btn {
  border-radius: 0;
}

.btn-primary {
  --bs-btn-bg                : #025e7e;
  --bs-btn-border-color      : #025e7e;
  --bs-btn-hover-bg          : #06485f;
  --bs-btn-hover-border-color: #06485f;
}

.outgoing-balloon {
  background-color: #ececec;
  align-self      : flex-end;
}

.typing {
  display         : inline-block;
  width           : 0.8rem;
  height          : 0.8rem;
  margin-right    : 0rem;
  box-sizing      : border-box;
  background-color: #025e7e;
  border-radius   : 50%;
}

.typing-1 {
  animation: typing 3s infinite;
}

.typing-2 {
  animation: typing 3s 250ms infinite;
}

.typing-3 {
  animation: typing 3s 500ms infinite;
}

.input-custom-color {
  background-color: rgb(229, 239, 239);
}

.border-custom-color {
  border: 1px solid rgb(229, 239, 239);
}

.input[type="text"] {
  font-size: 25px;
  /* Adjust as needed */
}

.message-buttons {
  min-width: 100%;
}

.form-control {
  font-size: inherit;
}

.form-reminder-message {
  color           : #757575;
  background-color: rgb(229, 239, 239);
  padding         : 11px 11px 1px 11px;
  border-radius   : 5px;
  margin          : 15px auto 0 auto;
}

@keyframes typing {

  0%,
  75%,
  100% {
    transform: translate(0, 0.25rem) scale(0.9);
    opacity  : 0.5;
  }

  25% {
    transform: translate(0, -0.25rem) scale(1);
    opacity  : 1;
  }
}

#compose-message {
  margin-inline   : -1rem;
  margin-block-end: -1rem;
  position        : sticky;
  bottom          : 0;
}

#compose-message :is(.col-8, .row, .col-2) {
  display: contents;
}

#compose-message form {
  display           : flex;
  flex-wrap         : wrap;
  gap               : 1ch;
  padding           : 1ch;
  background-color  : var(--bs-secondary-bg);
  border-block-start: 1px solid var(--bs-border-color);
  position          : sticky;
  bottom            : 0;
  align-items       : center;
}

#compose-message :is(.message-buttons, textarea) {
  min-width: 0;
  width    : auto;
}

#compose-message textarea {
  flex      : 1;
  min-height: 1rem;
  max-height: 5rem;
  height    : 100%;
  font-size : 1rem;
}
.incoming-balloon img {
  width        : calc(100% + 2rem);
  height       : auto;
  margin-inline: -1rem;
}

.incoming-balloon:has(img) {
  padding-block-end: 0;
}

.card-body {
  padding: 0 !important;
}

.text-muted {
  font-size: 1rem;
}

body {
  background-color: #003eaa;
  background-image: radial-gradient(circle at bottom right, #0006, #fff3);
}