/* CSS Document */

@keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
@-webkit-keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
@-moz-keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}

html.login-screen, .login-screen body {
  height: auto;
  min-height: 100%
}

#customer-chat-operators-edit.customer-chat-tab-content-settings .customer-chat-content-message:first-of-type {
  padding-bottom: 0
}

.button-row .customer-chat-content-button-inline {
  margin-right: 10px
}

.login .logo_holder {
  width: 100%;
  height: 195px;
  background: #fff;
  text-align: center;
}

.login .logo_holder a {
  height: 100%;
  display: inline-block
}

.login .logo_holder .logo {
  max-width: 250px;
  position: relative;
  top: 50%;
  transform: translateY(-50%)
}

.login-screen body {
  background: url(../img/redesign/bg-login-5.jpg) center center no-repeat;
  background-size: cover;
}

.login_holder {
  min-height: 900px;
  position: relative;
}

.login-form {
  position: relative;
  left: 50%;
  top: auto;
  margin-top: 0;
  margin-left: 0;
  transform: translateX(-50%)
}

.login_heading {
  height: 120px;
  margin-top: 120px;
  margin-bottom: 110px;
  display: inline-block;
  font-size: 2.9em;
  color: #fff;
  font-weight: 300;
  max-width: 400px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  line-height: 1.3em;
  padding: 0px 15px 0px 15px
}

.login_links {
  margin-top: 45px;
  text-align: center;
  font-size: 0.9em
}

.login_links a,
.login_links span {
  display: inline-block
}

.login_links a {
  color: rgb(255,255,255);
  text-decoration: none;
  border-bottom: 1px solid rgb(187,185,191);
}

.login_links a:hover {
  text-decoration: none;
  border-bottom: 1px solid transparent
}

.login_links span {
  padding: 0px 10px 0px 10px;
  color: #fff
}

.login_copy {
  width: 100%;
  text-align: center;
  color: rgb(247,247,247);
  font-size: 0.9em;
  position: absolute;
  left: 0;
  bottom: 20px
}

.login_copy a {
  color: rgb(247,247,247);
  text-decoration: none;
  border-bottom: 1px solid transparent
}

.login_copy a:hover {
  border-bottom: 1px solid rgb(187,185,191)
}

.login-screen [type="submit"] {
  transition: 200ms all linear
}

.login-screen .typed-cursor {
  display: inline-block;
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
  transform: translateY(-3px)
}

.login-screen .login_heading .text {
  display: inline
}

.borderbox,
.borderbox * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#welcome {
  width: 96%;
  max-width: 915px;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: #fff;
  z-index: 100001;
  display: none;
  top: 90px;
  transform: translateX(-50%)
}

#welcome_overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(54,56,69,0.7);
  z-index: 100000;
  display: none
}

#welcome .screen {
  width: 100%;
  height: 100%;
  padding: 50px 60px 45px 60px;
  position: relative;
  display: none;
  text-align: center;
}

#welcome .screen:nth-of-type(1) {
  display: inline-block
}

#welcome .close:not(.foxy_btn) {
  width: 30px;
  height: 30px;
  display: inline-block;
  cursor: pointer;
  background: rgb(197,192,193) url(../img/redesign/close.png) center center no-repeat;
  border-radius: 15px;
  position: absolute;
  right: 19px;
  top: 19px;
  cursor: pointer;
  z-index: 1;
  transition: all 200ms linear
}

#welcome .close:hover {
  background-color: rgb(252,95,69);
}

#welcome .screen1 {
  padding-top: 90px;
  padding-bottom: 150px;
  background: url(../img/redesign/trees.png) right bottom no-repeat;
  background-size: 340px 270px;
  text-align: center;
}

#welcome .heading {
  font-size: 2em;
  color: #000;
  line-height: 1.4em;
  margin-bottom: 20px
}

#welcome .text {
  width: 100%;
  font-size: 1em;
  color: rgb(98,98,98);
  line-height: 1.9em;
  margin: 10px 0px 10px 0px;
  display: inline-block
}

.foxy_btn {
  width: auto;
  height: 50px;
  display: inline-block;
  line-height: 46px;
  padding: 0px 35px 0px 35px;
  border-radius: 10px;
  background: rgb(252,95,69);
  border: 2px solid rgb(252,95,69);
  cursor: pointer;
  color: #fff;
  font-size: 1em;
  font-weight: bold;
  transition: all 200ms linear
}

#welcome .foxy_btn:hover {
  background: #BB5334;
}

#welcome .foxy_btn.type2 {
  border-color: rgb(176,176,176);
  border-width: 1px;
  color: rgb(116,116,116);
  background: #fff
}

#welcome .foxy_btn.type2:hover {
  background: rgb(176,176,176);
  color: #fff
}

#welcome .screen1 .foxy_btn {
  margin: 10px 7px 10px 7px
}

#welcome .screen1 #foxy {
  width: 308px;
  height: 183px;
  background: url(../img/redesign/foxy.png) center center no-repeat;
  position: absolute;
  right: -125px;
  bottom: -50px
}

#welcome .screen4 #foxy {
  width: 263px;
  height: 262px;
  background: url(../img/redesign/foxy2.png) center center no-repeat;
  position: absolute;
  right: -110px;
  bottom: -45px
}

#welcome .screen1 .text {
  margin-bottom: 50px;
  margin-top: 10px
}

#welcome .stepper {
  width: 100%;
  max-width: 370px;
  height: 4px;
  background: rgb(233,233,233);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 60px
}

#welcome .stepper .step {
  width: 34px;
  height: 34px;
  line-height: 34px;
  background: rgb(233,233,233);
  position: absolute;
  top: -15px;
  color: rgb(138,138,138);
  text-align: center;
  border-radius: 20px
}

#welcome .stepper .step.active {
  background: rgb(252,95,69);
  color: #fff
}

#welcome .stepper .step:nth-of-type(1) {
  left: 0
}

#welcome .stepper .step:nth-of-type(2) {
  left: 50%;
  transform: translateX(-50%)
}

#welcome .stepper .step:nth-of-type(3) {
  right: 0
}

#welcome .screen2 .text {
  max-width: 550px
}

#welcome .code {
  width: 100%;
  max-width: 505px;
  display: inline-block;
}

#welcome .code .text {
  font-weight: bold;
  margin: 20px 0px 15px 0px
}

#welcome .code pre {
  border: 1px dashed rgb(205,205,205);
  background: rgb(248,248,248);
  color: rgb(116,116,116);
  padding: 20px 15px;
  text-align: center;
  white-space: pre-line;
  word-break: break-all;
  margin: 0
}

#welcome .tutorials {
  margin-top: 35px
}

#welcome .tutorials .items .item {
  width: 22%;
  float: left;
  display: inline-block
}

#welcome .tutorials .items .item a {
  display: inline-block
}

#welcome .tutorials .items .item:nth-of-type(5) {
  width: 12%
}

#welcome .tutorials .items .item:nth-of-type(5) a {
  color: rgb(252,95,69);
  font-weight: bold;
  border-bottom: 2px dotted rgb(252,95,69);
  padding: 0px 8px 0px 8px;
  text-decoration: none;
  margin-top: 7px
}

#welcome .tutorials .items .item:nth-of-type(5) a:hover {
  border-bottom: 2px dotted transparent
}

#welcome .tutorials .items {
  margin-top: 20px;
  max-width: 800px;
  width: 100%;
  display: inline-block;
  margin-bottom: 50px
}

#welcome .manual_tips {
  margin: 10px 0px 60px 0px
}

#welcome .manual_tips .item {
  width: 100%;
  margin: 30px 0px 30px 0px
}

#welcome .manual_tips a {
  color: rgb(34,34,34);
  font-size: 1.5em;
  text-decoration: none;
}

#welcome .manual_tips .item:last-of-type a {
  font-size: 2.7em;
  line-height: 1em;
  display: inline-block;
  transform: translateY(-20px)
}

#welcome .customer-chat-content-message {
  text-align: left;
  padding-left: 0;
  padding-right: 0
}

#welcome .operators {
  display: inline-block;;
  width: 100%;
  margin: 30px 0px 80px 0px
}


.customer-chat-content-button,
.ui-dialog .ui-dialog-buttonpane button,
.customer-chat-side-menu-item {
  transition: all 0.3s
}





.install-wizard {
  width: 100%;
  max-width: 100% !important;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0
}

.install-wizard .panel {
  width: 100%;
  border: 0
}

.install-wizard .section,
.install-wizard .intro,
.install-wizard .buttons {
  width: 100%;
  max-width: 1090px;
  margin: 0 auto
}

.install-wizard .intro {
  font-size: 1.1em;
  line-height: 1.7em;
  padding-left: 0px;
  padding-right: 0px;
  color: rgb(115,115,115)
}

.install-wizard .content > .intro {
  padding-left: 20px;
  padding-right: 20px;
}

.install-wizard * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.install-wizard-1 .section .row {
  width: 48%;
  max-width: 450px;
  float: left;
  clear: none
}


.install-wizard .section .row.full {
  width: 100%;
  max-width: 100%;
  float: none;
}

.install-wizard-1 .section .row:nth-of-type(2n) {
  float: right
}


.install-wizard-1 .section .row .col3 {
  width: 100% !important;
  text-align: center;
  font-weight: 700
}

.install-wizard-1 .section .row .col9 {
  width: 100% !important
}

.install-wizard h2,
.install-wizard .header {
  border: 0 !important;
  font-size: 2em;
  font-weight: 400;
  text-align: center;
  background: none;
  color: rgb(26,26,26);
  line-height: 40px;
  height: auto;
  padding: 0
}

.install-wizard .header {
  margin-top: 70px
}

.install-wizard .panel .content {
  border: 0
}

.install-wizard label {
  color: rgb(115,115,115);
  font-weight: 700;
  font-size: 1.15em;
  display: inline-block;
  width: 100%;
  margin-bottom: 3px
}

.install-wizard .use_smtp label {
  float: left;
  width: auto;
  margin-right: 30px
}

.install-wizard .use_smtp .checkbox_switch {
  float: left;
  margin-top: 5px
}

.install-wizard input[type="text"],
.install-wizard input[type="password"],
.install-wizard select {
  width: 100%;
  height: 40px;
  line-height: 1em;
  border: 1px solid rgb(205,205,205)
}

.install-wizard .group {
  padding: 75px 0px 60px 0px;
  position: relative
}

.install-wizard .group:nth-of-type(1) {
  padding-top: 0
}

.install-wizard .group.grey {
  background: rgb(247,247,247)
}

.install-wizard .logo_holder {
  width: 100%;
  height: 190px;
  background: rgb(237,110,71);
  position: relative;
}

.install-wizard .logo_holder:after {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(20px) rotate(45deg);
  content: "";
  background: rgb(237,110,71);
}

.install-wizard .logo_holder img {
  position: relative;
  top: 50%;
  transform: translateY(-50%)
}

.install-wizard .buttons {
  text-align: center;;
  border-top: 0;
  margin-bottom: 70px
}

.install-wizard .btn {
  width: auto;
  height: 60px;
  line-height: 60px;
  padding: 0px 60px 0px 60px;
  display: inline-block;
  color: #fff;
  border-color: transparent;
  position: relative;
  z-index: 1;

  font-size: 20px;
  font-weight: 500;
  border-radius: 27px;
  box-shadow: none;
  transition: all 0.3s;
  border: 0;
  margin: 10px 20px;
  background: #35a1ed
}

.install-wizard .btn:hover {
  color: #fff !important;
  background: #287AB3 !important;
}

.install-wizard .btn.secondary {
  background: #fc5f45;
}

.install-wizard .btn.secondary:hover {
  color: #fff !important;
  background: #c0392b !important;
}

.install-wizard .group.grey:before {
  width: 46px;
  height: 46px;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%) translateY(-23px) rotate(45deg);
  content: "";
  background: #fff
}

.install-wizard .group.grey:after {
  width: 46px;
  height: 46px;
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%) translateY(23px) rotate(45deg);
  content: "";
  background: rgb(247,247,247)
}


.checkbox_switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 29px;
}

.checkbox_switch input {
  display: none;
}


/* The slider */
.checkbox_switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 60px;
  height: 29px;
  /*background-color: #ccc; */
  -webkit-transition: .4s;
  transition: .4s;
  background-color: #09f;
  border-radius: 30px
}

.checkbox_switch .on,
.checkbox_switch .off {
  width: 50%;
  cursor: pointer;
  margin-left: 0;
  margin-right: 0;
}

.checkbox_switch .on {
  padding-left: 15px
}

.checkbox_switch .off {
  padding-left: 12px
}

.checkbox_switch .slider:before {
  position: absolute;
  content: "";
  left: 5px;
  top: 3px;
  transition: 200ms all linear;
  display: inline-block;
  width: 23px;
  height: 23px;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
}

.checkbox_switch input + .slider:before {
  transform: translateX(0px);
}

.checkbox_switch input:checked + .slider:before {
  transform: translateX(27px);
}

.checkbox_switch input + .slider {
  opacity: 0.5
}

.checkbox_switch input:checked + .slider {
  opacity: 1
}

.install-wizard .verify-form__code-wrapper {
  text-align: center;
}

.install-wizard .verify-form__code-wrapper input {
  max-width: 450px;
}

.install-wizard-2 .panel .content {
  max-width: 800px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.install-wizard-2 .section {
  margin: 30px 0px
}

.install-wizard .content > .intro.success {
  text-align: center;
  padding-bottom: 10px
}




.customer-chat-content-button.select-all,
.customer-chat-content-button.select-none {
  background: rgb(237,237,237);
  background: -moz-linear-gradient(top,  rgb(245,245,245) 0%, rgb(237,237,237) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgb(245,245,245) 0%,rgb(237,237,237) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgb(245,245,245) 0%,rgb(237,237,237) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgb(245,245,245)', endColorstr='rgb(237,237,237)',GradientType=0 ); /* IE6-9 */
  color: rgb(117,117,117);
  border: 1px solid rgb(183, 179, 179);
  font-size: 0.9em;
}

.customer-chat-content-button.select-all:hover,
.customer-chat-content-button.select-none:hover {
  background: rgb(245,245,245);
  background: -moz-linear-gradient(top,  rgb(237,237,237) 0%, rgb(245,245,245) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgb(237,237,237) 0%,rgb(245,245,245) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgb(237,237,237) 0%,rgb(245,245,245) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgb(237,237,237)', endColorstr='rgb(245,245,245)',GradientType=0 ); /* IE6-9 */
}






















.customer-chat-admin {
  min-width: 320px
}

.customer-chat-header {
  min-width: 1px
}

.customer-chat-header-logo.mobile {
  display: none
}
/*
.ui-dialog {
  max-width: 90% !important
}
*/
.ui-dialog {
  width: 100% !important;
  max-width: 590px !important;
  background: #fff !important
}

.ui-dialog.dialog-widget-snippet {
  max-width: 760px !important;
}

.dialog-widget-snippet .ui-dialog-titlebar {
  display: none;
}

.ui-draggable .ui-dialog-titlebar {
  background: none !important;
  padding-left: 0 !important;
  height: auto !important;
    padding: 60px 0px 40px 0px !important;
  margin: 0 !important
}

.ui-dialog .ui-dialog-title {
  color: #626262;
  width: 100% !important;
  font-size: 1.5em;
  text-align: center;
  display: inline-block;
  padding: 0 !important;
  margin: 0 !important
}

.ui-dialog .ui-dialog-buttonpane {
  margin-top: 40px !important;
  margin-bottom: 30px !important;
  padding: 0 !important
}

.ui-dialog .ui-dialog-content p {
  font-size: 1.15em
}


.ui-dialog .ui-dialog-content {
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  background: #fff !important;
}

.ui-dialog-titlebar-close {
  width: 30px !important;
  height: 30px !important;
  background: url(../img/redesign/close2.png) center center no-repeat !important;
  position: absolute;
  top: 18px !important;
  right: 18px !important;
  margin: 0 !important;
  transition: 300ms opacity
}

.ui-dialog-titlebar-close:hover {
  opacity: 0.7;
}

.ui-dialog-titlebar-close span {
  display: none
}

.ui-dialog .customer-chat-tabs-wrapper {
  width: 100%
}

.ui-dialog .customer-chat-tab {
  width: 50%;
  text-align: center;;
  font-size: 25px;
  font-size: 16px;
}

.ui-dialog .customer-chat-tab-content:not(.widget-code .customer-chat-tab-content) {
  padding: 25px 20px 25px 20px !important
}

.widget-code {
  height: auto
}

.widget-code code {
  display: inline-block;
  width: 100%;
  max-width: 500px;
  background: rgb(248,248,248);
  border: 1px dashed rgb(205,205,205);
  padding: 15px 30px 15px 30px;
  margin: 20px 0px 0px 0px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 2em;
  word-wrap: break-word;
  word-break: break-all;
}

.widget-code h2 {
  width: 100%;
  text-align: center;
  margin: 40px 0px 20px 0px;
  font-weight: 400;
  display: inline-block;
  font-size: 23px;
  color: rgb(98,98,98)
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  margin-bottom: 30px
}

.ui-dialog .ui-dialog-buttonpane button {
  background: #ed6e47 !important
}

.ui-dialog .ui-dialog-buttonpane button:hover {
  background: #BB5334 !important;
}


.ui-dialog.dialog-select-message .ui-dialog-buttonset button:first-of-type,
.ui-dialog.dialog-leave-talk .ui-dialog-buttonset button:first-of-type {
  background: #35a1ed !important
}

.ui-dialog.dialog-select-message .ui-dialog-buttonset button:first-of-type:hover,
.ui-dialog.dialog-leave-talk .ui-dialog-buttonset button:first-of-type:hover {
  background: #287AB3 !important
}




.login-form {
  max-width: 100%;
  padding: 0px 10px 0px 10px
}


#topbar {
  width: 100%;
  height: 45px;
  line-height: 33px;
  padding: 6px 10px;
  background: rgb(247,247,247);
  box-shadow: 0px 3px 7px 0px rgb(142,142,142);
  position: fixed;
  left: 0;
  top: 0;
  text-align: center;
  color: rgb(120,121,127);;
  font-size: 14px;
  z-index: 10000000000;
}

#topbar.hidden {
  transform: translateY(-200%)
}

#topbar .inner {
  width: 100%;
  max-width: 970px;
  display: inline-block;
  text-align: left;
}

#topbar .inner .info {
  float: left;
  background: url(../img/redesign/i.png) left center no-repeat;
  padding-left: 35px;
}

#topbar .inner .action {
  float: right;
}

#topbar .inner .action .text {
  margin-right: 25px;
  float: left
}

#topbar .inner .action .btn {
  float: right;
  height: 30px;
  line-height: 30px;
  padding: 0px 15px;
  border-radius: 5px
}

#topbar .close {
  width: 33px;
  height: 33px;
  background: url(../img/redesign/x.png) center center no-repeat;
  position: absolute;
  right: 80px;
  top: 6px;
  cursor: pointer
}

#topbar a:not(.btn) {
  color: #ed6e47;
  text-decoration: underline;
}

#topbar a:not(.btn):hover {
  color: #ed6e47;
  text-decoration: none
}

body.topbar_visible {
  padding-top: 45px;
}

body.topbar_visible .customer-chat-side-menu {
  height: calc(100% - 45px);
  top: 45px;
}




.customer-chat-content-row .customer-chat-label {
  /*font-weight: bold;
  color: rgb(78, 73, 74)
  */
  color: #4d4d4d
}


.popup_overlay {
  background: rgba(54,56,69,0.65);
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000000000;
  display: none;
}

#preview_mobile {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100px;
  width: 335px;
  height: 670px;
  z-index: 100000000001;
}

#preview_mobile .holder {
  width: 332px;
  height: 662px;
  position: relative;
  background: url(../img/redesign/mobil.png) left top no-repeat;
  z-index: 1
}

#preview_mobile .holder iframe {
  border: 0;
  margin-top: 57px;
  margin-left: 14px;
  background: #fff
}

#preview_mobile:after {
  width: 502px;
  height: 920px;
  position: relative;
  background: url(../img/redesign/mobil-shadow.png) left top no-repeat;
  content: "";
  position: absolute;
  left: -90px;
  top: -115px;
  z-index: 0;
}

#preview_mobile .close {
  width: 36px;
  height: 36px;
  background: rgb(163,164,171) url(../img/redesign/close-x.png) center center no-repeat;
  display: inline-block;
  position: absolute;
  right: -60px;
  top: -20px;
  border-radius: 20px;
  cursor: pointer;
  z-index: 1;
  transition: 200ms linear
}

#preview_mobile .close:hover {
  opacity: 0.8
}



.auto-message-base {
  border: 1px solid rgb(216,216,216);
  padding: 40px 20px;
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-top: 0px;
}

.customer-chat-tab-content.customer-chat-tab-content-auto-messages .customer-chat-content-messages {
  padding-top: 0
}

.auto-message-base .customer-chat-content-row {
  width: 50%;
  float: left;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.auto-message-base .customer-chat-content-row:nth-of-type(2),
.auto-message-base .customer-chat-content-row:nth-of-type(4) {
  padding-left: 20px !important;
}

.auto-message-base .customer-chat-label {
  font-weight: bold;
  color: #543e40;
  width: 49%;
  float: left;
  height: 34px;
  line-height: 34px;
  max-width: 320px
}

.auto-message-base .customer-chat-content-message-input-field {
  width: 49% !important;
  float: left;
  max-width: 320px !important
}

.label_like_heading {
  padding-top: 25px;
  padding-bottom: 25px
}

.label_like_heading .customer-chat-label {
  display: inline-block;
  color: #543e40;
  font: 14px 'Open Sans', sans-serif;
  line-height: 44px;
  font-weight: bold;
  padding: 0 36px 0 45px;
}

.conditions > div {
  width: 48%;
  float: left;
  position: relative
}

.conditions > div:nth-of-type(1),
.conditions > div:nth-of-type(2) {
  margin-top: 0
}

.conditions > div:nth-of-type(2n) {
  float: right
}

.edit-auto-message .input-col {
  width: 33.33% !important;
  padding-right: 15px;
  float: left;
  margin-right: 0 !important
}

.edit-auto-message .conditions input,
.edit-auto-message .conditions select,
.edit-auto-message .conditions textarea {
  width: 100%
}

.condition_inputs {
  width: calc(100% - 80px);
  float: left
}


.edit-auto-message .conditions .customer-chat-content-button-inline {
  float: left;
  margin-left: 5px !important;
}

.edit-auto-message .conditions .btns {
  position: absolute;
  right: 0;
  top: 0;
  width: 80px
}

.edit-auto-message .description {
  width: 100%;
  clear: both
}

.auto_message_action {
  background: rgb(244,244,244);
  position: relative;
  padding: 75px 20px 60px 20px;
  text-align: center;
}

.auto_message_action:before {
  width: 70px;
  height: 70px;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  content: ""
}

.auto_message_action .desc {
  font-weight: bold;
  width: 100%;
  text-align: center;
  margin-bottom: 25px;
  display: inline-block
}

.auto_message_action input[type=text] {
  width: 100%;
  display: inline-block;
  max-width: 350px
}

.auto_message_active {
  float: right;
  margin-top: 10px;
  margin-right: -5px;
}


.online-users-table .userrow:hover {
  background: #f6f6f6
}


.settings-collection.chat-window-form .customer-chat-content-row {
  margin-bottom: 45px
}

.settings-collection.chat-window-form .customer-chat-content-row .customer-chat-label {
  padding-right: 15px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.radio-input > .item {
  padding: 0px 11px
}






@media screen and (min-width: 1500px) {

  #customer-chat-admin-settings .customer-chat-tabs-wrapper {
    width: 100%
  }

  #customer-chat-admin-settings .customer-chat-tabs-wrapper .customer-chat-tab {
    width: 16.66%;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px
  }

  #customer-chat-admin-settings .customer-chat-tab-button i {
    display: inline-block
  }

}


@media screen and (max-height: 900px) {

  .login_heading {
    height: 120px;
    font-size: 2.7em;
    margin-top: 70px;
    margin-bottom: 70px
  }

  .login .logo_holder {
    height: 180px
  }

}

@media screen and (max-height: 850px) {

  .login_heading {
    height: 120px;
    font-size: 2.7em;
    margin-top: 50px;
    margin-bottom: 30px
  }

  .login .logo_holder {
    height: 140px
  }

}

@media screen and (max-height: 700px) {

  .login_heading {
    height: 130px;
    font-size: 2.4em;
    margin-top: 30px;
    margin-bottom: 10px
  }

  .login .logo_holder {
    height: 140px
  }


}

@media screen and (max-width: 1800px) {

  .login-form {
    position: relative;
    top: 50px;
    margin-top: 0;
    padding-bottom: 50px
  }

  .login-screen body {
    overflow: auto;
  }
}



@media screen and (max-width: 1800px) {

  .widget-settings > .previews {
    width: 100%;
    float: none;
    padding-left: 0;
    margin-top: 30px
  }

  .widget-settings > .settings-list {
    width: 100%;
    float: none
  }

  .widget-settings > .settings-list .mCSB_container {
    padding-right: 15px
  }

}


@media screen and (max-width: 1500px) {

  .conditions > div {
    width: 100%;
    float: none
  }

}


@media screen and (max-width: 1400px) {

  #topbar .close {
    right: 20px;
  }

}



@media screen and (max-width: 1200px) {

  #welcome .screen1 #foxy {
    left: 50px;
    right: auto
  }

}

@media screen and (max-width: 1100px) {

  .install-wizard {
    max-width: 768px
  }

  .customer-chat-tab-content-chat .customer-chat-content-message-input-field {
    padding-right: 115px
  }

  .customer-chat-content-message-input {
    height: auto
  }

  * {
    box-sizing: border-box
  }


  .customer-chat-header-button {
    margin-right: 0px
  }

  .customer-chat-header-title {
    padding-left: 25px
  }

  .customer-chat-content-wrapper-outer {
    padding: 20px 20px 30px 20px;
  }

  .breadcrumbs {
    margin-left: 20px
  }

  .customer-chat-tab {
    height: 60px;
    padding: 20px 25px;
  }

  .customer-chat-tabs {
    height: 60px
  }

  .customer-chat-side-menu-item {
    width: 50%;
    float: left;
    padding: 20px 20px
  }

  .customer-chat-side-menu-item:after {
    width: 100%
  }

  .customer-chat-side-menu {
    width: 100%;
    position: relative
  }

  .customer-chat-content {
    min-width: 320px
  }

  .customer-chat-content .customer-chat-header-logo {
    display: none
  }

  .customer-chat-header .customer-chat-header-logo {
    display: inline-block;
    position: fixed;
    left: 0;
    top: 0;
    height: 93px;
    width: 200px;
    margin-bottom: 0;
  }

  .customer-chat-header-button {
    height: 93px
  }

  .customer-chat-header-menu {
    width: 270px
  }

  .customer-chat-side-menu-item.widgetcode, .customer-chat-side-menu-item.widgetcode:focus {
    margin-top: 15px;
    margin-bottom: 20px
  }

  .customer-chat-header {
    z-index: 11000;
    padding-left: 200px
  }


  .customer-chat-side-menu-item.widgetcode, .customer-chat-side-menu-item.widgetcode:focus {
    margin-left: 20px;
    margin-right: 20px
  }

  #customer-chat-history-filters {
    width: 100%
  }

  #customer-chat-history-filters .buttons {
    width: 115px;
    padding-left: 0;
    float: right
  }

  #customer-chat-history-filters .inputs {
    width: calc(100% - 135px)
  }

  .online-users-table .citycell {
    padding-left: 0;
    padding-right: 0
  }

  .customer-chat-tab-content .customer-chat-tabs-header, .h2,
  .label_like_heading .customer-chat-label {
    padding-left: 0;
    padding-right: 20px
  }

  .label_like_heading .customer-chat-label {
    padding-top: 25px;
    padding-bottom: 10px
  }

  .customer-chat-label {
    width: 35%;
    float: left;
    padding-right: 10px;
    line-height: 34px
  }

  .customer-chat-tab-content-settings .customer-chat-content-message-input-field {
    width: 65%;
    float: right
  }

  .actions .customer-chat-content-message-input-field {
    width: 65%;
    float: left
  }

  .customer-chat-tab-content-settings .customer-chat-content-message-input-field:after {
    clear: both;
    content: "";
    position: relative
  }


  .customer-chat-content-row {
    width: 100%;
    padding: 0px 20px 0px 20px;
    min-height: 34px;
    height: auto !important
  }

  .customer-chat-content-row:after {
    width: 100%;
    clear: both;
    content: "";
    position: relative;
    height: 1px;
    display: inline-block
  }

  .conditions .input-col {
    width: calc(32% - 30px);
    margin-right: 2%;
    float: left
  }

  .conditions .input-col:nth-of-type(3n) {
    margin-right: 15px
  }

  .edit-auto-message .conditions input,
  .edit-auto-message .conditions select,
  .edit-auto-message .conditions textarea {
    width: 100%;
  }

  .actions .customer-chat-content-message-input-field {
    margin-right: 10px
  }

  .edit-auto-message .description {
    padding-left: 0
  }

  .customer-chat-tab-content.customer-chat-tab-content-operators-list .customer-chat-content-messages .customer-chat-content-row, .customer-chat-tab-content.customer-chat-tab-content-canned-messages-list .customer-chat-content-messages .customer-chat-content-row, .customer-chat-tab-content.customer-chat-tab-content-auto-messages-list .customer-chat-content-messages .customer-chat-content-row, .customer-chat-tab-content.customer-chat-tab-content-departments-list .customer-chat-content-messages .customer-chat-content-row {
    margin-left: 0;
    margin-right: 0;
    padding-left: 25px;
    padding-right: 25px
  }

  .customer-chat-tab-content-settings.customer-chat-tab-content-settings-ui .customer-chat-content-row {
    float: none;
    margin-right: 0px;
    min-width: 1px;
  }

  .customer-chat-tab-content-settings .select-list {
    width: 100%
  }

  .customer-chat-tab-content .customer-chat-content-button.customer-chat-content-button-inline {
    margin: 5px 0px 5px 0px
  }

  .customer-chat-tab-content.customer-chat-tab-content-operators-list .customer-chat-label {
    width: 40%
  }

  .customer-chat-tab-content.customer-chat-tab-content-operators-list .customer-chat-label.customer-chat-operator-mail {
    width: 40%
  }

    .talk-tabs {
    padding: 50px 20px 20px 20px
  }

   .talk-tabs > .close,
   .talks-view.-history > .talk-tabs > .close {
    right: 34px;
    top: 106px;
  }



  .talks-view {
    top: 60px;
  }


  body.topbar_visible {
    padding-top: 45px
  }

  body.topbar_visible .customer-chat-side-menu {
    top: 0px
  }

  body.topbar_visible .customer-chat-header .customer-chat-header-logo {
    top: 45px
  }

  #topbar .inner .action {
    padding-right: 50px;
  }

  #topbar .close {
    right: 10px
  }

  .edit-auto-message .conditions .btns {
    margin-top: -5px;
  }

  .settings-collection.chat-window-form .customer-chat-content-row {
    margin-bottom: 20px
  }

  .widget-settings > .settings-list {
  height: auto
}


}

@media screen and (max-width: 830px) {

  .chat-popup > .content > .user-info-section {
    width: 100%;
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin-top: 20px
  }

  .chat-popup > .content > .chat-box {
    width: 100% !important;
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

  }


  .chat-box .customer-chat-content-message-input,
  .file-drop-zone-effect,
  .chat-popup > .content > .chat-box .customer-chat-content-messages,
  .chat-popup > .content > .chat-box .customer-chat-emots-menu {
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  .customer-chat-content-message-input {
    height: auto;
    margin-bottom: 20px
  }

  #welcome .tutorials .items .item {
    width: 33.33% !important;
    margin: 10px 0px 10px 0px
  }

  .auto-message-base .customer-chat-label,
  .customer-chat-tab-content-settings .customer-chat-content-message-input-field {
    width: 100% !important;
    max-width: 100% !important;
    float: none
  }
}

@media screen and (max-width: 767px) {

  .widget-settings > .previews {
    display: none
  }

  .settings-row.-half > .settings-col {
    width: 100%;
    padding-left: 0px !important;
    padding-right: 0px !important;
    border: 0
  }

  #customer-chat-widget-settings-tab .chat-window-form .customer-chat-label {
    width: 100%;
    padding: 0 !important
  }

  #customer-chat-widget-settings-tab .settings-list .customer-chat-content-row {
    margin-left: 0;
    margin-bottom: 0
  }

  #customer-chat-widget-settings-tab .settings-col .customer-chat-label {
    width: 50%;
    line-height: 30px;
    margin-right: 0;
    float: left
  }

  #customer-chat-widget-settings-tab .settings-list input[type="text"], .settings-list select, .settings-list textarea, .settings-list .color-input {
    width: 50%;
    float: left

  }

  .login .logo_holder {
    height: 100px
  }

  .login_heading {
    height: 120px;
    margin-top: 30px;
    margin-bottom: 0px;
  }

  .login_holder {
    min-height: 600px
  }

  #topbar .action .text {
    display: none
  }
  /*
  #topbar .info,
  #topbar .action {
    width: 100%;
    float: left
  }

  #topbar .inner {
    display: block
  }


  */

  .customer-chat-header .customer-chat-header-logo {
    width: 100%;
    height: 70px
  }

  .customer-chat-header {
    padding-left: 0;
    height: 130px
  }

  .customer-chat-header .customer-chat-header-logo.mobile {
    position: relative
  }

  .customer-chat-header-button {
    height: 60px;
    line-height: 60px;
    margin-top: -22px
  }

  .customer-chat-header-title {
    margin-top: -22px;
    height: 60px;
    line-height: 60px
  }

  .customer-chat-content {
    padding-top: 130px
  }

  .customer-chat-side-menu {
    padding-top: 10px
  }

  .customer-chat-side-menu-item {
    width: 100%;
    float: none
  }

  body.topbar_visible .customer-chat-header .customer-chat-header-logo {
    top: 0px
  }
}


@media screen and (max-width: 630px) {

  .talks-view {
    top: 90px
  }

  .stats-wrapper .date-input-wrapper {
    width: 49%;
    float: left;
    margin-right: 2%
  }

  .stats-wrapper .date-input-wrapper:nth-of-type(2n) {
    margin-right: 0
  }

  .stats-wrapper .customer-chat-content-button {
    margin-top: 10px
  }

  .chart-wrapper-small {
    width: 100%;
    float: none;
    padding: 0px 15px 0px 15px
  }



  .customer-chat-header-button-text {
    display: none
  }

  .customer-chat-department-description,
  .customer-chat-canned-message-body,
  .customer-chat-tab-content-auto-messages-list .customer-chat-label.customer-chat-auto-message-body {
    display: none !important
  }

  .customer-chat-tab-content.customer-chat-tab-content-departments-list .customer-chat-tab-content-departments-actions,
  .customer-chat-tab-content.customer-chat-tab-content-canned-messages-list .customer-chat-tab-content-canned-messages-actions {
    width: 100px !important;
    float: right !important;
  }

  .customer-chat-tab-content.customer-chat-tab-content-auto-messages-list .customer-chat-tab-content-auto-messages-actions {
    width: 120px !important;
    float: right !important
  }

  .customer-chat-tab-content-departments .customer-chat-label {
    width: calc(100% - 110px)
  }

  .customer-chat-tab-content-canned-messages .customer-chat-label {
    width: calc(100% - 110px)
  }

  .customer-chat-tab-content.customer-chat-tab-content-auto-messages-list .customer-chat-label {
    width: calc(100% - 120px);
  }

  .customer-chat-tab-content-operators-actions a, .customer-chat-tab-content-canned-messages-actions a, .customer-chat-tab-content-auto-messages-actions a, .customer-chat-tab-content-departments-actions a {
    margin-right: 10px
  }

  .customer-chat-header-button .customer-chat-content-message-avatar-operator {
    margin-right: 5px
  }



  #searchFromDateWrapper {
    padding-right: 5px
  }

  #searchToDateWrapper {
    padding-left: 5px
  }



  .conditions .input-col {
    width: 100% !important;
    margin-right: 0%;
    margin-bottom: 15px;
    float: none;
  }

  #customer-chat-history-filters .inputs {
    width: 100%
  }

  #customer-chat-history-filters .buttons {
    width: 100%
  }

  .customer-chat-tab-content-settings.customer-chat-tab-content-settings-ui .customer-chat-content-messages {
    padding: 20px 0px 20px 0px
  }


  .customer-chat-tab-content-chat a.btn-canned-msg, .customer-chat-tab-content-chat a.btn-auto-msg {
    position: relative;
    left: 0;
    top: auto;
    margin-top: 10px;
    display: inline-block
  }

  .chat-popup > .content > .chat-box .customer-chat-content-message-input .file-button,
  .customer-chat-content-message-emots-button {
    position: relative;
    float: right;
    margin-left: 15px;
    left: auto;
    top: auto;
    margin-top: 10px;
    right: auto !important
  }

  .customer-chat-content-message-emots-button {
    position. relative;
  }

  .customer-chat-tab-content-chat .customer-chat-content-message-input-field {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .customer-chat-content-message-author {
    width: 100%
  }

  .customer-chat-content-message-time {
    width: 100%;
    margin-top: 3px;
    margin-bottom: 10px
  }

  #customer-chat-admin-map {
    width: 90%;
    left: 5%;
    top: 140px;
    bottom: auto;
  }

  #welcome .manual_tips a {
    font-size: 1.1em
  }



  .condition_inputs {
    width: 100%;
    float: none;
  }

  .conditions > div .clearfix {
    display: none
  }

  .edit-auto-message .description {
    width: calc(100% - 100px);
    float: left
  }

  .edit-auto-message .conditions .btns {
    float: right;
    position: static;
    margin-top: -5px
  }

  .edit-auto-message .input-col {
    padding-right: 0
  }
}

@media screen and (max-width: 630px) {



  .actions .customer-chat-content-message-input-field {
    width: 49% !important;
    float: left;
    margin-right: 2%
  }

  .actions input {
    width: 49% !important;
    float: right;
  }

  .customer-chat-label {
    line-height: 30px;
    width: 100%;
    float: none
  }

  .customer-chat-tab-content-settings .customer-chat-content-message-input-field {
    width: 100%;
    float: none
  }

  .actions .customer-chat-content-message-input-field {
    width: 100% !important;
    float: none;
    margin-right: 0%;
    margin-bottom: 15px
  }

  .actions input {
    width: 100% !important;
    float: none;
  }

  .online-users-table th, .online-users-table tr td:first-of-type {
    padding-left: 0
  }

  .ui-dialog {
    max-width: 90%;
    margin-top: 50px;
    left: 50%;
    right: auto !important;
    transform: translateX(-50%);

  }

  .chat-header-bar > .visitorname {
    width: calc(100% - 80px);
    display: inline-block
  }

  .chat-header-bar > .visitorname, .chat-header-bar > .flag, .chat-header-bar > .transfer {
    margin-top: 10px
  }

  #welcome .screen {
    padding-left: 30px;
    padding-right: 30px
  }

  #welcome .heading {
    font-size: 1.7em
  }

  #welcome .text {
    font-size: 0.9em
  }

  #welcome .screen1 #foxy {
    display: none
  }

  #welcome .tutorials .items .item {
    width: 50% !important;
  }

  .install-wizard .section .row {
    width: 100% !important;
    max-width: 100%;
    float: none
  }

  .install-wizard .intro {
    font-size: 1em
  }

  .install-wizard-1 .buttons {
    margin-bottom: 40px;
    margin-top: -40px
  }

  .install-wizard h2, .install-wizard .header {
    font-size: 1.7em
  }



  .install-wizard .col3,
  .install-wizard .col9 {
    width: 50%
  }

  .install-wizard .row.full .col3,
  .install-wizard .row.full .col9 {
    width: 100%;
    text-align: center;
  }

  .install-wizard .btn {
    padding-left: 40px;
    padding-right: 40px;
    margin: 10px
  }



}

@media screen and (max-width: 550px) {

  #topbar {
    height: auto;
  }

  #topbar .inner {
    display: block;
  }

  #topbar .inner .info {
    width: 100%;
    text-align: center;
    float: none;
    background: none;
    padding: 0
  }

  #topbar .inner .action {
    width: 100%;
    text-align: center;
    float: none;
    margin-top: 2px;
    margin-bottom: 2px
  }

  #topbar .inner .action .btn {
    float: none;
    display: inline-block;
  }

  body.topbar_visible {
    padding-top: 80px
  }


  #topbar .inner .action {
    padding-right: 0px;
  }

  #preview_mobile {
    display: none
  }

  .previews .info {
    display: none
  }

  .auto-message-base .customer-chat-content-row,
  .auto-message-base .customer-chat-content-row:nth-of-type(2),
  .auto-message-base .customer-chat-content-row:nth-of-type(4) {
    width: 100% !important;
    float: none;
    padding-left: 0 !important;
    padding-right: 0 !important
  }

}

@media screen and (max-width: 450px) {

  .customer-chat-tab-content:not(.customer-chat-tab-content > .customer-chat-tab-content) {
    padding-left: 15px !important;
    padding-right: 15px !important
  }

  .customer-chat-content-wrapper-outer {
    padding: 20px 0px 30px 0px
  }

  .radio-input > .item {
    width: 100%;
    height: 30px;
    line-height: 30px !important
  }

  .widget-settings {
    padding: 15px
  }

  #customer-chat-widget-settings-tab .settings-list input[type="text"], .settings-list select, .settings-list textarea, .settings-list .color-input {
    width: 100%
  }

  #customer-chat-widget-settings-tab .settings-col .customer-chat-label {
    width: 100%;
    line-height: 30px;
    margin-bottom: 5px
  }

  .login_heading {
    height: 80px;
    font-size: 1.8em
  }

  .login_holder {
    min-height: 550px
  }

  .login .logo_holder .logo {
    max-width: 200px
  }

  #welcome .screen {
    padding-top: 90px
  }

  #welcome .screen1 {
    padding-top: 45px;
    padding-bottom: 50px;
    background: none
  }

  #welcome .tutorials .items .item {
    width: 100% !important;
    float: none
  }

  .install-wizard .logo_holder img {
    width: 55%
  }

  .install-wizard .logo_holder  {
    height: 140px
  }

  #topbar .close {
    bottom: 7px;
    top: auto
  }
}