body {
  background-color: white;
}

input {
  width: 100%; /* Makes the input as wide as its parent container minus the parent's padding */
  box-sizing: border-box; /* Includes the input's own padding and border in its 100% width calculation */
  padding: 10px; /* Example padding on the input */
  border: 1px solid #000;
}

textarea {
  width: 100%; /* Makes the textarea as wide as its parent container minus the parent's padding */
  box-sizing: border-box; /* Includes the textarea's own padding and border in its 100% width calculation */
  padding: 10px; /* Example padding on the textarea */
  border: 1px solid #000;
  resize: vertical; /* Allows vertical resizing only (optional) */
}

.container {
  width: 80%; /* The parent container defines the available width (e.g., 80% of the screen) */
  margin: 0 auto; /* Centers the container on the page */
  padding: 20px; /* Example padding on the container */
}

.container-flex-center {
  display: flex;
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers content vertically */
  width: 100%; /* The parent container defines the available width (e.g., 80% of the screen) */
  margin: 25px auto; /* Centers the container on the page */
}

.container-flex-end {
  display: flex;
  justify-content: flex-end;
  width: 100%; /* The parent container defines the available width (e.g., 80% of the screen) */
  margin: 5px auto; /* Centers the container on the page */
}

.full-width-btn {
  display: block; /* Makes the button a block-level element, taking up a new line */
  width: 100%; /* Stretches the button to the full width of its container */
  /* Optional additional styling */
  border: none;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

.profile-pic-container {
  /* Set a fixed width and height to create a perfect square container */
  width: 50px;
  height: 50px;

  /* The border-radius property creates the circle shape */
  border-radius: 50%;

  /* Hides any part of the image that overflows the circular container */
  overflow: hidden;
}

.profile-pic {
  /* Ensure the image takes up the full width and height of its container */
  width: 100%;
  height: 100%;

  /* Scales the image to cover the entire container while preserving its aspect ratio */
  object-fit: cover;

  /* Centers the image within the container to keep the subject visible */
  object-position: center;
}

.kumu-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /* Removes default iframe border */
  display: block; /* Ensures it behaves as a block element */
}