input#wisdom {
  padding: 4px;
  font-size: 1em;
  /*width: 400px*/
}
b.lexResponse button {
  width: 100%;
  font-size: 12px;
}
input::placeholder {
  color: #ccc;
  font-style: italic;
}
.userRequest {
  margin: 4px;
  padding: 2px 10px 2px 10px;
  border-radius: 4px;
  min-width: 50%;
  max-width: 85%;
  float: right;
  background-color: #e8e8d7;
  color: rgb(0, 0, 0);
  font-size: 14px;
}
b.lexResponse {
  margin: 4px;
  padding: 2px 10px 2px 10px;
  border-radius: 4px;
  text-align: left;
  min-width: 50%;
  max-width: 85%;
  float: left;
  background-color: #bee4ff;
  font-style: italic;
  color: rgb(47, 79, 79);
  font-weight: 600;
  text-align:center;
}
b.lexResponse > .lexResponse {
  background-color: transparent;
}
.lexResponse {
  margin: 4px;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  text-align: left;
  min-width: 50%;
  max-width: 85%;
  float: left;
  background-color: #bee4ff;
  font-style: italic;
  color: rgb(47, 79, 79);
  font-size: 14px;
  font-weight: 600;
  max-height: initial !important;
}
.lexResponse.lexIcon:before {
  content: "";
  background-image: url(https://dev.lumoslearning.com/llwp/wp-content/uploads/2019/03/logo_talk-1.gif);
  background-repeat: no-repeat;
  background-size: 55px;
  position: relative;
  top: 0px;
  margin-left: -18px;
  right: 0;
  left: 0px;
  bottom: 0;
  border: 0;
  padding: 16px 24px 7px;
}
.lexError {
  margin: 4px;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  text-align: right;
  min-width: 50%;
  max-width: 85%;
  float: right;
  background-color: #f77;
}
#lex-web-ui {
  display: flex;
  height: 100%;
  width: 100%;
}
.add-on .input-group-btn>.btn {
  border-left-width: 0;
  /*left:-2px;*/
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  text-overflow: initial;
}
.add-on .input-group-btn>.btn>.fa-microphone {
  text-overflow: initial;
  position: relative;
  top: 3px;
}
/* stop the glowing blue shadow */
.add-on .form-control:focus {
  box-shadow: none;
  -webkit-box-shadow: none;
  border-color: #cccccc;
}
/* The element to apply the animation to */
#stopRecording>.fa.fa-microphone {
  background-color: initial;
  -webkit-animation-name: example;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-name: example;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
/*Style for supportmon box */
.supportmonbox {
  position: fixed;
  bottom: 0px;
  width:30%;
  right:45px
  /*bottom: 0px;
  width: 250px;
  background: white;
  border-radius: 5px 5px 0px 0px;*/
}
.supportmonbox_head {
  background: #3498db;
  background-color: #7e7e91;
  color: #fff;
  font: 20px Calibri;
  padding: 10px 20px;
  border-radius:12px 12px 0px 0px !important;
  /*border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  -webkit-border-top-left-radius: 12px !important;
  -webkit-border-top-right-radius: 12px !important;
  -moz-border-radius-topleft: 12px !important;
  -moz-border-radius-topright: 12px !important;*/
}
.supportmonbox_close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: rgb(255, 255, 255);
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: .5;
  cursor: pointer;
}
.msg_body {
  background: white;
  /*height:200px;*/
  font-size: 12px;
  /*padding:15px;
  overflow:auto;*/;
}
#conversation{
width: 100%;
height: 75vh;
border: 1px
solid #ccc;
background-color: white;
padding: 4px;
overflow-y:scroll
}
#kbconversation{
width: 100%;
height: 78vh;
border: 1px
solid #ccc;
background-color: white;
padding: 4px;
overflow-y:scroll
}
.chatButton,.chatButtonContainer {
    display:none !important;
  }
  #Smallchat .Messages, #Smallchat .Messages_list {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
  .chat_close_icon {
     cursor:pointer;
    color: #289bd1;
    font-size:16px;
    position: absolute;
    right:65px;
    z-index: 9;
  }
  .chat_close_frame {
    cursor: pointer;
    background-color: #339FD9;
    color: #fff;
    font-size: 16px;
    position: absolute;
    right: 0px;
    z-index: 9;
    top: -2px;
    padding-right: 7px;
  }
  .chat_on {
    position: fixed;
    z-index: 10;
    width: 45px;
    height: 45px;
    right: 15px;
    bottom:20px;
    background-color: #31b0d5;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    padding: 9px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
    cursor: pointer;
    display: block;
  }
  .chat_on_icon{
    color:#fff;
    font-size:25px;
    text-align:center;
  }
  .panel.panel-default:hover {
    -webkit-animation: pulse 1s;
    animation: pulse 1s;
  }
  #customPanel{
    padding: 0px;
  }
  #customPanelbody{
    padding: 5px;
    background-color: #f5f5f5
  }
  #customPanelFooter{
    text-align: center;
  }
  #Smallchat .Layout {
   pointer-events:auto;
   box-sizing:content-box!important;
   z-index:999999999;
   position:fixed;
   bottom:20px;
   min-width:50px;
   max-width:300px;
   max-height:30px;
   display:-webkit-box;
   display:-webkit-flex;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -webkit-flex-direction:column;
   -ms-flex-direction:column;
   flex-direction:column;
   -webkit-box-pack:end;
   -webkit-justify-content:flex-end;
   -ms-flex-pack:end;
   justify-content:flex-end;
   border-radius:50px;
   box-shadow:5px 0 20px 5px rgba(0,0,0,.1);
   -webkit-animation:appear .15s cubic-bezier(.25,.25,.5,1.1);
   animation:appear .15s cubic-bezier(.25,.25,.5,1.1);
   -webkit-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
   opacity:0;
   -webkit-transition:right .1s cubic-bezier(.25,.25,.5,1),bottom .1s cubic-bezier(.25,.25,.5,1),min-width .2s cubic-bezier(.25,.25,.5,1),max-width .2s cubic-bezier(.25,.25,.5,1),min-height .2s cubic-bezier(.25,.25,.5,1),max-height .2s cubic-bezier(.25,.25,.5,1),border-radius 50ms cubic-bezier(.25,.25,.5,1) .15s,background-color 50ms cubic-bezier(.25,.25,.5,1) .15s,color 50ms cubic-bezier(.25,.25,.5,1) .15s;
   transition:right .1s cubic-bezier(.25,.25,.5,1),bottom .1s cubic-bezier(.25,.25,.5,1),min-width .2s cubic-bezier(.25,.25,.5,1),max-width .2s cubic-bezier(.25,.25,.5,1),min-height .2s cubic-bezier(.25,.25,.5,1),max-height .2s cubic-bezier(.25,.25,.5,1),border-radius 50ms cubic-bezier(.25,.25,.5,1) .15s,background-color 50ms cubic-bezier(.25,.25,.5,1) .15s,color 50ms cubic-bezier(.25,.25,.5,1) .15s
     
  }

  #Smallchat .Layout-right {
   right:20px
  }

  #Smallchat .Layout-open {
   overflow:hidden;
   min-width:300px;
   max-width:350px;
   height:300px;
   max-height:300px;
   border-radius:10px;
   color:#fff;
   -webkit-transition:right .1s cubic-bezier(.25,.25,.5,1),bottom .1s cubic-bezier(.25,.25,.5,1.1),min-width .2s cubic-bezier(.25,.25,.5,1.1),max-width .2s cubic-bezier(.25,.25,.5,1.1),max-height .2s cubic-bezier(.25,.25,.5,1.1),min-height .2s cubic-bezier(.25,.25,.5,1.1),border-radius 0ms cubic-bezier(.25,.25,.5,1.1),background-color 0ms cubic-bezier(.25,.25,.5,1.1),color 0ms cubic-bezier(.25,.25,.5,1.1);
   transition:right .1s cubic-bezier(.25,.25,.5,1),bottom .1s cubic-bezier(.25,.25,.5,1.1),min-width .2s cubic-bezier(.25,.25,.5,1.1),max-width .2s cubic-bezier(.25,.25,.5,1.1),max-height .2s cubic-bezier(.25,.25,.5,1.1),min-height .2s cubic-bezier(.25,.25,.5,1.1),border-radius 0ms cubic-bezier(.25,.25,.5,1.1),background-color 0ms cubic-bezier(.25,.25,.5,1.1),color 0ms cubic-bezier(.25,.25,.5,1.1);
  }

  #Smallchat .Layout-expand {
   height:450px;
   min-height:480px;
   display:none;
  }
  #Smallchat .Layout-mobile {
   bottom:10px
  }
  #Smallchat .Layout-mobile.Layout-open {
   width:calc(100% - 20px);
   min-width:calc(100% - 20px)
  }
  #Smallchat .Layout-mobile.Layout-expand {
   bottom:0;
   height:100%;
   min-height:100%;
   width:100%;
   min-width:100%;
   border-radius:0!important
  }
  @-webkit-keyframes appear {
   0% {
    opacity:0;
    -webkit-transform:scale(0);
    transform:scale(0)
   }
   to {
    opacity:1;
    -webkit-transform:scale(1);
    transform:scale(1)
   }
  }
  @keyframes appear {
   0% {
    opacity:0;
    -webkit-transform:scale(0);
    transform:scale(0)
   }
   to {
    opacity:1;
    -webkit-transform:scale(1);
    transform:scale(1)
   }
  }
  #Smallchat .Messenger_messenger {
   position:relative;
   height:100%;
   width:100%;
   min-width:300px;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -webkit-flex-direction:column;
   -ms-flex-direction:column;
   flex-direction:column
  }
  #Smallchat .Messenger_header,#Smallchat .Messenger_messenger {
   display:-webkit-box;
   display:-webkit-flex;
   display:-ms-flexbox;
   display:flex
  }
  
  #Smallchat .Messenger_prompt {
   margin:0;
   font-size:16px;
   line-height:18px;
   font-weight:400;
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis
  }

  @-webkit-keyframes slidein {
   0% {
    opacity:0;
    -webkit-transform:translateX(10px);
    transform:translateX(10px)
   }
   to {
    opacity:1;
    -webkit-transform:translateX(0);
    transform:translateX(0)
   }
  }
  @keyframes slidein {
   0% {
    opacity:0;
    -webkit-transform:translateX(10px);
    transform:translateX(10px)
   }
   to {
    opacity:1;
    -webkit-transform:translateX(0);
    transform:translateX(0)
   }
  }
  #Smallchat .Messenger_content {
    height: 450px;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
  }
  #Smallchat .Messages {
    position: relative;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 9px;
    background-color: #fff;
    -webkit-overflow-scrolling: touch;
  }
  .samplebtn, .samplebtn-two {
  margin: 9px;
}

/* suggested buttons */
.suggestedbuttons {
  box-shadow: none;
  font-size: 12px;
  background: #ffffff;
  border: black;
  padding: 4px 8px;
  border-radius: 16px;
  min-width: 80px;
  border: 1px solid #a1a0ec;
  /* margin: 0 5px 5px; */
  white-space: nowrap;
  display: inline-block;
  margin: 0 5px 5px;
}

.suggestedbuttons:hover {background: #87ceeb;}
 /*Style for supportmon box ends here*/
@-webkit-keyframes example {
  0% {
      color: #f9f774;
  }
  33% {
      color: #5a90d0;
  }
  66% {
      color: #63c969;
  }
  100% {
      color: #40d0fa;
  }
}
/* Standard syntax */
@keyframes example {
  0% {
      color: #f9f774;
  }
  33% {
      color: #5a90d0;
  }
  66% {
      color: #63c969;
  }
  100% {
      color: #40d0fa;
  }
}
.circle-icon {
    background: #7cc8ff;
    padding:19px;
    border-radius: 50%;
}
#SMicon{
  color: white;
  width:60px;
  height:60px;
  line-height:30px;
  font-size:30px;
  border-radius:50%;
  transition:.5s;
  bottom: 85px;
  right: 30px;
  cursor:pointer;
  position: fixed;
}
#SMicon:hover {
  color : black;
  opacity: 1;
  transition: 1s;
}
/*SM RESET AND CLEAR HISTORY CSS*/
.SMdropbtn {
    background-color: #4CAF50;
    color: white;
    /*padding: 16px;*/
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.SMdropdown {
    position: relative;
    display: inline-block;
}

.SMdropdown-content {
    display: none;
    margin-top: 30px;
    position: absolute;
    background-color: #f9f9f9;
    font-size: 14px;
    min-width: 110px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    cursor:pointer;
}

.SMdropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.SMdropdown-content a:active {background-color: #f1f1f1}

.show {display: block;}

.SMdropdown:active .SMdropbtn {
    background-color: #3e8e41;
}
@media screen and (min-width: 320px) and (max-width: 480px) {
  /* For mobile devices */
  body.when-keyboard-showing .header{
    height:0; padding:0;
  }
  b.lexResponse{
    padding:1px 1px 1px 1px !important;
    text-align: -webkit-auto !important;
  }
  .supactive{
    width:70%;
    right:0px;
    height:100%;
  }
  #conversation{
    height: 70vh;
   }
  #kbconversation{
    height: 70vh;
  }
  .supportmonbox_head{
    padding-bottom:36px;
    font-size: 16px;
    border-radius:12px 12px 0px 0px !important;
    /*border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    -webkit-border-top-left-radius: 12px !important;
    -webkit-border-top-right-radius: 12px !important;
    -moz-border-radius-topleft: 12px !important;
    -moz-border-radius-topright: 12px !important;*/
    
  }
  #wisdom{
    margin-bottom: 0px;
  }
  .supportmonbox {
    bottom: 50px;
    width: 87%;
    right: 27px;
  }
}

#similarthings{
  max-height: 100% !important;
}