/*****************************************************************************
 * General
 *****************************************************************************/
body,
input[type="text"],
textarea,
button,
select {
  font-family: 'Lato', sans-serif;
}


/*****************************************************************************
 * Container
 *****************************************************************************/
.container,
.inner-container {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  min-width: 0;
}

@media (min-width: 400px) {
  .container,
  .inner-container {
    min-width: 330px;
  }
}

.inner-container {
  -ms-filter: "none";
  background: none;
  border: 0;
  padding: 0;
}

.invitation-container .invitation-message {
  padding: 0 10px;
}

.invitation-container .invitation-message label {
  font-size: 1.75rem;
  font-weight: 300;
}

/* **
 * ToDo: JS calcs should be fixed on 8x8 side
 * Temp fix: overwriting the JS set heights for it to work in Chrome
 */
/*.pre-chat-container .main {
  height: 339px !important;
}*/
/*.pre-chat-container .form-list {
  height: 288px !important;
}*/
.chat-container .main {
  height: 255px !important;
  padding: 0 10px;
}
.chat-container .message-history {
  /*height: 199px !important;*/
}


/*****************************************************************************
 * Controls
 *****************************************************************************/

.control.close {
  background-position: center -52px;
  margin: 9px 6px 0 0;
  opacity: initial;
}

.control.end {
  background-color: transparent;
  background-position: center -68px;
  border: 0;
  width: 36px;
}


/*****************************************************************************
 * Header
 *****************************************************************************/

.header .logo {
  width: 27px;
  height: auto;
  max-width: initial;
  max-height: initial;
  padding: 0;
  margin: 10px 10px 0 10px;
}

.header .title {
  background: #47565e;
  font-size: 14px;
  color: #fff;
  padding: 10px 24px;
  border-radius: 4px 4px 0 0;
}

.header p {
  font-weight: 300;
  padding: 2px 20px;
}


/*****************************************************************************
 * Form
 *****************************************************************************/

.required::after {
  content: '';
}

input[type="text"],
textarea,
.message-history,
select {
  box-shadow: none;
  border: 0;
  border-radius: 4px;
}

.message-box-item.expand {
  width: inherit;
}

#message-field {
  border-radius: 3px;
}


/*****************************************************************************
 * Error
 *****************************************************************************/

.required {
  position: relative;
}

li.error-message {
  display: none !important;
}

span.error-image {
  background: none;
  width: 0;
  height: 0;
}

span.error-image::after {
   content: 'This field is required';
   color: red;
   background: rgba(255, 255, 255, .9);
   padding: 2px;
   position: absolute;
   right: 0;
   top: 0;
   border-radius: 2px 2px 0 0;
 }