body {
  font-family: Arial, sans-serif;
}

div#div_login {
  width: 50vw;
  margin: auto;
  margin-top: 30vh;
  height: 40vh;
  border: 0.5vw solid silver;
  font: 2vw Arial, sans-serif;
  text-align: center;
  vertical-align: middle;
}

h1 {
  color: white;
  background: black;
  margin: 0px;
  padding: 0.5em;

  > a {
    color: white;
    text-decoration: none;
  }
}

.smooth {
  transition: width 0.5s;
  transition-timing-function: ease;
}

div.detail {
  background: #eeeeee;
  border-left: 1px solid grey;
}

div.playback {
  text-align: left;
}

div.workpad {
  height: 90vh;
  overflow-y: scroll;

  iframe.workpad {
    display: block;
    width: 98%;
    height: 95%;
    background: white;
    margin: auto;
    margin-top: 0.25em;
  }
}

.hidden {
  display: none;
}

ol.chat_river,
ol.chat_input {
  > li.assistant {
    border-bottom-left-radius: 0em;
  }

  > li.assistant,
  > li.user {
    background: #ddddff;
    width: 90%;
    margin-top: 0.5em;
    border: 0px solid black;
    border-radius: 0.5em;
    padding: 0.1em 0.5em 0.25em 0.5em;

    p, h4 {
      margin: 0.25em;
    }

    div.metadata {

      div.copy_and_time {
        text-align: right;
      }

      span.copy,
      span.timestamp {
        color: grey;
        font-size: 10pt;
        opacity: 0.25;
        margin: 0em 0.25em;
      }

      span.copy:hover,
      span.timestamp:hover {
        opacity: 1.0;
      }

      span.copy_grey {
        background: silver;
      }

      span.copy {
        border-radius: 0.5em;
        cursor: pointer;
        padding: 0.1em 0.25em;
      }
    }

    > div {
      > div {
        > details {
          padding: 0.25em;
          border: 0px solid grey;
        }
      }
    }

    ol.answer {
      padding: 0em 0.1em 0.1em 0.1em;
      margin-top: 0.0em;

      > li {
        list-style-type: none;
        border: 0px solid black;
        background: white;
        margin-top: 0.5em;
        border-radius: 0.5em;
        border-bottom-left-radius: 0em;
        padding: 0.5em;
      }

      > li.loader {
        background: rgba(0, 0, 0, 0);
        border: 0px solid black;

        div.loader {
          width: 100px;
          margin: auto;
          text-align: center;
          background: white;
          border-radius: 0.5em;

          img.loader {
            width: 50px;
            height: 25px;
            object-fit: cover;
          }
        }
      }
    }
  }

  > li.user {
    background: #aaeeee;
    margin-left: 5%;
    text-align: right;
    border-bottom-right-radius: 0em;
  }

  > li.assistant > div.assistant_:after {
	content: "";
	background: rgba(0, 0, 0, 0);
	position: relative;
	top: 0.85em;
	left: 1em;
	width: 0;
	height: 0;
	border: 1.0em solid transparent;
	border-top-color: white;
	border-bottom: 0;
	border-left: 0;
	margin-left: -0.5em;
	margin-bottom: -1.0em;
  }
}

ol.chat_river {
  height: 70vh;
  overflow-y: scroll;
}


ol.chat_input {
  div.continue {
    text-align: center;
  }

  > li {
    list-style-type: none;
  }

  div.user_input{
    textarea.user_input {
      width: 100%;
      border: none;
      background: rgba(0, 0, 0, 0);
      text-align: right;
    }
    textarea.user_input:focus {
      outline: none;
    }
  }
}

details.playback {
  margin-bottom: 0.5em;

  button,
  label {
    font: 10pt arial;
    background: #eeeeee;
    display: inline-block;
    border: 1px solid grey;
    margin: 0em 0.125em;
    padding: 0.25em 0.25em;
    border-radius: 0.25em;
  }
}

pre.code {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}