input,
button,
textarea,
select {
  font: inherit;
}

textarea {
  border: none;
  background-color: transparent;
  resize: none;
  outline: none;
}

textarea {
  width: 100%;
  /* background-color: red; */
}

pre {
  white-space: pre-wrap;
}

button {
  all: unset;
  cursor: pointer;
}

/* Icon */
span>svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
}

h1 {
  font-size: inherit;
}

.text-lg {
  font-size: 1.25rem;
}

.text-xl {
  font-size: 1.6rem;
}

/* https://csshero.org/mesher/ */
.bg-pleasant {
  background-color: hsla(201, 100%, 98%, 1);
  background-image:
    radial-gradient(at 77% 48%, hsl(199.3, 100%, 94.5%) 0px, transparent 50%),
    radial-gradient(at 63% 16%, hsl(37.5, 88.9%, 85.9%) 0px, transparent 50%), 
    radial-gradient(at 28% 66%, hsl(208, 65.2%, 91%) 0px, transparent 50%);
}

:root {
  --width: 44rem;
}

.outside-control {
  width: 100%;
  max-width: var(--width);
  padding: 6px 14px;
  line-height: 2; 
}

.bubble {
  /* width: 100%;
  max-width: var(--width); */
  padding: 4px 12px;
  border-radius: 20px;
  background-color: #ffffffaa;
}

.value-container {
  border-radius: 0;
  padding: 4px 12px;
  background-color: #ffffffaa;
  border: 1px solid #d9d9d9;
}

.service-approve {
  padding: 2px;
  border: 2px solid #184386;
  background: #1a5ec6;
  color: white;
  border-radius: 4px;
  font-weight: bold;
}

.control {
  position: sticky;
  bottom: 0;
  margin-top: 40px;
  width: 100%;
  max-width: var(--width);
  padding: 4px;
  border-radius: 20px;
  background-color: #ffffff50;
}

.control-pre {
  padding: 2px 10px;
}

.input {
  background-color: white;
  border-radius: 16px;
  min-height: 80px;
  padding: 10px 16px;
  border: 2px solid #dedfe2;
}
.lozenge {
  background-color: #3a3b3f;
  color: white;
  border-radius: 20px;
  padding: 4px 12px;
}

.button.text {
  display: flex; /* enables flexbox */
  align-items: center; /* centers SVG vertically */
  justify-content: center; /* centers SVG horizontally */
  border: none; /* optional reset for button styles */
  padding: 2px 5px; /* remove default padding */
  background-color: #8fa0cf; /* or your preferred background */
  cursor: pointer; /* pointer cursor on hover */
  border-radius: 8px;
}

.button.square {
  width: 36px; /* or any fixed size you prefer */
  height: 36px; /* same as width for square shape */
  display: flex; /* enables flexbox */
  align-items: center; /* centers SVG vertically */
  justify-content: center; /* centers SVG horizontally */
  border: none; /* optional reset for button styles */
  padding: 0; /* remove default padding */
  background-color: #8fa0cf; /* or your preferred background */
  cursor: pointer; /* pointer cursor on hover */
  border-radius: 8px;
}

.button.loud {
  background-color: #dab333;
  /* color: #dedfe2; */
}

.button svg {
  width: 24px; /* size of SVG icon */
  height: 24px; /* keep icon square and centered */
  /* fill: white; */
  color: white;
}

body {
  font-family: "Gill Sans", "Calibri", "Trebuchet MS", sans-serif;
  font-size: 16px;
  color: #3a3b3f;
}