.bot {
  font-family: "BWHaasText-55Roman",Helvetica, Arial, sans-serif;
  color: #2800d7;
  transition: opacity .5s;
}

.bot[data-mode="off"] {
  opacity: 0;
  pointer-events: none;
}

/* FACE */

.bot .face {
  background-image: url('../images/emotes/chill.gif');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
  width: 30%;
  height: 100%;
  min-height: 210px;
  display: inline-block;
  vertical-align: top;
}

/*.bot .face:hover {
  background-image: url('../images/emotes/wiggle.gif') !important;
}*/

/* BODY */

.bot .body {
  /*float: right;*/
  display: inline-block;
  width: 70%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  vertical-align: top;
}

.bot .body ::-webkit-scrollbar { 
   display: none; 
}

.bot ::-webkit-scrollbar { 
   display: none; 
}


.bot .body .messages {
}

.bot .body .messages .step {
}

.bot .body .messages .message {
  margin-bottom: 5px;
}

.bot .body .messages .message.speech {
  border: 3px solid #2800d7;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 10px;
  background: white;
  /* for caret */
  margin-left: 20px;
  position: relative;
  min-height: 66px;
  /* for caret */
}
/* all this for that lil notch caret! */
.bot .body .messages .message.speech:after
{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  border-color: transparent #FFFFFF;
  display: block;
  width: 0;
  z-index: 1;
  left: -15px;
  top: 15px;
}
.bot .body .messages .message.speech:before
{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 17px 17px 17px 0;
  border-color: transparent #2800d7;
  display: block;
  width: 0;
  z-index: 0;
  left: -20px;
  top: 13px;
}
/* /lil notch caret */

.bot .body .messages .eval {
  border: 3px solid #2800d7;
  background: #23241f;
  border-radius: 10px;
  padding: 10px;
}
.bot .body .messages .eval pre {
  margin: 0;
}
.bot .body .messages .eval pre code {
  padding-left: 3em;
  position: relative;
  white-space: pre-wrap;
  font-size: 12pt;
}
.bot .body .messages .eval pre code.input::before {
  content: "IN";
  position: absolute;
  left: 2px;
  font-size: small;
  color: #666;
}
.bot .body .messages .eval pre code.output::before {
  content: "OUT";
  position: absolute;
  left: 2px;
  font-size: small;
  color: #666;
}

.bot .body .messages .responses {
  text-align: right;
}

.b-ie .bot .body .messages{
  display: none !important;
  opacity: 0 !important;
}

.bot .body .messages .responses .response {
  display: inline-block;
  margin-bottom: 5px;
  margin-left: 5px;

  background: #2800d7;
  color: #fff;
  padding: 8px;
  font-family: "BWHaasText-75Bold",Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1em;
  width: auto;
  display: inline-block;
  vertical-align: middle; 
  -webkit-transition: background 0.4s;
     -moz-transition: background 0.4s;
      -ms-transition: background 0.4s;
       -o-transition: background 0.4s;
          transition: background 0.4s;
}
.bot .body .messages .responses .response:hover {
  background: #6381ff;
  cursor: pointer;
}
.bot .body .messages .responses .response.clicked {
  background: #6381ff;
  cursor: default;
}

/* SLIDER */
/* http://bl.ocks.org/mbostock/6452972 */

.bot .axis {
  font: 10px sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.bot .axis text {
  fill: #0f0;
}

.bot .axis .domain {
  fill: none;
  stroke: #000;
  stroke-opacity: .3;
  stroke-width: 10px;
  stroke-linecap: round;
}

.bot .axis .halo {
  fill: none;
  stroke: #ddd;
  stroke-width: 8px;
  stroke-linecap: round;
}

.bot .slider .handle {
  fill: #fff;
  stroke: #000;
  stroke-opacity: .5;
  stroke-width: 1.25px;
  cursor: crosshair;
}

.bot .slidey .label {
  display: none;
}