@font-face {
    font-family: 'Calibri';
    src: url('Calibri 400.ttf') format('truetype');
    src: url('Calibri Regular.ttf') format('truetype');
  }
  @font-face {
  font-family: "BAHNSCHRIFT";
  src:
  url("fonts/BAHNSCHRIFT 9.TTF") format("truetype"),
  }
  
  :root {
      --color-darkgrey: #5f5d5d;
      --color-lightgrey: #ebebeb;
      --color-transgrey: #5f5d5d23;
      --color-red: #ff4550;
      --color-green: #49ce7a;
      --color-brightblue: #0a76ff;
      --color-greyblue: #a5bddc;
      --color-transwhite: rgba(255, 255, 255, 0.97);
      --color-transred: rgba(255, 69, 80, 0.85);
  }
  
  @media only screen and (max-width: 768px) {
      .chat_box{
          width: 85%!important;
          /*width:unset!important;*/
          margin-left: 20px;
          height: 75%!important;
      }
      .chat_box{
              right: 20px;
      }
  }
  
  @media only screen and (max-height: 780px) {
    #chat-context {
      height: 75%!important;
      overflow-y: hidden;
  }
  }
  .chat-response.user:after{
      color: #007bff!important;
  }
  .chat-context {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      padding: 1em;
      box-sizing: border-box;
      font-family: 'Montserrat', sans-serif!important;
      /*font-family: 'BAHNSCHRIFT';*/
      /*font-family: 'Avenir',helvetica,arial,sans-serif;*/
      padding-top: 0em;
  }
  
  #chat {
      flex: 1 1 0;
      overflow-y: scroll!important;
      padding-left: 2.5em;
      padding-right: 2.5em;
      box-sizing: border-box;
  }
  #chat::-webkit-scrollbar, #ui-options::-webkit-scrollbar {
      width: 0 !important;
  }
  .button {
      cursor: pointer;
  }
  .chat-response {
      max-width: 80%;
      opacity: 0;
      padding: 1em;
      border-radius: 35px 35px 0px 35px;
      background-color: #eef1f6!important;
          /*background-color: var(--color-lightgrey);*/
      text-align: right;
      margin-right: 0;
      margin-left: auto;
      margin-top: 1em;
      margin-bottom: 1em;
      position: relative;
      color: var(--color-transwhite);
      width: fit-content;
      box-shadow: 0 15px 10px -10px rgb(31 31 31 / 50%);
  }
  .chat-response p {
          line-height: unset!important;
      letter-spacing: unset!important;
      color:#000;
      font-size: 0.7rem!important;
      margin: 0;
  }
  .chat-response.robot {
         background-color:#eef1f6!important;
      /*background-color: var(--color-lightgrey);*/
      border-radius: 35px 35px 35px 0px;
      text-align: left;
      margin-right: auto;
      margin-left: 0;
      color: #000!important;
  }
  .user p{
      /*font-family: 'Calibri regular'!important;*/
          font-family: 'Montserrat', sans-serif!important;
      color:#007bff!important;
  }
  .chat-response:after {
      content: "";
      width: 2em;
      height: 2em;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      position: absolute;
      bottom: -1.5em;
      left: -2.5em;
      font-size: 1em;
  }
  .chat-response.user:after {
      content: "";
      left: auto;
      right: -2.5em;
  }
  .robot a{
          font-weight: 500;
      margin: 5px;
      background: #ffffff;
      color: #02d755;
      padding: 3px 15px;
      border-radius: 15px;
      border: 1px solid;
      border-color: #02d755;
      box-shadow: 0 15px 10px -10px rgb(0 0 0 / 50%);
  }
  
  #ui-response {
      height: 60px;
      max-height: 60px;
      position: relative;
      transition: all .5s ease-out;
      -webkit-transition: all .5s ease-out;
      -moz-transition: all .5s ease-out;
  }
  #ui-response.full-submit #response-text {
      display: none;
  }
  #ui-response.full-submit #ui-submit {
      width: 100%;
  }
  #ui-response.hide {
      overflow: hidden;
      animation: hide .5s forwards;
      -webkit-animation: hide .5s forwards;
      -moz-animation: hide .5s forwards;
  }
  @keyframes hide {
      0% {
          opacity: 1;
      }
      99.9999% {
          opacity: 0;
          max-height: 60px;
      }
      100% {
          max-height: 0em;
      }
  }
  
  #ui-submit {
      border-radius: 50%;
      width: 50px;
      height: 50px;
      background-color: #0d82f5;
      color: var(--color-transwhite);
      position: absolute;
      bottom: 5px;
      right: 5px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      cursor: pointer;
  }
  #response-text {
      border-radius: 50px;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding-left: 1em;
      border: 1px solid var(--color-lightgrey);
      transition: all .5s ease-in;
      -webkit-transition: all .5s ease-in;
      -moz-transition: all .5s ease-in;
      color: var(--color-darkgrey);
      font-size: 16px;
  }
  #response-text:focus {
      outline: none;
      box-shadow: 0 0 15px var(--color-lightgrey);
  }
  #response-text.invalid {
      background-color: var(--color-transred);
      color: var(--color-transwhite);
  }
  #ui-options {
      text-align: center;
      /*display: flex;*/
      justify-content: flex-start;
      padding: 0.5em;
      overflow-x: scroll;
      padding-bottom: 10px;
  }
  #ui-options:empty {
      padding: 0em;
  }
  /*.ui-option {*/
  /*    margin: 5px;*/
  /*    border-radius: 35px;*/
  /*    border: 1px solid #b516df!important;*/
  /*    padding: 0.5em 1em;*/
  /*    margin-right: 1em;*/
  /*    cursor: pointer;*/
  /*    display: -webkit-inline-box;*/
  /*    flex-direction: column;*/
  /*    justify-content: center;*/
  /*    text-align: center;*/
  /*    transition: background-color .2s ease-in;*/
  /*    color: #b516df!important;*/
  /*}*/
  .ui-option {
      min-width: 145px!important;
      background:#fff;
      box-shadow: 0 10px 20px rgb(0 0 0 / 9%), 0 6px 6px rgb(0 0 0 / 13%);
      margin: 5px;
      border-radius: 35px;
      /*border: 1px solid #b516df!important;*/
      padding: 0.5em 1em;
      /*margin-right: 1em;*/
      cursor: pointer;
      display: -webkit-inline-box;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      transition: background-color .2s ease-in;
      color: #1285fe!important;
  }
  .ui-option:hover, .ui-option.selected {
      background-color: #1285fe!important;
      color: #FFF!important;
  }
  
  .ui-option p {
      text-transform: capitalize!important;
      margin: 0 auto;
      font-size: 0.65rem;
      letter-spacing: unset!important;
      letter-spacing: 0.2px!important;
     
  }
  .subtext{
      display:none;
  }
  .ui-option .subtext {
      color: var(--color-greyblue);
      font-size: .85em;
  }
  .ui-option:hover .subtext, .ui-option.selected .subtext {
      color: var(--color-transwhite);
  }
  .ui-option.filtered-out {
      display: none;
  }
  #ui-control > * {
      opacity: 1;
      transition: opacity 1s ease-in-out, max-height 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out, max-height 1s ease-in-out;
      -webkit-transition: opacity 1s ease-in-out, max-height 1s ease-in-out;
  }
  #ui-control .hidden {
      opacity: 0;
      -webkit-transition: background 0s;
      -moz-transition: background 0s;
      -ms-transition: background 0s;
      -o-transition: background 0s;
      transition: background 0s;
  }
  
  
  .loader {
      border: 16px solid #f3f3f3;
      border-top: 16px solid var(--color-green);
      border-radius: 50%;
      width: 80px;
      height: 80px;
      margin: auto;
      animation: spin 2s linear infinite;
  }
  @keyframes spin {
      0% {
          transform: rotate(0deg);
      }
  
      100% {
          transform: rotate(360deg);
      }
  }
  
  
  @media (max-width: 600px) {
      .chat-response.robot{
          margin-left: 1em;
      }
      .chat-context {
          padding: 0em;
      }
      #chat {
          padding:0px 1.25em;
          padding-bottom: 0em;
      }
      .chat-response.user:after {
          right: -1em;
      }
      .chat-response:after {
          left: -2.1em;
          bottom: -1em;
      }
  }
  @media only screen and (min-width: 760px) {
    .ui-option {
      min-width: 165px!important;
    }
    .ui-options .col-12{
        width:97%!important;
    }
  }
  /*@media only screen and (max-width: 768px) {*/
  /*  .ui-option:last-child {*/
  /*        max-width: 85.4%!important;*/
  /*}*/
  /* } */