.chat-form,
.chat-form * {
    font-family: sans-serif;
    box-sizing: border-box;
}

.chat-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 10px 15px;
    background: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #cacaca;
}

.chat-form > .chat-form-row {
    width: 100%;
    padding: 10px 15px;
}

.chat-form label {
    width: 100%;
    display: block;
    padding: 10px 0px;
    color: #333;
}

.chat-form input,
.chat-form select,
.chat-form button,
.chat-form textarea {
    width: 100%;
    display: block;
}

.chat-form input,
.chat-form select,
.chat-form button,
.chat-form textarea {
    background: #eeeeee;
    color: #666666;
    border: 1px solid #cacaca;
    border-radius: 4px;
    padding: 10px 10px;
}

.chat-form textarea {
    min-height: 3em;
    resize: vertical;
}

.chat-form input:focus,
.chat-form select:focus,
.chat-form button:focus,
.chat-form textarea:focus {
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.42);
}

.chat-form input.has-error,
.chat-form select.has-error,
.chat-form button.has-error,
.chat-form textarea.has-error {
    box-shadow: 0px 0px 3px 0px rgba(200, 0, 0, 0.42);
}

.chat-form button {
    background: #56b0f2;
    border-color: #56b0f2;
    color: #ffffff;
    cursor: pointer;
}

.chat-form button:hover {
    background: #39a2ec;
    border-color: #39a2ec;
    cursor: pointer;
}

#chat-input {
    width: 100%;
    background: #ffffff;
    color: #666666;
    border: none;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding: 10px 10px;
    resize: vertical;
}

#chat-input:focus {
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.42);
}

.chat-thing {
    width: 100%;
}

#thing {
    width: 400px;
}

.customer-chat,
.customer-chat * {
    box-sizing: border-box;
    font-family: sans-serif;
}

.floating-chat-container {
	position: fixed;
	right: 86px;
	bottom: 32px;
	width: 86px;
	z-index: 42;
}

.floating-button {
	display: block;
	width: 86px;
	height: 86px;
	border-radius: 50%;
	border: none;
	background-color: #56b0f2;
	box-shadow: 2px 3px 5px 1px #555;
	cursor: pointer;
	background-position: center;
	background-size: 56px 56px;
    background-repeat: no-repeat;
    z-index: 9000;
}

.floating-button:hover {
	background-color: #39a2ec;
}

.floating-button.disabled,
.floating-button.disabled:hover {
    background-color: #616161;
    cursor: not-allowed;
}

.floating-button:focus {
    outline: 0;
}

.floating-button::-moz-focus-inner {
    border:0;
}

.floating-sub-button {
	background-size: 56% 56%;
}

.floating-contact-button {
	background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg width='1792' height='1792' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1792 896q0 174-120 321.5t-326 233-450 85.5q-70 0-145-8-198 175-460 242-49 14-114 22-17 2-30.5-9t-17.5-29v-1q-3-4-.5-12t2-10 4.5-9.5l6-9 7-8.5 8-9q7-8 31-34.5t34.5-38 31-39.5 32.5-51 27-59 26-76q-157-89-247.5-220t-90.5-281q0-130 71-248.5t191-204.5 286-136.5 348-50.5q244 0 450 85.5t326 233 120 321.5z' fill='%23fff'/%3E%3C/svg%3E");
}

.floating-menu-open .floating-contact-button {
	background-image: svg-load('icons/times.svg');
}

.floating-menu-open .floating-contact-button {
	background-image: svg-load('icons/times.svg');
}

.floating-chat-button {
	background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg width='1792' height='1792' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1792 896q0 174-120 321.5t-326 233-450 85.5q-70 0-145-8-198 175-460 242-49 14-114 22-17 2-30.5-9t-17.5-29v-1q-3-4-.5-12t2-10 4.5-9.5l6-9 7-8.5 8-9q7-8 31-34.5t34.5-38 31-39.5 32.5-51 27-59 26-76q-157-89-247.5-220t-90.5-281q0-130 71-248.5t191-204.5 286-136.5 348-50.5q244 0 450 85.5t326 233 120 321.5z' fill='%23fff'/%3E%3C/svg%3E");
}

.floating-mail-button {
	background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg width='1792' height='1792' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1792 710v794q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-794q44 49 101 87 362 246 497 345 57 42 92.5 65.5t94.5 48 110 24.5h2q51 0 110-24.5t94.5-48 92.5-65.5q170-123 498-345 57-39 100-87zm0-294q0 79-49 151t-122 123q-376 261-468 325-10 7-42.5 30.5t-54 38-52 32.5-57.5 27-50 9h-2q-23 0-50-9t-57.5-27-52-32.5-54-38-42.5-30.5q-91-64-262-182.5t-205-142.5q-62-42-117-115.5t-55-136.5q0-78 41.5-130t118.5-52h1472q65 0 112.5 47t47.5 113z' fill='%23fff'/%3E%3C/svg%3E");
}

.floating-chat-buttons {
	position: absolute;
	bottom: 86px;
	left: 12px;
	right: 12px;
	z-index: -1;
}

.floating-sub-button {
	width: 62px;
	height: 62px;
	transition: margin-bottom 0.33s;
	margin-bottom: -62px;
}

.floating-menu-open .floating-chat-buttons .floating-chat-button,
.floating-menu-open .floating-chat-buttons .floating-mail-button {
	margin-bottom: 10px;
}

/*@media only screen and (max-width: 768px){
	.floating-chat-container {
		display: none;
	}
}*/

@media only screen and (max-width: 768px){
	.floating-chat-container {
		right: 32px;
		bottom: 16px;
	}
}

.modal,
.modal * {
    font-family: sans-serif;
    box-sizing: border-box;
}

.modal-overlay {
  position: fixed;
  z-index: 10001;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0.5;
}

.modal-container {
  position: fixed;
  z-index: 10003;
  padding-top: 0 !important;
  background: #fff;
  box-shadow: 0 0 15px #444;
  width: 100%;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 15px;
}

.modal {
  width: 100%;
  float: none;
  width: auto;
  border: 0;
  margin: 0;
  overflow-y: auto;
  display: block;
  max-height: 738px;
  max-height: calc(100vh - 30px);
}

.modal-header {
  width: 100%;
  padding: 10px 15px;
}

.modal-title,
.modal-close {
	font-size: 26px;
  font-weight: bold;
  display: inline-block;
}

.modal-close {
	display: block;
	background-color: #f55f55;
	background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg width='1792' height='1792' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z' fill='%23fff'/%3E%3C/svg%3E");
  color: #FFF;
  width: 22px;
  height: 22px;
  background-position: center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
	border-radius: 6px;
  margin-top: 4px;
  border: none;
  cursor: pointer;
}

.modal-close:hover {
	background-color: #ca0008;
}

.modal-close {
	float: right;
	text-decoration: none;
}