body{
  padding: 0;
  margin: 0;
  background: #fff;
  font-family: -apple-system, system-ui, "system-ui", Roboto, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  height: 100%;
  font-size: 16px;
  line-height: 20px;
  overflow: hidden;
}
.container {
  background: #F5F5F5;
}
.scrollable {
  height: calc(100% - 65px);
  overflow: scroll;
}
.history {
  min-height: calc(100% - 20px);
  padding: 5px 15px 15px 15px;
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  justify-content: end;
}
.entry {
  padding: 10px;
  margin-top: 10px;
  width: fit-content;
  display: inline-block;
  align-self: flex-end;
  border-radius: 5px;
}
.entry.assistant {
  background: #E1E5ED;
  margin-right: 50px;
  align-self: flex-start;
}
.entry.user {
  color: #fff;
  background: #0088FE;
  margin-left: 50px;
}
.entry.no-bubble {
  opacity: .5;
  color: #8793AB;
  background: transparent;
}
.entry.typing {
  animation: blink .5s infinite;
}
@keyframes blink {
  0%   {opacity: .5;}
  50%  {opacity: .3;}
  100% {opacity: .5;}
}
form {
  padding: 0 15px 15px 15px;
  margin: 0px;
  display: grid;
  grid-template-columns: auto 50px;
}
input {
  padding: 15px;
  line-height: 20px;
  outline: none;
  border: none;
  font-size: 16px;
  line-height: 20px;
  border-radius: 5px 0px 0px 5px;
}
input:disabled {
  background: transparent;
}
button {
  outline: none;
  border: none;
  background: #fff;
  background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 20V4L22 12L3 20ZM5 17L16.85 12L5 7V10.5L11 12L5 13.5V17Z" fill="%230088FE"/></svg>');
  background-repeat: no-repeat;
  background-position: 13px 13px;
  border-radius: 0px 5px 5px 0px;
}
.card {
  padding: 0px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #E1E5ED;

  margin-top: 10px;
  margin-right: 50px;

  width: fit-content;
  display: inline-block;
  align-self: flex-end;
  align-self: flex-start;
  .head {
    font-size: 20px;
    line-height: 30px;
    padding: 20px 25px 0px 25px;
    display: grid;
    grid-template-columns: auto 48px;
    grid-template-areas: "name icon" "jobtitle icon";
    .name {
      grid-area: name;
      font-weight: bold;
    }
    .jobtitle {
      grid-area: jobtitle;
    }
    .icon {
      grid-area: icon;
      background-image: url('data:image/svg+xml,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_15_47)"><path d="M23.9999 27.4285C28.7338 27.4285 32.5713 23.5909 32.5713 18.8571C32.5713 14.1232 28.7338 10.2856 23.9999 10.2856C19.266 10.2856 15.4285 14.1232 15.4285 18.8571C15.4285 23.5909 19.266 27.4285 23.9999 27.4285Z" stroke="%23BFC7D7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.35999 40.7999C10.89 38.2886 13.0402 36.213 15.6041 34.7728C18.168 33.3325 21.0593 32.576 24 32.576C26.9407 32.576 29.832 33.3325 32.3958 34.7728C34.9597 36.213 37.11 38.2886 38.64 40.7999" stroke="%23BFC7D7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M23.9999 46.2857C36.308 46.2857 46.2857 36.308 46.2857 23.9999C46.2857 11.6919 36.308 1.71423 23.9999 1.71423C11.6919 1.71423 1.71423 11.6919 1.71423 23.9999C1.71423 36.308 11.6919 46.2857 23.9999 46.2857Z" stroke="%23BFC7D7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_15_47"><rect width="48" height="48" fill="white"/></clipPath></defs></svg>');
      background-position: center center;
      background-repeat: no-repeat;
    }
  }
  .statement {
    .inner {
      background: #E1E5ED;
      padding: 15px 15px 15px 25px;
      margin-top: 20px;
      font-style: italic;
    }
  }
  .table {
    padding: 25px;
    display: grid;
    column-gap: 10px;
    grid-template-columns: 1fr 1fr;
    .row {

    }
    .space {
      margin-bottom: 10px;
    }
  }
}
#confetti_div_left {
  position: fixed;
  left: 0px;
  top: 50vh;
}
#confetti_div_right {
  position: fixed;
  right: 0px;
  top: 50vh;
}
.ended {
  input {
    display: none;
  }
  button {
    display: none;
  }
  .scrollable {
    height: 100%;
  }
}
@media (min-width: 600px) {
  body{
    padding: 20px;
    height: calc(100% - 40px);
  }
  .container {
    width: 380px;
    height: 100%;
    margin: 0px auto;
    border-radius: 10px;
  }
  .scrollable {
    border-radius: 5px 5px 0 0;
    height: calc(100% - 65px);
  }
  form {
    border-radius: 0 0 5px 5px;
  }
  @media (min-height: 700px) {
    body{
      height: 600px;
      margin-top: calc(50vh - 350px);
    }
    .scrollable {
      height: 535px;
    }

    .ended{
      .scrollable {
        height: 600px;
      }
    }
  }
}