.open_button_container {
  display: block;
  border-radius: 50%;

}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  color: white;
  cursor: pointer;
  border-radius: 50%;
  position: fixed;
  bottom: 39px;
  right: 20px;
  width: 64px;
  z-index: 99998;
  height: 64px;
}

.form {
  max-width: 280;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;

  /* border: 1px solid #504c4c; */
  z-index: 99999;
  bottom: 32px;
  right: 6%;
  width: 280px;
  background-color: rgb(252, 252, 252);
}


.form-container {
  max-height: 295px;

  bottom: 20px;
  right: 6px;
  width: 280px;
  max-width: 280px;

  background-color: rgb(61, 53, 53);
}

/* Full-width input fields */

/* When the inputs get focus, do something */

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom: 10px;
  right: 6px;
  bottom: 20px;

}


.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover,
.open-button:hover {
  opacity: 1;
}
#container {
font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
font-weight: 400;
font-size: 14px;
line-height: 1.4;
color: #212b36;
letter-spacing: -.12px;
text-rendering: optimizeLegibility;
-moz-font-smoothing: antialiased;
padding: 12px;
}
.widget-md #container #wrapper {
width: 410px;
max-height: 640px;
}
#container #wrapper {
display: flex;
flex-direction: column;
position: relative;
border-radius: 20px;
box-shadow: 0 0 12px rgba(0,0,0,.15);
overflow: hidden;
}
#header {
z-index: 10;
padding: 14px 16px;
position: relative;
cursor: pointer;
font-weight: 400;
box-sizing: content-box;
color: #212b36;
display: flex;
}
#container #conversation, .widget-xs #container #conversation {
height: calc(100% - 180px);
}
#container #conversation {
flex: auto;
position: relative;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
background: #fff;
-webkit-transition: padding-top .5s;
-o-transition: padding-top .5s;
transition: padding-top .5s;
}
.branding-color-dark #header, .branding-color-dark #header .fa, .branding-color-dark #settings-header, .branding-color-dark #settings-header .fa {
color: #fff;
}
#header .header-icon {
border-radius: 20px;
height: 32px;
margin: auto 0 auto 8px;
min-width: 32px;
}
#header .header-content, #header .settings-content {
display: flex;
flex-direction: column;
margin-left: 16px;
text-align: left;
width: 100%;
}
#header .header-content .header-title:only-child, #header .settings-content .header-title:only-child {
margin: auto 0;
}

#header .header-content .header-title, #header .settings-content .header-title {
font-size: 14px;
font-weight: 600;
height: 20px;
letter-spacing: -.12px;
line-height: 20px;
}
#header .close-handle {
align-self: right;
cursor: pointer;
display: flex;
height: 32px;
margin: auto 0 auto 8px;
min-width: 32px;
padding: 4px;
}



@media (max-width: 1170px) {
  .widget-md #container #wrapper {
    max-height: 480px;
    width: 342px;
  }
}

@media (max-width: 768px) {
  .widget-md #container #wrapper {
    max-height: 100%;
    width: 100%;
  }
}